Reactjsは速くて上手です

React略述
Reactはfackbookによって開放されたユーザーインターフェースを構築するjavascriptクラスのライブラリであり、 を開発するために多くの開発者がReactをMVCモードのVと見なしている.2011年にReactはfackbookエンジニアによって開発され、内部使用として開始され、2013年に正式オープンソースとした.
Reactの強み

JavaScript:データが変化すると、インタフェースは変化します.

:Reactは開発ユニットとして構成要素によって構成され、1つの構成要素は1つまたは複数の他の構成要素を含むことができる.

:Reactはwebappで使用できるほか、 を介してIOSとAndroidアプリケーションにも適用できます.

開発前の準備
Reactプログラムを開発するには必要なファイルを導入する必要があります.以下はReactプログラムの基本的な構造です.

ここで は つのファイルを しました.これらのファイルは React Nativeによってインストールされました.まずbowerです.これは にReactの の を んでいます.react.jsは が したコンポーネントをhtmlドキュメントに したものです.react-dom.jsという を つコードをJavaScriptコードに します.JavaScriptのコードを っているなら、このファイルは しなくてもいいです.もちろんbrowser.min.jsを って して、react-toolsを してオフライン してもいいです.
つの さいデモ
ここではまず、 さな を げて、みんなに ものを べさせます.

    
    
    
    
    
    
    




    
var SearchInput = React.createClass({
    handerChange: function(){
        this.props.setName(this.refs.seachbox.value);
    },
    render: function(){
        return (
            <div>
                <input type='text' ref = 'seachbox' onChange={this.handerChange}/>
            </div>
        );
    }
});

var List = React.createClass({
    render:function(){
    var lists = this.props.lists;
    var filterWord = this.props.filterWord;
    var rows = [];
    lists.forEach(function(list){
        if(list.toLowerCase().indexOf(filterWord.toLowerCase())!=-1){
            rows.push(<div>{list}</div>);
        } 
        
    }.bind(this));
        return (
            <div>{rows}</div>
        );
    }
});    

var SearchBox = React.createClass({
    getInitialState: function(){
        return {
        filterWord:''
        };
    },
    setName: function(filterWord){
    this.setState({filterWord:filterWord});
    },
    render: function(){
        return (
            <div>
                <SearchInput setName = {this.setName}/>
                <List filterWord = {this.state.filterWord} lists = {this.props.lists}/>
            </div>
        );
    }
});

var lists = ['Jack','Wason','Marray','Lucy','Jummy','Herry','Bob'];
ReactDOM.render(<SearchBox lists= {lists}/>,document.getElementById('container'));        

これは簡単な検索機能の実現で、上記のコードは直接にhtmlファイルに載せて実行できます.ここでは全部で3つのコンポーネントを定義しました.それぞれJSX JSX SearchInput 142 142 List 142 142 142 142 142 142で、ここでは一つのヒントが必要です.コンポーネント名の頭文字は大文字でなければなりません.SearchBoxはSearchInputのサブコンポーネントとして、私達がコンポーネントを作るのはListの方法です.SearchBoxを介して、コンポーネントを文書に追加します.
この中には2つの比較的特殊な値React.createClassとReactDOM.renderがあります.この2つの違いはthis.propsがロード後に変更されないことであり、this.stateは設定されていることによって対応する変化をもたらすことができます.
React APIthis.propsは、2つのオブジェクトthis.stateおよびReact APIを定義している.
Reactオブジェクト
React.ComponentReactは、ES 6文法で構成要素を定義して使用されるもので、以下の通りである.

class HelloMessage extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}

React.create ClassReactDOM方法も、オブジェクトのパラメータを定義するためのコンポーネントであり、このオブジェクトは、React.Component方法を備えなければならず、React.createClass方法は、要素、例えばrenderを返す.この要素には、任意のhtmlタグまたはReactコンポーネントが含まれてもよい.

