認識React

5863 ワード

flux コンポーネント化 redux react.js javascript

認識React
準備
babel-cli
Reactには2つの方法があります.

は、jsx

を通過する.

は、js

を通じて
jsxはもっと便利なようですが、バベルでコンパイルしなければなりません.
babelでReactをコンパイルするjsxには3つの方法があります.(babelの具体的な使い方については疑問が多いようです.後でまた振り回されます.)

CLIツールコンパイル

Node.js実行時コンパイル

ブラウザ(クライアント)実行時コンパイル

これはbabel-cliでリアルタイムでコンパイルするつもりです.便利です.
インストール
ツールの全体をインストールしました.

$ [sudo] npm i -gd babel-cli

プラグインを単独でインストール:

$ npm i -d babel-preset-react

使用
ps:私はここで前に言い間違えました.
ここにピットがあります.windowsシステムでは直接babel --presets reactができますが、OS xではエラーが発生します.直接に絶対パス/usr/local/lib/node_modules/babel-preset-reactを指定します.
babel-cliの--presetsパラメータは、親レベルディレクトリにnode_moduleの中のbabel-prest-xxxプラグインを探しています.見つけられなかったら、現在のディレクトリパスに対してプラグインを探しています.
これ以外にも、絶対パスのプラグインの住所を書いてもいいです.
プラグインを単独でインストールした後、絶対パスアドレスを書かなくてもいいです.

$ babel --presets react jsx --watch --out-dir build

毎回コマンドをノックしたくないなら、プロジェクトディレクトリ(babelコマンドを押すディレクトリ)に.babelrcファイルを新規作成できます.

{
    "presets": ["react"]
}

このようにコマンドをノックする時は--presetsパラメータを持たないでください.

$ babel jsx --watch --out-dir build

jsxはコンパイルが必要なフォルダであり、buildはコンパイル後に作成されたフォルダである.
React v 0.14 xを使用します.




  
  Document

ps: サイトのでは、reactコアjsはラベルのにっています.これはにDOMをレンダリングするにタグのにできます.さもなくば、のようにラベルのでノードにreactをレンダリングします.
コンポーネント
コンポーネントコンセプト
まず、Inputのコンポーネントをください.

var Input = React.createClass({
  render: function(){
    return(
      
               
        
      
    )
  }
})

Reac.createClassをしてされたのがコンポーネントです.rander returnのものをテンプレートとぶことができます. コンポーネントはつのツリーである( ノードとサブノードがあり、つまり2つのトップノードがにしてはいけない.reactはされない).Reactのではつのコンポーネントでされています. みわせもののです.
コンポーネントのレンダリング

ReactDOM.render(
  ,
  document.getElementById('JBody')
);

ReactDOM.renderメソッドをびしてレンダリングし、のパラメータはコンポーネントであり、はコンポーネントをしたコンテナである. に、のパラメータはツリー、すなわちトップノードのみをサポートする.
コンポーネントの2つのなオブジェクト
propspropsは、コンポーネントテンプレートのデータオブジェクトである. にはなデータがされています.つまりびしだけにがりてられています.その、データのがあれば、テンプレートのレンダリングはわれません.
propsの :

var Input = React.createClass({
  render: function(){
    return(
      //    props
      
               
        
      
    )
  }
})

ReactDOM.render(
  , //    props
  document.getElementById('JBody')
)

statestateはpropsとである.stateはデータオブジェクトであり、つまりいつでもりてがであり、そのデータのがあればテンプレートのレンダリングがわれる(ここでレンダリングすると、reactのvirtual DOMにする).
stateの :ここでリスト Itemsをする.

var Items = React.createClass({
  getInitialState: function() {
    return {
      data: [12312,1231,45,51512312,2131]
    }
  },
  render: function(){
    return(
      
        {this.state.data.map((value,i) => {
          return {value}
        })}
      
    )
  }
})

getInitialStateは、stateのデータをするためにされる.
コンポーネントのライフサイクルにおいてサーバからデータをし、this.setStateメソッドをびしてstateにをりてることもできる.this.setStateはそののです.Inputコンポーネントをし、state :

var Input = React.createClass({
  getInitialState: function() {
    return {
      who: ' '
    }
  },
  change: function(e){
    let target = e.target
    this.setState({
      who : target.value
    })
  },
  render: function(){
    //    props
    return(
      
        
                 ？
          
        
        {`   ${this.state.who}   `}
      
    )
  }
})

ReactDOM.render(
  ,
  document.getElementById('JBody')
)

ここではイベントonChangeのびしがわれ、イベントをトリガするとstateがされます. システムにする :

reactイベントシステム

reactフォームイベント

コンポーネントのドキュメント

コンポーネントAPI

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

コンポーネントの
reactのにはつのなるコンポーネントのにするがないが、はfluxの、flux をしている.しかし、コミュニティはこのプランがとてもいいとはわないようで、の reduxがある.
にする
reactのコンポーネントのはであるが、コンポーネントはにないといえる.
のでは、コンポーネントのは、データとコンポーネントのレンダリングがであるので、よりにデータのとしてできる. なるコンポーネントのレンダリングをするコンポーネント・コンテナは、データのをでし、コンポーネントのレンダリングをう.データとコンポーネントレンダリングのができます.このコンセプトはContiner Components、Leveling Up With React:Continer Componentsです.
のいくつかのmv*フレームワークでは、コンポーネントはのインターフェースをっており、AコンポーネントのでBコンポーネントとデータができますが、reactはこのようなインターフェースをっていません.したがって、やなどのツールをりるがあります.
そうです. たちはFluxやReduxなどをツールとしてうことができます. きなら、でいてもいいです.AコンポーネントのデータがBコンポーネントのデータとするとき、Bコンポーネントのをダイヤルして、Bコンポーネントにデータをえてください.データはオペレータのシステムのでって、Bコンポーネントにられます.
シーン
えばログインします
つのページで、つのをしたいコンポーネントがあれば、がになります. つのコンポーネントがログインしたら、のをするがあるコンポーネントをするべきです.これでのがじました.
コンポーネントのとパッケージ
これはあまりくのがないです.コンポーネントの、はされたです. があれば、をつけてからします.しかし、これはくのがとしてしまうかもしれません. れたパッケージはまずなとメンテナンスにけて、にされます.
github:https://github.com/jincdream/jincdream.g...