ReactJS-概要

ReactJSは、再利用可能なUIコンポーネントを構築するために使用されるJavaScriptライブラリです。 Reactの公式文書によると、以下が定義です-

Reactは、構成可能なユーザーインターフェイスを構築するためのライブラリです。時間とともに変化するデータを提示する再利用可能なUIコンポーネントの作成を促進します。多くの人がReactをMVCのVとして使用しています。 ReactはDOMを抽象化し、プログラミングモデルをシンプルにし、パフォーマンスを向上させます。 ReactはNodeを使用してサーバー上でレンダリングでき、React Nativeを使用してネイティブアプリを強化できます。 Reactは一方向のリアクティブデータフローを実装します。これにより、ボイラープレートが削減され、従来のデータバインディングよりも推論が容易になります。

Reactの機能

JSX -JSXはJavaScript構文の拡張機能です。 React開発でJSXを使用する必要はありませんが、推奨されます。
コンポーネント-Reactはコンポーネントに関するものです。すべてをコンポーネントとして考える必要があります。これは、大規模なプロジェクトで作業するときにコードを維持するのに役立ちます。
一方向のデータフローとフラックス-Reactは一方向のデータフローを実装するため、アプリについて簡単に推論できます。フラックスは、データを単方向に保つのに役立つパターンです。
ライセンス-ReactはFacebook Inc.の下でライセンスされていますドキュメントは、CC BY 4.0でライセンスされています。

反応の利点

JavaScriptオブジェクトである仮想DOMを使用します。 JavaScript仮想DOMは通常のDOMよりも高速であるため、これによりアプリのパフォーマンスが向上します。
他のフレームワークと同様に、クライアント側とサーバー側で使用できます。
コンポーネントとデータパターンは読みやすさを向上させ、より大きなアプリの維持に役立ちます。

反応制限

アプリのビューレイヤーのみを対象としているため、開発用の完全なツールセットを取得するには、他のテクノロジーを選択する必要があります。
インラインテンプレートとJSXを使用しますが、これは一部の開発者にとっては面倒に思えるかもしれません。

ReactJS-環境設定

この章では、React開発を成功させるための環境をセットアップする方法を示します。多くのステップが関係していることに注意してください。これは、後で開発プロセスをスピードアップするのに役立ちます。 NodeJS が必要になるため、インストールしていない場合は、次の表のリンクを確認してください。

Sr.No.	Software & Description
1	NodeJS and NPM NodeJSは、ReactJS開発に必要なプラットフォームです。リンク：/nodejs/nodejs_environment_setup [NodeJS Environment Setup]を確認してください。

NodeJSを正常にインストールしたら、npmを使用してReactのインストールを開始できます。 ReactJSは2つの方法でインストールできます

webpackとbabelを使用します。
create-react-app コマンドを使用します。

webpackとbabelを使用してReactJSをインストールする

*Webpack* はモジュールバンドラーです（独立したモジュールを管理およびロードします）。 依存モジュールを受け取り、それらを単一の（ファイル）バンドルにコンパイルします。 コマンドラインを使用してアプリを開発するか、webpack.configファイルを使用して構成することにより、このバンドルを使用できます。

BabelはJavaScriptコンパイラおよびトランスパイラーです。 1つのソースコードを別のソースコードに変換するために使用されます。これを使用すると、コード内で新しいES6機能を使用できるようになります。ここで、babelは、すべてのブラウザーで実行できる単純な古いES5に変換します。

手順1-ルートフォルダーの作成

mkdirコマンドを使用して、デスクトップに reactApp という名前のフォルダーを作成し、必要なすべてのファイルをインストールします。

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

モジュールを作成するには、 package.json ファイルを生成する必要があります。したがって、フォルダーを作成した後、 package.json ファイルを作成する必要があります。そのためには、コマンドプロンプトから npm init コマンドを実行する必要があります。

C:\Users\username\Desktop\reactApp>npm init

このコマンドは、パッケージ名、説明、作成者など、モジュールに関する情報を要求します。 -yオプションを使用してこれらをスキップできます。

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

ステップ2-Reactをインストールし、domを反応させる

主なタスクはReactJSをインストールすることであるため、npmの install react および react-dom コマンドを使用して、ReactJSとそのdomパッケージをインストールします。 -save *オプションを使用して、インストールするパッケージを *package.json ファイルに追加できます。

C:\Users\finddevguides\Desktop\reactApp>npm install react --save
C:\Users\finddevguides\Desktop\reactApp>npm install react-dom --save

または、次のように単一のコマンドでそれらすべてをインストールできます-

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