var Component  = React.createClass({
    render:function(){
        return (
        
Hello World!!!
        );
    }
);

この方法に導入されたオブジェクトには、属性をカスタマイズすることができます.もちろん、いくつかの特殊な意味を持つ属性があります.

render:示されたいコンポーネント要素

を返す.

div:renderの初期値として返されます.

getInitialState:戻り値はthis.stateの値として、その優先度はコンポーネントを呼び出した時に直接設定された値より低い.

getDefaultProps:this.propsの値に対してデータタイプの検証を行います.一般的に開発デバッグとして使用されます.具体的なタイプは

をクリックしてください.

propTypes:この属性に導入された値はオブジェクトであり、このオブジェクトの属性または方法はコンポーネントに拡張され、多重化のために存在する意味がある.

this.props:この属性に導入された値はオブジェクトであり、このオブジェクトの属性または方法はコンポーネントクラス

に拡張される.

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

mixins:デバッグ開発時にコンソールで使用されるコンポーネント名.

statics:コンポーネントがロードされるときに、この方法をトリガする

displayName:コンポーネントローディングに成功したら、この方法をトリガする

componentWillMount:componentDidMount値が変化すると、この方法がトリガされるが、初期化コンポーネントの場合はトリガされない.

componentWillReceiveProps:this.propsまたはshouldComponentUpdateの値が変化したときにトリガされ、戻り値によって更新イベントがトリガされたかどうかを判定するが、初期化コンポーネントはトリガされない.

this.props:コンポーネントが更新される直前にこの方法をトリガする.

this.state:コンポーネントの更新が完了すると、この方法がトリガされます.

componentWillUpdate:コンポーネントがアンインストールされる直前にこの方法をトリガします.

React.creat Element
新しいReact要素を作成します.

React.createElement(string/ReactClass Type,[props],[childrens...]);

最初のパラメータは、作成された要素であり、componentDidUpdateタグであっても良いし、カスタムのReactコンポーネントであっても良い.第2のパラメータは、componentWillUnmountの初期値としてのオブジェクトである.第三及び後のパラメータはこの元素のサブ元素です.

ReactDOM.render(
    React.createElement("div", null, 
            React.createElement(SearchInput, {setName: this.setName}), 
            React.createElement(List, {filterWord: this.state.filterWord,                lists: this.props.lists})
        ),doucment.getElementById('container'));

React.cloneElement
React要素をコピーし、同時にhtmlとサブ要素を結合する.

React.cloneElement(ReactClass Type,[props],[childrens...]);

React.creat Factory
指定されたタイプのReactElementsを生成する関数を返します.
React.isValid Element
オブジェクトが有効なReact要素かどうかを判断します.

var ele = React.createElement('div');
React.isValidElement(ele);  // ture

React.DOM
React.DOM運用this.propsは、DOMコンポーネントに便利な包装を提供する.この方式はJSXを使用していない場合にのみ適用されます.例えば、propsは、ここでReact.createElement DOMコンポーネントを実装している.
React.PropTypes
このオブジェクトはコンポーネントのReact.DOM.div(null, 'Hello World!')の検証のために準備されています.

React.createClass({
    propTypes:{
        name:React.PropTypes.string,
        age:React.PropTypes.number
    }
    ...
});

ここでは、div が望ましい値タイプはthis.propsであり、this.props.nameの値タイプはStringである.
React.Children
このオブジェクトはthis.props.ageに対してデータ処理を行うことができます.

React.Children.map(object children, function fn [, object thisArg])

React.Children.forEach(object children, function fn [, object thisArg])

React.Children.count(object children)

React.Children.only(object children)

React.Children.toArray(object children)

ReactDOMオブジェクト
ReactDOM.renderNumberは、定義されたコンポーネントをDOM要素にレンダリングすることである.

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

ReactDOM.unmount ComponentAt Nodethis.props.childrenは、レンダリングされたReactコンポーネントをDOM要素から除去することである.

ReactDOM.unmountComponentAtNode(document.geElementById('container'));

ReactDOM.finddoMNode・
コンポーネントローディングが成功したらレンダリングされたDOM要素を返します.

DOMElement findDOMNode(ReactComponent component)