React JSクイックスタートガイド

この記事では、React JSを使用してインターフェースを構築する方法の概要を説明します。

スターターキットを使用して並行してコードを記述することも、そのまま読み続けることもできます。

コンセプトの

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クイックスタートガイド