ステップ3-webpackをインストールする

webpackを使用してバンドラーインストールwebpack、webpack-dev-serverおよびwebpack-cliを生成しているため。

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

または、次のように単一のコマンドでそれらすべてをインストールできます-

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

ステップ4-babelのインストール

babelとそのプラグインbabel-core、babel-loader、babel-preset-env、babel-preset-react、およびhtml-webpack-pluginをインストールします

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

または、次のように単一のコマンドでそれらすべてをインストールできます-

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
   babel-preset-react html-webpack-plugin --save-dev

ステップ5-ファイルを作成する

インストールを完了するには、indexl、App.js、main.js、webpack.config.js、。 _ babelrc_ などの特定のファイルを作成する必要があります。これらのファイルは、手動で作成することも、*コマンドプロンプト*を使用して作成することもできます。

C:\Users\username\Desktop\reactApp>type nul > indexl
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

ステップ6-コンパイラ、サーバー、ローダーの設定

*webpack-config.js* ファイルを開き、次のコードを追加します。 webpackエントリポイントをmain.jsに設定しています。 出力パスは、バンドルされたアプリが提供される場所です。 また、開発サーバーを *8001* ポートに設定しています。 任意のポートを選択できます。

*webpack.config.js*

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test:/\.jsx?$/,
            exclude:/node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './indexl'
      })
   ]
}

*package.json* を開き、 *"test" "echo \" Error：no test specified \ "&& exit 1"* を *"scripts"* オブジェクト内で削除します。 このチュートリアルではテストを行わないため、この行を削除しています。 代わりに *start* および *build* コマンドを追加しましょう。

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

手順7-indexl

これは単なる通常のHTMLです。アプリのルート要素として div id = "app" を設定し、バンドルされたアプリファイルである index_bundle.js スクリプトを追加しています。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

ステップ8-App.jsxおよびmain.js

これが最初のReactコンポーネントです。 Reactコンポーネントについては、後続の章で詳しく説明します。このコンポーネントは Hello World をレンダリングします。

*App.js*

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

このコンポーネントをインポートし、ルート App 要素にレンダリングする必要があります。これにより、ブラウザで表示できるようになります。

*main.js*

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App/>, document.getElementById('app'));

注意-何かを使用したいときはいつでも、最初に*インポート*する必要があります。コンポーネントをアプリの他の部分で使用できるようにする場合は、作成後に export し、使用するファイルにインポートする必要があります。

*.babelrc* という名前のファイルを作成し、次のコンテンツをそのファイルにコピーします。

{
   "presets":["env", "react"]
}

ステップ9-サーバーの実行

セットアップが完了し、次のコマンドを実行してサーバーを起動できます。

C:\Users\username\Desktop\reactApp>npm start

ブラウザで開く必要があるポートが表示されます。この例では、 http：//localhost：8001/ です。開いた後、次の出力が表示されます。

サーバーの実行

ステップ10-バンドルの生成

最後に、バンドルを生成するには、コマンドプロンプトでbuildコマンドを実行する必要があります-

C:\Users\finddevguides\Desktop\reactApp>npm run build

これにより、以下に示すように、現在のフォルダーにバンドルが生成されます。

バンドルの生成

create-react-appコマンドを使用する

webpackとbabelを使用する代わりに、 create-react-app をインストールすることで、ReactJSをより簡単にインストールできます。

ステップ1-create-react-appのインストール

デスクトップを参照し、以下に示すようにコマンドプロンプトを使用してCreate React Appをインストールします-

C:\Users\finddevguides>cd C:\Users\finddevguides\Desktop\
C:\Users\finddevguides\Desktop>npx create-react-app my-app

これにより、デスクトップにmy-appという名前のフォルダーが作成され、そこに必要なすべてのファイルがインストールされます。

ステップ2-すべてのソースファイルを削除する

生成されたmy-appフォルダーのsrcフォルダーを参照し、以下に示すように、その中のすべてのファイルを削除します-

C:\Users\finddevguides\Desktop>cd my-app/src
C:\Users\finddevguides\Desktop\my-app\src>del *
C:\Users\finddevguides\Desktop\my-app\src\*, Are you sure (Y/N)? y

ステップ3-ファイルを追加する

srcフォルダーに index.css および index.js という名前のファイルを追加します-

C:\Users\finddevguides\Desktop\my-app\src>type nul > index.css
C:\Users\finddevguides\Desktop\my-app\src>type nul > index.js

index.jsファイルに次のコードを追加します

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ステップ4-プロジェクトを実行する

