React - .NET 開発基盤部会 Wiki

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る

目次 †

目次
概要
特徴
- Just the UI
- コンポーネント指向
  - 仮想DOM
  - Data flow
基本的な事項
データおよびイベント連携
コンポーネント
- Stateless Functional Components
  - 概要
  - 参考
- コンポーネント・ライフサイクル
  - 概要
  - 参考
Css in JS
- 概要
- 参考
コンポーネント・ライブラリ
step by step 的な
参考

↑

概要 †

Facebook社が開発しているSingle Page Application開発用のUIサブシステム。

コンポーネント指向に基づいて効率的にSPAを開発できる。

JSX（*.jsx、*.tsx）で作成され、Node.js開発環境でコンパイルされて*.jsを得る。

下記の特徴を見ると、JSのMV*もXAML的になったなぁという感覚がある。

↑

特徴 †

↑

Just the UI †

View(UI)部分のみを管理する

↑

コンポーネント指向 †

Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。
なお、コンポーネントのインスタンスのことを「エレメント」と言う。

↑

仮想DOM †

設計と速度が両立すると言われている。

仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。
- 最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。
- 2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。

JSXで記述する。

↑

Data flow †

コンポーネント中のデータの流れを
- state, props
- -> UI要素へ

と、一方向化している。

詳しくは、Fluxを参照。

↑

基本的な事項 †

↑

言語 †

JSXをサポートする言語を使用する。

↑

Babel(ECMAScript) †

「Babel」（ECMAScript）を導入する方法が最も簡単。
プログラム・ファイルの拡張子は、*.jsx。

↑

TypeScript †

また、「TypeScript」でもサポートされている（TSX）。
プログラム・ファイルの拡張子は、*.tsx。

↑

JSX †

画面定義のマークアップ言語

↑

特徴 †

JSの拡張言語で、

React 要素作成する仮想DOMを、簡便な形式でXMLマークアップのシンタックスを追加する。

XMLマークアップには、標準のHTML5 + 拡張属性で、HTMLタグとJSXタグが共存する。

制御構文とXMLマークアップが混在するという意味で、Razor的。

↑

変数出力 †

{変数名}でJavaScript変数を出力

↑

イベント・ハンドラ †

基本的に以下のように書く。

<button onClick={()=>this.renderChange()}>切替</button>

以下は問題がある。

レンダリング時にclickActionが起動してしまう。
```
<div onClick={this.clickAction()}>
```

thisにアクセスできない。
```
<div onClick={this.clickAction}>
```

↑

属性の指定 †

自由に属性を設定可能。

<div>
    <MyComponent 
        myTitle={'タイトル'}
        myValue={this.state.value} />
</div>

子コンポーネントからprops.(定義した属性名)と利用。

↑

Css in JS †

React自信にデザインの機能はないのでCSSを利用する。

「Css in JS」と言われる考え方が登場し、
React用のCSSをインポート可能になっている。

classはclassNameと書く。styleはstyleで良い。

<button className="btn btn-default" style={{color:"gray"}}/>

↑

コンポーネントの配置 †

JSXタグでコンポーネントを設置

タグ名＝コンポーネントクラス名の
JSXタグは頭文字を大文字になる。

<MyComponent />

↑

コンポーネントのネスト †

コンポーネントのRender内に、子コンポーネントを記述

<SubComponent />

↑

基本形のコンポーネント †

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
    constructor(props,context){
        super(props,context)
        this.state = { viewText : 'テストページ' }
    }
    render(){
        return (
            <div>
                <h1>Hello! World.</h1>
                <p>このページは{ this.state.viewText }です。</p>
            </div>
        )
    }
}

↑

extends †

state, propsを使用する場合、React.Componentを継承する。

↑

export †

モジュール化することによってインポート可能なクラスにする。
```
export class MyComponent extends React.Component {
```

defaultも付けると、デフォルトで読み込むモジュールになる
```
export default class MyComponent extends React.Component {
```

↑

import †

exportでモジュール化したクラスは、importでインポートが可能。

１クラス、インポート

import { SubComponent1 } from './SubComponent';

