夏にはそりを、冬にはカートを準備します
完成したアプリケーションが戦闘サーバーでどのように機能するかについて考える人はほとんどいません。 通常、これらの問題は、コードがすでに記述されている最後の時点で解決され、後戻りはできません。 それが、ライブラリ自体の学習を開始する前に、将来の作成のコードをコンパイルする問題を決定する理由です。 2つのオプションがあります。 学習、またはサイトのデモには、クライアント側のコンパイルオプションが適しています。 何もする必要はありません。ブラウザは、いわば、その場ですべてを行います。 しかし、完成品については、サーバー側でコンパイルを構成することをお勧めします。 このためのツールの利点はたくさんあります。 ここであなたとバベル 、そしてNodeJSまたはWebpack 。
子供の頃、どこに行ったのか
さて、コンパイルの問題は整理されています。 研究に移りましょうか？ いいえ、早すぎます。 Reactは、アプリケーションを構築するためのモジュラーアプローチを実装しています。 これはどういう意味ですか？ コンストラクターを想像してください。 クラス内のコンストラクターではなく、単純な子のコンストラクター。 子供時代に小さなブロックから傑作を構築したのと同じ方法で、Reactコンポーネントからアプリケーションを構築します。 あなた自身もコンポーネントを作成するので、この方法でプレイすることはさらに興味深いです。 モジュラーアプローチの利点は、このようなコンポーネントを一度作成してテストすることで、他のアプリケーションで簡単に使用できることです。 したがって、あなたへの私のアドバイス：それらのそれぞれに別々のファイルを作成し、そしてあなたが望む場所に接続するだけです。 すべてが単純に思えますが、そうではありません。 コンポーネントが相互に「通信」しない場合、アプリケーションは空になり、死んでしまいます。 そして、これはまさに最も困難で興味深いものです。
さて、仕事させてください！
あなたの学習意欲は私たちの目の前で溶けているようです。 したがって、ドキュメントを開き、言葉から行為に移行します。 研究に必要なものはすべて、図書館の公式ウェブサイトにあります。 真の情報の構造は不十分です。 この混乱の中で迷子にならないようにすることは、この記事の主なタスクです。
既に理解したように、Reactでアプリケーションを開発する際の主なタスクは、ページをブロックに分割し、それぞれの機能を実装するコンポーネントを作成することです。
開始するには、コンポーネントの「静的」バージョンを作成します。 JSXに注意することを強くお勧めします。
var LoginForm = React.createClass({ render: function() { return ( <form id="login-form"> <input type="text" id="login" placeholder="login" /> <input type="password" id="password" placeholder="password" /> <button type="submit">Login</button> </form> ) } }); React.render( <LoginForm />, document.getElementById('example'));
JSX構文の利点を評価しますか？ 次に進みます。 「インタラクティブ性」を追加します。 このコンポーネント内のデータが変更されると、コンポーネントのインターフェースが自動的に再描画されます。 これらには以下が含まれます。
- 状態 -特定の時点でのコンポーネントの状態を反映するデータのセット。
- 小道具（プロパティ） -属性を介してコンポーネントに送信されるデータ。
したがって、ユーザーのアクションに応じて状態またはプロパティが通常どおり変更されることになります。
var LoginForm = React.createClass({ getInitialState: function(){ /* */ return { errorCode: 0, errorMessage: '', loginActions: [] }; }, doLogin: function(event) { event.preventDefault(); var successLogin = (Math.random() >= 0.5) ? true : false; var actions = this.state.loginActions; if (!successLogin) { actions.push('Login failure'); /* */ this.setState({errorCode: 1, errorMessage: 'Error while login.', loginActions: actions}); } else { actions.push('Login success'); this.setState({errorCode: 0, errorMessage: '', loginActions: actions}); } }, render: function() { /* */ var errorMessage = (this.state.errorCode > 0) ? this.state.errorMessage : ''; var errorStyle = (this.state.errorCode > 0) ? {display: 'block'} : {display: 'none'}; return ( <div> <form id="login-form"> <div> <input type="text" id="login" placeholder="login" /> <input type="password" id="password" placeholder="password" /> </div> <div> <button type="submit" onClick={this.doLogin}>Login</button> </div> <div style={errorStyle}> <span style={{color: '#d9534f'}}> {errorMessage}</span> </div> </form> <div className="actions-list"> /* actions */ <ActionsList actions={this.state.loginActions} /> </div> </div> ) } }); var ActionsList = React.createClass({ render: function() { /* , this.props */ return ( <ol> { this.props.actions.map(function(action) { return <li>{action}</li>; }) } </ol> ) } }); React.render( <LoginForm />, document.getElementById('example'));
既に理解したように、Reactは他のライブラリとは大きく異なります。 したがって、 フォームの要素を操作する際にも、頭にかなりの量の白髪を追加できる特性があるという事実には驚くべきことはありません。 フォーム要素は2つのタイプに分けられます。
- 非制御-valueプロパティが設定されていない要素。
- 制御-valueプロパティが設定される要素。
入力要素の初期値を設定して、何かを入力してみましょう。
<input type="text" id="login" placeholder="login" value=”admin” /> <input type="password" id="password" placeholder="password" value=”admpass” />
ご覧のとおり、成功しませんでした。 Reactはこれらの要素を「制御」し、独自の変更ハンドラーを作成する必要があります。 制御された要素ごとにハンドラー関数を作成するのがどれだけの作業か想像してみてください。 ママは泣かないで！ しかし、Facebookの優れた叔父たちは私たちを困らせず、Reactでミックスインを使用する機能を追加しました。 はい、いくつかの良い追加（アドオン）が追加されました 。
var LoginForm = React.createClass({ /* */ mixins: [React.addons.LinkedStateMixin], getInitialState: function(){ return { errorCode: 0, errorMessage: '', loginActions: [], defaultLogin: 'admin', defaultPassword: 'password' }; }, doLogin: function(event) { event.preventDefault(); var successLogin = (Math.random() >= 0.5) ? true : false; var actions = this.state.loginActions; if (!successLogin) { actions.push('Login failure'); this.setState({errorCode: 1, errorMessage: 'Error while login.', loginActions: actions}); } else { actions.push('Login success'); this.setState({errorCode: 0, errorMessage: '', loginActions: actions}); } }, render: function() { var errorMessage = (this.state.errorCode > 0) ? this.state.errorMessage : ''; var errorStyle = (this.state.errorCode > 0) ? {display: 'block'} : {display: 'none'}; return ( <div> <form id="login-form"> <div> /* valueLink */ <input type="text" ref="login" placeholder="login" valueLink={this.linkState('defaultLogin')} /> <input type="password" ref="password" placeholder="password" valueLink={this.linkState('defaultPassword')} /> </div> <div> <button type="submit" onClick={this.doLogin}>Login</button> </div> <div style={errorStyle}> <span style={{color: '#d9534f'}}> {errorMessage}</span> </div> </form> <div className="actions-list"> <ActionsList actions={this.state.loginActions} /> </div> </div> ) } }); var ActionsList = React.createClass({ render: function() { return ( <ol> { this.props.actions.map(function(action) { return <li>{action}</li>; }) } </ol> ) } }); React.render( <LoginForm />, document.getElementById('example'));
「サプライズ」はもうないと思うなら、あなたは非常に間違っています。 問題は次のとおりです。コンポーネント間の双方向のデータ交換を整理する方法は？ 結局のところ、プロパティは一方向にのみ送信されます-父から子孫へ。 そしてその逆？ 子孫は親のデータにどのように影響しますか？ 非常にシンプル：
var LoginForm = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function(){ /* , , , loginActions */ return { errorCode: 0, errorMessage: '', loginActions: [], defaultLogin: 'admin', defaultPassword: 'password' }; }, clearActionList: function() { /* , loginActions */ this.setState({loginActions: []}); }, doLogin: function(event) { event.preventDefault(); var successLogin = (Math.random() >= 0.5) ? true : false; var actions = this.state.loginActions; if (!successLogin) { actions.push('Login failure'); this.setState({errorCode: 1, errorMessage: 'Error while login.', loginActions: actions}); } else { actions.push('Login success'); this.setState({errorCode: 0, errorMessage: '', loginActions: actions}); } }, render: function() { var errorMessage = (this.state.errorCode > 0) ? this.state.errorMessage : ''; var errorStyle = (this.state.errorCode > 0) ? {display: 'block'} : {display: 'none'}; return ( <div> <form id="login-form"> <div> <input type="text" ref="login" placeholder="login" valueLink={this.linkState('defaultLogin')} /> <input type="password" ref="password" placeholder="password" valueLink={this.linkState('defaultPassword')} /> </div> <div> <button type="submit" onClick={this.doLogin}>Login</button> </div> <div style={errorStyle}> <span style={{color: '#d9534f'}}> {errorMessage}</span> </div> </form> <div className="actions-list"> /* , , */ <ActionsList actions={this.state.loginActions} clearActions={this.clearActionList} /> </div> </div> ) } }); var ActionsList = React.createClass({ render: function() { return ( <div> /* , - this.props.clearActions */ <button onClick={this.props.clearActions}> Clear list </button> <ol> { this.props.actions.map(function(action) { return <li>{action}</li>; }) } </ol> </div> ) } }); React.render( <LoginForm />, document.getElementById('example'));
原因時間、楽しい時間！
よくここに。 今本当にすべて。 最初の段階は完了しました。新しく作られた原子炉の仲間入りをさせていただきます。 ReactJSに時間をかける価値があるかどうか-誰もが自分で決定します。 半分しか通りませんでした。 一部の人にとって、この道は誰かにとって簡単でした-それほどではありませんでした。 誰かが停止する間、誰かがさらに先に進みます。 そして、私の記事が初心者にとって良い助けになることを本当に願っています。