最後に、開始コマンドを使用してプロジェクトを実行します。

npm start

プロジェクトの実行

ReactJS-JSX

Reactは、通常のJavaScriptではなくJSXをテンプレート化に使用します。使用する必要はありませんが、それに付属するいくつかの長所を次に示します。

コードをJavaScriptにコンパイルしながら最適化を実行するため、高速です。
また、タイプセーフであり、コンパイル中にほとんどのエラーをキャッチできます。 *HTMLに精通していれば、テンプレートを簡単かつ迅速に作成できます。

JSXを使用する

JSXは、ほとんどの場合、通常のHTMLのように見えます。環境設定の章ですでに使用しました。* div を返す *App.jsx のコードを見てください。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

HTMLに似ていますが、JSXを使用する際に留意すべき点がいくつかあります。

ネストされた要素

さらに要素を返したい場合は、1つのコンテナ要素でラップする必要があります。 div を h1 、 h2 、および p 要素のラッパーとして使用していることに注目してください。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

React JSX Wrapper

属性

通常のHTMLプロパティと属性に加えて、独自のカスタム属性を使用できます。カスタム属性を追加する場合は、 data- プレフィックスを使用する必要があります。次の例では、 data-myattribute を p 要素の属性として追加しました。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

JavaScript式

JavaScript式はJSX内で使用できます。中括弧 \ {} で囲むだけです。次の例では、 2 をレンダリングします。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

React JSX Inline Javascript

JSX内で if else ステートメントを使用することはできませんが、代わりに* conditional（ternary）式を使用できます。次の例では、変数 *i は 1 に等しいため、ブラウザは true をレンダリングします。他の値に変更すると、 false をレンダリングします。

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

React JSX Ternary Expression

スタイリング

Reactは、インラインスタイルの使用を推奨しています。インラインスタイルを設定する場合は、 camelCase 構文を使用する必要があります。 Reactは、特定の要素の数値の後に px を自動的に追加します。次の例は、 myStyle インラインを h1 要素に追加する方法を示しています。

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

React JSXインラインスタイル

命名規則

HTMLタグは常に*小文字*タグ名を使用しますが、Reactコンポーネントは*大文字*で始まります。

注- class および for の代わりに、XML属性名として className および htmlFor を使用する必要があります。

これはReactの公式ページで次のように説明されています-

JSXはJavaScriptであるため、 class や for などの識別子はXML属性名として推奨されません。代わりに、React DOMコンポーネントは、それぞれ className や htmlFor などのDOMプロパティ名を想定しています。

ReactJS-コンポーネント

この章では、アプリケーションを保守しやすくするためにコンポーネントを組み合わせる方法を学びます。このアプローチにより、ページの残りの部分に影響を与えることなく、コンポーネントを更新および変更できます。

ステートレスの例

次の例の最初のコンポーネントは App です。このコンポーネントは、 Header および Content の所有者です。 Header と Content を別々に作成し、 App コンポーネントのJSXツリー内に追加するだけです。 App コンポーネントのみをエクスポートする必要があります。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

これをページでレンダリングできるようにするには、 main.js ファイルにインポートして、* reactDOM.render（）*を呼び出す必要があります。環境の設定中にすでにこれを行っています。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

上記のコードは次の結果を生成します。

React Component Stateless

ステートフルな例

この例では、所有者コンポーネント（ App ）の状態を設定します。 Header コンポーネントは、状態を必要としないため、最後の例のように追加されます。コンテンツタグの代わりに、 table および tbody 要素を作成します。ここで、 data 配列のすべてのオブジェクトに TableRow を動的に挿入します。

EcmaScript 2015の矢印構文（⇒）を使用していることがわかります。これは、古いJavaScript構文よりもずっときれいに見えます。これは、より少ないコード行で要素を作成するのに役立ちます。これは、多くのアイテムを含むリストを作成する必要がある場合に特に便利です。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data:
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i}
                     data = {person}/>)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

注意-map（）関数内で key = \ {i}を使用していることに注意してください。これにより、Reactは、何かが変更されたときにリスト全体を再レンダリングするのではなく、必要な要素のみを更新します。多数の動的に作成された要素のパフォーマンスが大幅に向上します。

React Component Statefull

ReactJS-状態

都道府県*は、データの出所です。常に状態をできるだけ単純にし、ステートフルコンポーネントの数を最小限に抑えるようにする必要があります。たとえば、状態からのデータを必要とする10個のコンポーネントがある場合、それらすべての状態を保持する1つのコンテナコンポーネントを作成する必要があります。

状態を使用する