ｎクラス、インポート（１ファイルに複数定義されている場合。
```
import { SubComponent1, SubComponent2 } from './SubComponent';
```

↑

state †

コンポーネントの状態を表す変数。
コードからReact.Componentのプロパティと思われる。

↑

props †

データを親コンポーネントから子コンポーネントに渡す際に使用する。
変更不可と書かれていることがあるが変更通知を使用すれば変更可能。
コードからReact.Componentのプロパティと思われる。

↑

constructor †

stateあり

  constructor(props, context) {
    super(props, context)
    this.state = {
      viewText: props.text,
      viewFlg: props.defaultFlg,
    }
  }

stateなし
stateを使わない、propsだけのコンポーネントの場合、
```
constructor(props,context){
    super(props,context)
}
```

constructorの記述自体を丸々省略できる。

↑

render †

生成したいHTML（正確にはJSX）を書く。
return( の直下は1つのエレメントしか置けない。

繰り返し処理
map内にラムダ式を書く。

配列

items = [
    { value : 'apple' },
    { value : 'orange' },
    { value : 'banana' },
 ];

値

return items.map(_item => {
    return(
        <li>{_item.value}</li>
    )
})

キー、値

return items.map((_item,_key) => {
    return(
        <li key={_key}>{_item.value}</li>
    )
})

コンポーネントの再描画

stateを更新して、コンポーネントを再描画する。

イベントなどで、上記のthis.stateを変更するとHTMLが再描画される。

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      viewText: props.text,
      viewFlg: props.defaultFlg,
    }
  }
  renderChange() {
    // viewFlgの状態を切替(0 <-> 1)
    let newFlg = this.state.viewFlg == 1 ? 0 : 1;
    this.setState({ viewFlg: newFlg });
  }
  render() {
    return (
      <div>
        <h1>Hello! World.</h1>
        <LeadText viewText={this.state.viewText} viewFlg={this.state.viewFlg} />
        <button onClick={()=>this.renderChange()}>切替</button>
      </div>
    )
  }
}

↑

その他のコンポーネント †

↑

状態を持たないコンポーネント †

Stateless functional components

stateを自身で持たないシンプルなコンポーネントの場合、
React.Componentを継承したクラスの定義は不要。

定義

propsがない場合

匿名関数

const Hello = function() {
  return <div>Hello XXXX</div>
}

ラムダ式

const Hello = () => <div>Hello XXXX</div>

使い方
```
<Hello />
```

propsがある場合

匿名関数

const Hello = function(name) {
  return <div>Hello name</div>
}

定義
関数の引数でDestructuring

const Hello = ({name}) => <div>Hello {name}</div>

使い方
```
<Hello name="XXXX" />
```

↑

テンプレート・コンポーネント †

定義
{this.props.children}で子を描画。

// テンプレート・コンポーネント
class TemplateComponent extends React.Component {
  render() {
    return (
      <main>
        <header>
          <h2>{this.props.title}</h2>
        </header>
        <div>
          {this.props.children}
        </div>
        <footer>
          <p>copyright company</p>
        </footer>
      </main>
    )
  }
}

利用
TemplateComponent?にChildComponent?を指定。

// Mainコンポーネント
class MainComponent extends React.Component {
  render() {
    return (
      <section>
        <h1>Main Title</h1>
        <TemplateComponent title={'コンテンツタイトル'}>
          <ChildComponent />
        </TemplateComponent>
      </section>
    )
  }
}

↑

コンポーネントの属性 †

↑

refs †

同一コンポーネントのインスタンスを識別する。

↑

データおよびイベント連携 †

↑

親から子 †

↑

props †

基本

子側で（利用を）定義
```
this.props.XXXX
```

親側でデータを指定。
```
<子 XXXX={JavaScriptの値}>
```

型指定と既定値
- 基本形のコンポーネント
  ・・・

Stateless functional components

Hello.propTypes = {
  name: React.PropTypes.string
}
Hello.defaultProps = {
  name: 'XXX'
}

↑

JSX Spread Attributes †

親コンポーネントが保持しているデータを
全て子コンポーネントのpropsに渡す。

