スターターキットを使用して並行してコードを記述することも、そのまま読み続けることもできます。
コンセプトの
Reactには小さなAPIがあり、使い方を学ぶのは簡単です。 ただし、最初にいくつかの概念を見てみましょう。
要素は、HTML要素を表すJavaScriptオブジェクトです。 ブラウザには存在しません。 h1、div、sectionなどのDOM要素を記述します。
コンポーネントは、開発者が作成したReact要素です。 通常、これらは構造と機能を含むユーザーインターフェイスの一部です。 たとえば、NavBar、LikeButton、ImageUploaderなど。
JSXは、Reactの要素とコンポーネントを作成するための手法です。 たとえば、これはJSXで記述されたReact要素です。
<h1>Hello</h1>
同じ要素をJavaScriptで記述できます。
React.DOM.h1(null, 'Hello');
JSXを使用すると、必要な労力ははるかに少なくなり、ブラウザで実行する前にJavaScriptに変換されます。
仮想DOMはJavaScript React要素のツリーです。 Reactは、ブラウザーで仮想DOMをレンダリングして、インターフェースを表示します。 Reactは仮想DOMの変更を監視し、仮想DOMに一致するようにブラウザーのDOMを自動的に変更します。
これらの概念を理解すれば、Reactを引き続き使用できます。 一連のユーザーインターフェイスを作成します。各ユーザーインターフェイスは、前のインターフェイスに機能のレイヤーを追加します。 例として、Instagramのような写真テープを作成します。
レンダリング
最初に発生するのは、仮想要素(要素、またはReactコンポーネント)のレンダリングです。 仮想要素はJavaScriptメモリにのみ含まれていますが、覚えておいてください。 ブラウザでレンダリングするようにReactに明示的に指示する必要があります。
React.render(<img src='http:tinyurl.comlkevsb9' />, document.body);
render関数は、仮想要素と実際のDOMノードの2つの引数を取ります。 Reactは仮想要素を取得し、指定されたノードに追加します。 これで、画像をブラウザで見ることができます。
コンポーネント
コンポーネントは、Reactの魂と心です。 これらはカスタム要素です。 通常、それらには独自の構造と機能があります。
var Photo = React.createClass({ render: function() { return <img src='http:tinyurl.comlkevsb9' /> } }); React.render(<Photo />, document.body);
createClass関数は、 render関数を実装するオブジェクトを受け取ります。
Photoコンポーネントが作成され、ドキュメントの本文にレンダリングされます。
このコンポーネントは前の例の行に過ぎませんが、機能を追加できるようになりました。
物性
プロパティはコンポーネントオプションとして理解できます。 これらはコンポーネント引数として提供され、HTML属性のように見えます。
var Photo = React.createClass({ render: function() { return ( <div className='photo' /> <img src={this.props.src}> <span>{this.props.caption}</span> </div> ) } }); React.render(<Photo imageURL='http:tinyurl.comlkevsb9' caption='New York!' />, document.body);
レンダリング関数では、 PhotoコンポーネントにimageURLとcaptionという 2つのプロパティが渡されます。
カスタムレンダリング関数内では、 imageURLプロパティが画像のsrcとして使用されます。 captionプロパティは、span要素のテキストとして使用されます。
コンポーネントのプロパティは不変であることに注意してください。 コンポーネントに変更可能なプロパティがある場合は、状態を使用します。
状態
状態は、コンポーネント内の特別なオブジェクトです。 時間とともに変化する可能性のあるデータを保存します。
var Photo = React.createClass({ toggleLiked: function() { this.setState({ liked: !this.state.liked }); }, getInitialState: function() { return { liked: false } }, render: function() { var buttonClass = this.state.liked ? 'active' : ''; return ( <div className='photo'> <img src={this.props.src} /> <div className='bar'> <button onClick={this.toggleLiked} className={buttonClass} /> </button> <span>{this.props.caption}</span> </div> </div> ) } }); React.render(<Photo src='http:tinyurl.comlkevsb9' caption='New York!' />, document.body);
オブジェクトの状態が存在すると、少し複雑になります。
コンポーネントには、新しい関数getInitialStateがあります。 Reactは、コンポーネントが初期化された後に呼び出します。 初期状態を設定します(関数の名前を意味します)。
コンポーネントには、 toggleLiked関数もあります。 彼女は、 setState関数を使用して、 いいねされた状態を切り替えます。
レンダリング関数内で、 buttonClass変数は「いいね」の状態に応じて「アクティブ」または空の文字列に設定されます。
buttonClassは 、要素のボタンクラスとして使用されます。 ボタンには、 toggleLiked関数を呼び出すonClickイベントハンドラもあります。
コンポーネントがレンダリングされた後は次のようになります。
-ボタンをクリックすると、 toggleLikedが呼び出されます
-いいね状態が変更されます
-Reactは、仮想DOMでコンポーネントを再描画します
-新しい仮想DOMは前のものと比較されます
-Reactは変更を分離し、ブラウザーDOMで更新します
この場合、Reactはボタンクラス名を変更します。
構成
合成とは、小さなコンポーネントを組み合わせて大きなコンポーネントを形成することです。 たとえば、 PhotoコンポーネントはPhotoGalleryコンポーネント内で使用できます。 ほぼこの方法で:
var Photo = React.createClass({ toggleLiked: function() { this.setState({ liked: !this.state.liked }); }, getInitialState: function() { return { liked: false } }, render: function() { var buttonClass = this.state.liked ? 'active' : ''; return ( <div className='photo'> <img src={this.props.src} /> <div className='bar'> <button onClick={this.toggleLiked} className={buttonClass}> </button> <span>{this.props.caption}</span> </div> </div> ) } }); var PhotoGallery = React.createClass({ getDataFromServer: function() { return [{ url: 'http:tinyurl.comlkevsb9', caption: 'New York!' }, { url: 'http:tinyurl.commxkwh56', caption: 'Cows' }, { url: 'http:tinyurl.comnc7jv28', caption: 'Scooters' }]; }, render: function() { var data = this.getDataFromServer(); var photos = data.map(function(photo) { return <Photo src={photo.url} caption={photo.caption} /> }); return ( <div className='photo-gallery'> {photos} </div> ) } }); React.render(<PhotoGallery />, document.body);
写真コンポーネントは、以前とまったく同じままでした。
Photoコンポーネントを生成する新しいPhotoGalleryコンポーネントが登場しました。 この例では、URLとヘッダーを持つ3つのオブジェクトの配列を返す偽サーバーデータを使用します。
ループでは、3つのPhotoコンポーネントが作成され、 レンダリング関数の戻り値に代入されます。
おわりに
これで、Reactを使用してユーザーインターフェイスの構築を開始できます。 より詳細な説明はドキュメントにあり、読むことを強くお勧めします。
マニュアルには、ローカル環境のセットアップに関する詳細も欠けていました。 ドキュメントから調べるか、 ボイラープレートを使用できます。
元の記事: Reactクイックスタートガイド