次のサンプルコードは、EcmaScript2016構文を使用してステートフルコンポーネントを作成する方法を示しています。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

これにより、次の結果が生成されます。

React State Simple

ReactJS-小道具の概要

stateとpropsの主な違いは、 props が不変であることです。これが、コンテナコンポーネントが更新および変更可能な状態を定義する必要があるのに対し、子コンポーネントはpropsを使用して状態からのデータのみを渡す必要があるためです。

小道具の使用

コンポーネントに不変データが必要な場合は、 main.js の* reactDOM.render（）*関数に小道具を追加して、コンポーネント内で使用するだけです。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

これにより、次の結果が生成されます。

React Propsの例

デフォルトの小道具

また、* reactDom.render（）*要素に追加する代わりに、コンポーネントコンストラクターでデフォルトのプロパティ値を直接設定することもできます。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

出力は以前と同じです。

React Propsの例

状態と小道具

次の例は、アプリで state とpropsを組み合わせる方法を示しています。親コンポーネントに状態を設定し、 props を使用してコンポーネントツリーに渡します。 render 関数内で、子コンポーネントで使用される headerProp および contentProp を設定しています。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

結果は前の2つの例と同じになりますが、異なるのはデータのソースのみで、現在は元は state からのものです。更新する場合は、状態を更新するだけで、すべての子コンポーネントが更新されます。詳細については、イベントの章をご覧ください。

React Propsの例

ReactJS-小道具の検証

プロパティの検証は、コンポーネントの正しい使用を強制する便利な方法です。これは、アプリが大きくなると、開発中に将来のバグや問題を回避するのに役立ちます。また、各コンポーネントの使用方法を確認できるため、コードが読みやすくなります。

小道具の検証

この例では、必要なすべての props で App コンポーネントを作成しています。 App.propTypes は、小道具の検証に使用されます。一部のプロップが割り当てた正しいタイプを使用していない場合、コンソールの警告が表示されます。検証パターンを指定したら、 App.defaultProps を設定します。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",

   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

React Props検証の例

小道具は有効です

ReactJS-コンポーネントAPI

この章では、ReactコンポーネントAPIについて説明します。 setState（）、forceUpdate 、および* ReactDOM.findDOMNode（）の3つのメソッドについて説明します。新しいES6クラスでは、これを手動でバインドする必要があります。例では this.method.bind（this）*を使用します。

状態を設定

setState（）*メソッドは、コンポーネントの状態を更新するために使用されます。このメソッドは状態を置き換えませんが、元の状態に変更を追加するだけです。

import React from 'react';

class App extends React.Component {
   constructor() {
      super();

      this.state = {
         data: []
      }

      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
      myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

空の配列から始めました。ボタンをクリックするたびに、状態が更新されます。 5回クリックすると、次の出力が得られます。

React Component API Set State

アップデートさせる

コンポーネントを手動で更新したい場合があります。これは、* forceUpdate（）*メソッドを使用して実現できます。

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

ボタンがクリックされるたびに更新される乱数を設定しています。

React Component API Force Update

Domノードを検索

DOM操作には、* ReactDOM.findDOMNode（）メソッドを使用できます。最初に *react-dom をインポートする必要があります。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

ボタンをクリックすると、 myDiv 要素の色が緑に変わります。

React Component API Find Dom Node

注-0.14アップデート以降、古いコンポーネントAPIメソッドのほとんどは、ES6に対応するために非推奨または削除されました。

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

この章では、コンポーネントのライフサイクルメソッドについて説明します。

ライフサイクルメソッド

componentWillMount は、サーバー側とクライアント側の両方で、レンダリングの前に実行されます。
componentDidMount は、クライアント側でのみ最初のレンダリング後に実行されます。これは、AJAXリクエストとDOMまたは状態の更新が発生する場所です。このメソッドは、他のJavaScriptフレームワークとの統合、および setTimeout や setInterval などの遅延実行を伴う関数との統合にも使用されます。これを使用して状態を更新し、他のライフサイクルメソッドをトリガーできるようにします。
componentWillReceiveProps は、別のレンダリングが呼び出される前に小道具が更新されるとすぐに呼び出されます。状態を更新したときに、 setNewNumber からトリガーしました。
shouldComponentUpdate は true または false 値を返す必要があります。これにより、コンポーネントが更新されるかどうかが決まります。これはデフォルトで true に設定されています。 state または props が更新された後、コンポーネントをレンダリングする必要がないことが確実な場合、 false 値を返すことができます。
componentWillUpdate はレンダリングの直前に呼び出されます。
componentDidUpdate はレンダリング直後に呼び出されます。
componentWillUnmount は、コンポーネントがdomからマウント解除された後に呼び出されます。 main.js でコンポーネントのマウントを解除しています。

次の例では、コンストラクター関数に初期 state を設定します。 setNewnumber は、 state を更新するために使用されます。すべてのライフサイクルメソッドはContentコンポーネント内にあります。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

最初のレンダリングの後、次の画面が表示されます。

React Component Lifecycle Initial Screen

ReactJS-フォーム

この章では、Reactでフォームを使用する方法を学びます。

簡単な例

次の例では、 value = \ {this.state.data} を使用して入力フォームを設定します。これにより、入力値が変更されるたびに状態を更新できます。入力の変更を監視し、それに応じて状態を更新する onChange イベントを使用しています。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data}
               onChange = {this.updateState}/>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

入力テキスト値が変更されると、状態が更新されます。

React Forms Simple

複雑な例

次の例では、子コンポーネントからフォームを使用する方法を示します。 onChange メソッドは状態の更新をトリガーし、それが子入力 value に渡されて画面にレンダリングされます。同様の例がイベントの章で使用されています。子コンポーネントから状態を更新する必要があるときはいつでも、更新（ updateState ）をプロップ（ updateStateProp ）として処理する関数を渡す必要があります。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data}
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp}
               onChange = {this.props.updateStateProp}/>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