子側の定義は不要で、以下のように利用可能。

親側でスプレッド演算子によりデータを指定。

任意のデータ

var props = {};
props.foo = x;
props.bar = y;
var component = <子 {...props} />;

親側のpropsデータ
```
<子 {...this.props}>
```

↑

componentWillReceiveProps? †

親側は、
- this.stateをpropsにバインドしておき、

setStateで変更を反映する。

子側は、
- コンポーネントが新しいpropsを受け取ると、
  componentWillReceiveProps? が変更通知として実行される。

propsの更新をsetStateで反映する。

componentWillReceiveProps(newProps) {
  //JSON.stringify(newProps);
  this.setState({count: newProps.count});
}

↑

子から親 †

親のハンドラをthis.propsで子に渡して、子からハンドラを呼び出す（引数指定可能）。
その後、必要に応じて、「親から子」のデータ連携を行う。

↑

参考 †

Reactでイベントの伝播 - yugr’s diary
http://yugr.hatenablog.com/entry/2017/11/22/132059

javascript - Updating state with props on React child component - Stack Overflow
https://stackoverflow.com/questions/39154967/updating-state-with-props-on-react-child-component

↑

js STUDIO †

React 0.13 日本語リファレンス

propsの受け渡し
http://js.studio-kingdom.com/react/guides/transferring_props

JSXのスプレッド属性
http://js.studio-kingdom.com/react/guides/jsx_spread

componentWillReceiveProps?
http://js.studio-kingdom.com/react/component_lifecycle/updating_componentwillreceiveprops

↑

Qiita †

React における State と Props の違い
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

今からはじめるReact.js〜propsとstate、それからrefs〜
https://qiita.com/kuniken/items/a22adda392ccc30011b1

ざっくり React チュートリアル
https://qiita.com/pullphone/items/efcaee59cf2a5725c61d

↑

コンポーネント †

↑

Stateless Functional Components †

↑

概要 †

↑

参考 †

Qiita
- ReactのStateless Functional Componentsの書き方
  https://qiita.com/ledsun/items/c577e004561b59f9a7e5

↑

コンポーネント・ライフサイクル †

↑

概要 †

↑

参考 †

Qiita

React.jsのComponent Lifecycle
https://qiita.com/koba04/items/66e9c5be8f2e31f28461

React Componentのライフサイクルのまとめと利用用途
https://qiita.com/yukika/items/1859743921a10d7e3e6b

React コンポーネント作成時に非同期通信したいときは componentDidMount? に書こう
https://qiita.com/megane42/items/213e927a2af72530e920

↑

Css in JS †

↑

概要 †

↑

参考 †

Qiita

React.js + CSS
https://qiita.com/koba04/items/0e81a04262e1158dbbe4

Styling and CSS - React
https://reactjs.org/docs/faq-styling.html#what-is-css-in-js

↑

コンポーネント・ライブラリ †

↑

CSS †

↑

react-bootstrap †

BootstrapをReactから使いやすくしたライブラリ。
インストールと、CSS自体の読み込みが必要。

参考
- react-bootstrapで書くとコンポーネント的にBootstrapが使えるよ！　 | 酒と涙とRubyとRailsと
  https://morizyun.github.io/javascript/react-js-bootstrap-javascript-css-framework.html

↑

Material-UI †

マテリアルデザインをReact.jsで実現するライブラリ。
Bootstrapと提供機能はほとんど同じ。
```
 npm install material-ui --save
```

↑

拡張機能 †

↑

react-hot-loader（AppContainer?） †

Reactコンポーネントが状態を失うことなく、
ライブで再ロードされるようにするプラグイン。

↑

react-router-dom（BrowserRouter?） †

https://reacttraining.com/react-router/
https://reacttraining.com/react-router/web/guides/philosophy

Router

BrowserRouter?
通常のRouter

HashRouter?
URLフラグメント、URLハッシュ値を使用したRouter

パラメタ

パラメタを持たないコンポーネント
```
<Route exact path="/" component={FormInput}/>
```

パラメタを持つコンポーネント

オブジェクト

