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

目次

概要

  • 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

  • コンポーネント中のデータの流れを

と、一方向化している。

  • 詳しくは、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でインポートが可能。

  • 1クラス、インポート
    import { SubComponent1 } from './SubComponent';
  • nクラス、インポート(1ファイルに複数定義されている場合。
    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を継承したクラスの定義は不要。

  • 定義
  • 匿名関数
    const Hello = function() {
      return <div>Hello XXXX</div>
    }
  • ラムダ式
    const Hello = () => <div>Hello XXXX</div>
  • 使い方
    <Hello />
  • 匿名関数
    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の値}>

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で子に渡して、子からハンドラを呼び出す(引数指定可能)。
  • その後、必要に応じて、「親から子」のデータ連携を行う。

参考

js STUDIO

  • React 0.13 日本語リファレンス

Qiita

コンポーネント

Stateless Functional Components

概要

参考

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

概要

参考

  • Qiita

Css in JS

概要

参考

  • Qiita

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

CSS

react-bootstrap

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

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)。

データ連携

Flux

Redux

リサイズ・移動など

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のセカンド・ステップ

参考

@IT

Qiita

Schoo

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

POSTD

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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-06-28 (木) 09:31:56 (21d)