これにより、次の結果が生成されます。

React Forms Complex

ReactJS-イベント

この章では、イベントの使用方法を学びます。

簡単な例

これは、1つのコンポーネントのみを使用する単純な例です。ボタンがクリックされると updateState 関数をトリガーする onClick イベントを追加しています。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated...'})
   }
   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

これにより、次の結果が生成されます。

React Events Simple

子イベント

親コンポーネントの state をその子から更新する必要がある場合、親コンポーネントでイベントハンドラー（ updateState ）を作成し、それを子コンポーネントにprop（ updateStateProp ）として渡すことができます。それを呼ぶだけです。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data}
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

これにより、次の結果が生成されます。

React Events Child

ReactJS-参照

*ref* は、要素への参照を返すために使用されます。 ほとんどの場合、 *Refs* は避ける必要がありますが、DOM測定が必要な場合やコンポーネントにメソッドを追加する場合に役立ちます。

参照の使用

次の例は、refを使用して入力フィールドをクリアする方法を示しています。 ClearInput 関数は、 ref = "myInput" 値を持つ要素を検索し、状態をリセットし、ボタンがクリックされた後にフォーカスを追加します。

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: ''
      }
      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }
   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState}
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

ボタンがクリックされると、*入力*はクリアされ、フォーカスされます。

React Refsの例

ReactJS-キー

React keys は、動的に作成されたコンポーネントを使用する場合、またはユーザーがリストを変更する場合に役立ちます。 key 値を設定すると、変更後にコンポーネントが一意に識別されたままになります。

キーを使用する

一意のインデックス（i）を使用して Content 要素を動的に作成しましょう。 map 関数は、 data 配列から3つの要素を作成します。 key 値はすべての要素に対して一意である必要があるため、作成された各要素のキーとしてiを割り当てます。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();

      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

各要素のキー値について次の結果が得られます。

React Keys Example

将来いくつかの要素を追加または削除したり、動的に作成された要素の順序を変更した場合、Reactは key 値を使用して各要素を追跡します。

ReactJS-ルーター

この章では、アプリのルーティングを設定する方法を学びます。

ステップ1-React Routerをインストールする

*react-router* をインストールする簡単な方法は、*コマンドプロンプト*ウィンドウで次のコードスニペットを実行することです。

C:\Users\username\Desktop\reactApp>npm install react-router

ステップ2-コンポーネントの作成

このステップでは、4つのコンポーネントを作成します。 App コンポーネントはタブメニューとして使用されます。他の3つのコンポーネント*（Home）、（About）および（Contact）*は、ルートが変更されるとレンダリングされます。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

ステップ3-ルーターを追加する

次に、アプリにルートを追加します。前の例のように App 要素をレンダリングする代わりに、今回は Router がレンダリングされます。また、ルートごとにコンポーネントを設定します。

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home}/>
         <Route path = "home" component = {Home}/>
         <Route path = "about" component = {About}/>
         <Route path = "contact" component = {Contact}/>
      </Route>
   </Router>
), document.getElementById('app'))

アプリを起動すると、ルートを変更するために使用できる3つのクリック可能なリンクが表示されます。

クリック可能なリンク

ReactJS-フラックスの概念