<Route exact path="/" render={props => <FormInput data={this.state.data} />} />

<p>Data:{ this.state.data }</p>

URL

<Route path="/:id" component={FormInput}/>

<p>ID:{props.match.params.id}</p>

タグ
- Link
- Redirect

↑

isomorphic-fetch（fetch） †

XMLHttpRequest?代替のfetch APIのPolyfill（WHATWG Fetch polyfill）。

Fetch API - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

↑

React-Resizable †

Drag&Dropで画面項目をリサイズ

↑

React-Draggable †

Drag&Dropで画面項目を移動

↑

UIコンポーネント †

↑

React Contextmenu †

右クリックでメニューを表示する

↑

React Tree Menu Component †

ツリーメニュー

↑

rc-calendar †

カレンダーでの日付表示、日付入力機能

↑

react-big-calendar †

スケジューラ用途のカレンダー

↑

React Bootstrap Table †

高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。

↑

step by step 的な †

↑

Reactのファースト・ステップ †

↑

Reactのセカンド・ステップ †

↑

Reactのサード・ステップ †

↑

参考 †

↑

＠IT †

いまさら聞けないReact、Virtual DOM、JSX超入門 (1/3)
http://www.atmarkit.co.jp/ait/articles/1607/26/news138.html

↑

Qiita †

reactjsに関するxxxx件の投稿
https://qiita.com/tags/reactjs

Destructuring assignmentのご利用は計画的に
https://qiita.com/okunokentaro/items/ec3210a1942471fba612

react-router@v4を使ってみよう：シンプルなtutorial
https://qiita.com/hoture/items/b4ca1773580317e7112e

jsFiddleを使ってみる
https://qiita.com/kazusa-qooq/items/f78791c827ae050ca127

↑

Schoo †

学べる生放送コミュニケーションサービス

React.js入門
https://schoo.jp/class/3437
React.js実践入門
https://schoo.jp/class/3628

↑

POSTD †

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず…
https://postd.cc/learn-raw-react-no-jsx-flux-es6-webpack/

大規模Reactアプリケーションを構築するためのベストプラクティス
https://postd.cc/best-practices-for-building-large-react-applications/

Web開発の未来 – React、FalcorおよびES6
https://postd.cc/future-of-the-web-react-falcor/

↑

マイクロソフト系技術情報 Wiki †

ASP.NET Core SPAテンプレート
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20SPA%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

ASP.NET Core React.jsテンプレート
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

ASP.NET Core React+Reduxテンプレート
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React%2BRedux%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

最新の50件

目次 †

概要 †

特徴 †

Just the UI †

コンポーネント指向 †

仮想DOM †

Data flow †

基本的な事項 †

言語 †

Babel(ECMAScript) †

JSX †

特徴 †

変数出力 †

イベント・ハンドラ †

属性の指定 †

Css in JS †

コンポーネントの配置 †

コンポーネントのネスト †

基本形のコンポーネント †

extends †

export †

import †

state †

props †

constructor †

render †

その他のコンポーネント †

状態を持たないコンポーネント †

テンプレート・コンポーネント †

コンポーネントの属性 †

refs †

データおよびイベント連携 †

親から子 †

JSX Spread Attributes †

componentWillReceiveProps? †

子から親 †

参考 †

js STUDIO †

Qiita †

コンポーネント †

Stateless Functional Components †

概要 †

参考 †

コンポーネント・ライフサイクル †

概要 †

参考 †

Css in JS †

概要 †

参考 †

コンポーネント・ライブラリ †

CSS †

react-bootstrap †

Material-UI †

拡張機能 †

react-hot-loader（AppContainer?） †

react-router-dom（BrowserRouter?） †

isomorphic-fetch（fetch） †

データ連携 †

リサイズ・移動など †

React-Resizable †

React-Draggable †

UIコンポーネント †

React Contextmenu †

React Tree Menu Component †

rc-calendar †

react-big-calendar †

React Bootstrap Table †

step by step 的な †

参考 †

＠IT †

Qiita †

Schoo †

POSTD †

マイクロソフト系技術情報 Wiki †