*Flux* はプログラミングの概念で、データは*単方向*です。 このデータはアプリに入り、画面上にレンダリングされるまで一方向に流れます。

フラックス要素

以下は、 flux コンセプトの簡単な説明です。次の章では、これをアプリに実装する方法を学びます。

アクション-データフローをトリガーするためにアクションがディスパッチャに送信されます。
Dispatcher -これはアプリの中心的なハブです。すべてのデータがディスパッチされ、ストアに送信されます。
ストア-ストアは、アプリケーションの状態とロジックが保持される場所です。すべてのストアは特定の状態を維持しており、必要に応じて更新されます。
View - view はストアからデータを受け取り、アプリを再レンダリングします。

データフローを次の図に示します。

React Flux Concept Image

フラックスプロ

単一方向のデータフローは理解しやすいです。
アプリのメンテナンスは簡単です。
アプリのパーツは分離されています。

ReactJS-フラックスの使用

この章では、Reactアプリケーションにフラックスパターンを実装する方法を学びます。 Redux フレームワークを使用します。この章の目標は、 Redux と React の接続に必要なすべてのピースの最も単純な例を提示することです。

手順1-Reduxのインストール

Reduxを*コマンドプロンプト*ウィンドウからインストールします。

C:\Users\username\Desktop\reactApp>npm install --save react-redux

ステップ2-ファイルとフォルダーの作成

このステップでは、アクション、リデューサー、および*コンポーネント*用のフォルダーとファイルを作成します。作業が完了すると、これがフォルダ構造の外観になります。

C:\Users\finddevguides\Desktop\reactApp>mkdir actions
C:\Users\finddevguides\Desktop\reactApp>mkdir components
C:\Users\finddevguides\Desktop\reactApp>mkdir reducers
C:\Users\finddevguides\Desktop\reactApp>type nul > actions/actions.js
C:\Users\finddevguides\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\finddevguides\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\finddevguides\Desktop\reactApp>type nul > components/Todo.js
C:\Users\finddevguides\Desktop\reactApp>type nul > components/TodoList.js

React Reduxフォルダー構造

ステップ3-アクション

アクションは、 type プロパティを使用してストアに送信するデータについて通知するJavaScriptオブジェクトです。リストに新しいアイテムを追加するために使用される ADD_TODO アクションを定義しています。 addTodo 関数は、アクションを返し、作成されたすべてのアイテムに id を設定するアクション作成者です。

actions/actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {
   return {
      type: ADD_TODO,
      id: nextTodoId++,
      text
   };
}

ステップ4-レデューサー

アクションはアプリの変更のみをトリガーしますが、リデューサー*はそれらの変更を指定します。 *switch ステートメントを使用して、 ADD_TODO アクションを検索しています。レデューサーは、更新された状態を計算して返すために2つのパラメーター（ state および action ）を受け取る関数です。

最初の関数は新しいアイテムを作成するために使用され、2番目の関数はそのアイテムをリストにプッシュします。最後に向けて、 combineReducers ヘルパー関数を使用して、将来使用する可能性のある新しいレデューサーを追加できます。

reducers/reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'

function todo(state, action) {
   switch (action.type) {
      case ADD_TODO:
         return {
            id: action.id,
            text: action.text,
         }
      default:
         return state
   }
}
function todos(state = [], action) {
   switch (action.type) {
      case ADD_TODO:
         return [
            ...state,
            todo(undefined, action)
         ]
      default:
         return state
   }
}
const todoApp = combineReducers({
   todos
})
export default todoApp

ステップ5-保管

ストアは、アプリの状態を保持する場所です。レデューサーがあれば、ストアを作成するのは非常に簡単です。ルートコンポーネントをラップする provider 要素にstoreプロパティを渡します。

main.js

import React from 'react'

import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import App from './App.jsx'
import todoApp from './reducers/reducers'

let store = createStore(todoApp)
let rootElement = document.getElementById('app')

render(
   <Provider store = {store}>
      <App/>
   </Provider>,

   rootElement
)

ステップ6-ルートコンポーネント

*App* コンポーネントは、アプリのルートコンポーネントです。 ルートコンポーネントのみがreduxを認識する必要があります。 注目すべき重要な部分は、ルートコンポーネント *App* を *store* に接続するために使用される *connect* 関数です。

この関数は、引数として select 関数を取ります。 Select関数は、ストアから状態を取得し、コンポーネントで使用できる小道具（ visibleTodos ）を返します。

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

class App extends Component {
   render() {
      const { dispatch, visibleTodos } = this.props

      return (
         <div>
            <AddTodo onAddClick = {text =>dispatch(addTodo(text))}/>
            <TodoList todos = {visibleTodos}/>
         </div>
      )
   }
}
function select(state) {
   return {
      visibleTodos: state.todos
   }
}
export default connect(select)(App);

ステップ7-その他のコンポーネント

これらのコンポーネントは、reduxを認識すべきではありません。

components/AddTodo.js

import React, { Component, PropTypes } from 'react'

export default class AddTodo extends Component {
   render() {
      return (
         <div>
            <input type = 'text' ref = 'input'/>

            <button onClick = {(e) => this.handleClick(e)}>
               Add
            </button>
         </div>
      )
   }
   handleClick(e) {
      const node = this.refs.input
      const text = node.value.trim()
      this.props.onAddClick(text)
      node.value = ''
   }
}

components/Todo.js

import React, { Component, PropTypes } from 'react'

export default class Todo extends Component {
   render() {
      return (
         <li>
            {this.props.text}
         </li>
      )
   }
}

components/TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'

export default class TodoList extends Component {
   render() {
      return (
         <ul>
            {this.props.todos.map(todo =>
               <Todo
                  key = {todo.id}
                  {...todo}
              />
            )}
         </ul>
      )
   }
}

アプリを起動すると、リストにアイテムを追加できるようになります。

React Reduxの例

ReactJS-アニメーション

この章では、Reactを使用して要素をアニメーション化する方法を学びます。

ステップ1-React CSS Transitionsグループのインストール

これは、基本的なCSSトランジションとアニメーションを作成するために使用されるReactアドオンです。 *コマンドプロンプト*ウィンドウからインストールします-

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

ステップ2-CSSファイルを追加する

新しいファイルstyle.cssを作成しましょう。

C:\Users\finddevguides\Desktop\reactApp>type nul > css/style.css

アプリで使用できるようにするには、indexlのhead要素にリンクする必要があります。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <link rel = "stylesheet" type = "text/css" href = "./style.css">
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

ステップ3-アニメーションの表示

基本的なReactコンポーネントを作成します。 ReactCSSTransitionGroup 要素は、アニメーション化するコンポーネントのラッパーとして使用されます。 transitionEnter と transitionLeave はfalseですが、 transitionAppear と transitionAppearTimeout を使用します。

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   render() {
      return (
         <div>
            <ReactCSSTransitionGroup transitionName = "example"
               transitionAppear = {true} transitionAppearTimeout = {500}
               transitionEnter = {false} transitionLeave = {false}>

               <h1>My Element...</h1>
            </ReactCSSTransitionGroup>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

CSSアニメーションは非常に単純です。

css/style.css

.example-appear {
   opacity: 0.04;
}
.example-appear.example-appear-active {
   opacity: 2;
   transition: opacity 50s ease-in;
}

アプリを起動すると、要素はフェードインします。

React Animations Appear

ステップ4-アニメーションの開始と終了

アニメーションの開始と終了は、リストに要素を追加または削除するときに使用できます。

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
      }
      this.handleAdd = this.handleAdd.bind(this);
   };
   handleAdd() {
      var newItems = this.state.items.concat([prompt('Create New Item')]);
      this.setState({items: newItems});
   }
   handleRemove(i) {
      var newItems = this.state.items.slice();
      newItems.splice(i, 1);
      this.setState({items: newItems});
   }
   render() {
      var items = this.state.items.map(function(item, i) {
         return (
            <div key = {item} onClick = {this.handleRemove.bind(this, i)}>
               {item}
            </div>
         );
      }.bind(this));

      return (
         <div>
            <button onClick = {this.handleAdd}>Add Item</button>

            <ReactCSSTransitionGroup transitionName = "example"
               transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
               {items}
            </ReactCSSTransitionGroup>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

css/style.css

.example-enter {
   opacity: 0.04;
}
.example-enter.example-enter-active {
   opacity: 5;
   transition: opacity 50s ease-in;
}
.example-leave {
   opacity: 1;
}
.example-leave.example-leave-active {
   opacity: 0.04;
   transition: opacity 50s ease-in;
}

アプリを起動し、 Add Item ボタンをクリックすると、プロンプトが表示されます。

React Animations Prompt

名前を入力して[OK]を押すと、新しい要素がフェードインします。

React Animations Enter

これで、一部のアイテム（ Item 3 … ）をクリックして削除できます。このアイテムはリストからフェードアウトします。

React Animations Leave

ReactJS-高次コンポーネント

高次コンポーネントは、既存のコンポーネントに機能を追加するために使用されるJavaScript関数です。これらの関数は*純粋*です。つまり、データを受信し、そのデータに従って値を返します。データが変更されると、異なるデータ入力で高次関数が再実行されます。返されるコンポーネントを更新する場合、HOCを変更する必要はありません。必要なのは、関数が使用しているデータを変更することだけです。

高次コンポーネント（HOC）は、「通常の」コンポーネントをラップし、追加のデータ入力を提供します。実際には、1つのコンポーネントを取り、元のコンポーネントをラップする別のコンポーネントを返す関数です。

この概念がどのように機能するかを簡単に理解するために、簡単な例を見てみましょう。 MyHOC は、 MyComponent にデータを渡すためにのみ使用される高次関数です。この関数は MyComponent を受け取り、 newData で拡張し、画面にレンダリングされる拡張コンポーネントを返します。

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state}/>;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

アプリを実行すると、データが MyComponent に渡されることがわかります。

React HOC Output

注-高次コンポーネントは、さまざまな機能に使用できます。これらの純粋な関数は、関数型プログラミングの本質です。慣れると、アプリのメンテナンスやアップグレードが簡単になっていることに気付くでしょう。

ReactJS-ベストプラクティス

この章では、アプリの開発中に一貫性を保つのに役立つReactのベストプラクティス、方法、およびテクニックをリストします。

状態-状態は可能な限り避ける必要があります。状態を一元化し、小道具としてコンポーネントツリーに渡すことをお勧めします。同じデータを必要とするコンポーネントのグループがあるときはいつでも、状態を保持するコンテナ要素をその周りに設定する必要があります。フラックスパターンは、Reactアプリで状態を処理する良い方法です。
PropTypes -PropTypesは常に定義する必要があります。これは、アプリ内のすべての小道具を追跡するのに役立ち、同じプロジェクトで作業している開発者にも役立ちます。
Render -アプリのロジックのほとんどは、renderメソッド内に移動する必要があります。コンポーネントのライフサイクルメソッドのロジックを最小化し、そのロジックをrenderメソッドで移動するようにしてください。使用するステートとプロップが少なければ少ないほど、コードはきれいになります。常に状態を可能な限りシンプルにする必要があります。状態または小道具から何かを計算する必要がある場合、renderメソッド内でそれを行うことができます。
構成-Reactチームは、単一の責任原則を使用することを提案しています。これは、1つのコンポーネントが1つの機能のみを担当することを意味します。一部のコンポーネントに複数の機能がある場合、すべての機能に対して新しいコンポーネントをリファクタリングして作成する必要があります。
高次コンポーネント（HOC）-以前のReactバージョンは、再利用可能な機能を処理するためのミックスインを提供していました。ミックスインは現在廃止されているため、解決策の1つはHOCを使用することです。

Reactjs-quick-guide

ReactJS-概要

Reactの機能

反応の利点

反応制限

ReactJS-環境設定

webpackとbabelを使用してReactJSをインストールする

手順1-ルートフォルダーの作成

ステップ2-Reactをインストールし、domを反応させる

ステップ3-webpackをインストールする

ステップ4-babelのインストール

ステップ5-ファイルを作成する

ステップ6-コンパイラ、サーバー、ローダーの設定

手順7-indexl

ステップ8-App.jsxおよびmain.js

ステップ9-サーバーの実行

ステップ10-バンドルの生成

create-react-appコマンドを使用する

ステップ1-create-react-appのインストール

ステップ2-すべてのソースファイルを削除する

ステップ3-ファイルを追加する

ステップ4-プロジェクトを実行する

ReactJS-JSX

JSXを使用する

App.jsx

ネストされた要素

App.jsx

属性

JavaScript式

スタイリング

コメント

命名規則

ReactJS-コンポーネント

ステートレスの例

App.jsx

main.js

ステートフルな例

App.jsx

main.js

ReactJS-状態

状態を使用する

App.jsx

main.js

ReactJS-小道具の概要

小道具の使用

App.jsx

main.js

デフォルトの小道具

App.jsx

main.js

状態と小道具

App.jsx

main.js

ReactJS-小道具の検証

小道具の検証

App.jsx

main.js

ReactJS-コンポーネントAPI

状態を設定

アップデートさせる

Domノードを検索

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

ライフサイクルメソッド

App.jsx

main.js

ReactJS-フォーム

簡単な例

App.jsx

main.js

複雑な例

App.jsx

main.js

ReactJS-イベント

簡単な例

App.jsx

main.js

子イベント

App.jsx

main.js

ReactJS-参照