反応のインストール


React はダウンロードして直接使用することができ、ダウンロード パッケージには多くの学習サンプルも含まれています。

このチュートリアルでは React バージョン 0.14.7 を使用します。最新バージョンは公式 Web サイト http://facebook.github.io/react/ からダウンロードできます。

PHP 中国語 Web サイトの React CDN ライブラリを直接使用することもできます。アドレスは次のとおりです: 

<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>

使用例

次の例は、Hello, world!

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

を出力します。 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

分析例:

この例では、react.min.js、react-dom.min.js、browser.min.js の 3 つのライブラリを導入しました。

  • react.min.js - React Theコアライブラリ

  • react-dom.min.js - DOM 関連の関数を提供します

  • browser.min.js - JSX 構文を JavaScript 構文に変換するために使用されます 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

上記のコードは以下を挿入しますh1 タイトルを id="example" ノードに追加します。

注:

JSX を使用する必要がある場合は、<script> タグの type 属性を text/babel に設定する必要があります。

npm 経由で React を使用する

システムが Node.js と NPM をまだサポートしていない場合は、Node.js チュートリアルを参照してください。

React では、browserify や webpack などの CommonJS モジュール システムを使用することをお勧めします。このチュートリアルでは webpack を使用します。

最初のステップ、グローバル パッケージをインストールします 

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

2 番目のステップ、ルート ディレクトリを作成します

ディレクトリ名をもつルート ディレクトリを作成します:reactApp、npm init を使用して初期化して package.json ファイルを生成します: 

$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) php-react-test
version: (1.0.0) 
description: php中文网 react 测试
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/tianqixin/www/reactApp/package.json:

{
  "name": "php-react-test",
  "version": "1.0.0",
  "description": "php中文网 react 测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

3 番目のステップ、依存パッケージとプラグインを追加します

React を使用したいため、最初に --save コマンドを使用してパッケージを package.json ファイルに追加します。 

$ npm install react --save
$ npm install react-dom --save

同時に、いくつかの babel プラグインをインストールする必要もあります

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

ステップ 4. ファイルを作成します

次に必要なファイルをいくつか作成します:

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

ステップ 5. コンパイラー、サーバー、ローダーをセットアップする

webpack.config.js ファイルを開き、次のコードを追加します: 

 var config = {
   entry: './main.js',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 7777
   },
	
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
			
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	
}

module.exports = config;

  • entry: パッケージ化エントリ ファイル main.js を指定します。

  • 出力: パッケージ化結果を構成します。パスは出力フォルダーを定義し、ファイル名はパッケージ化結果ファイルの名前を定義します。

  • devServer: サーバーのポート番号を7777に設定します。ポートの後に自分で設定できます。

  • module: は、モジュールの処理ロジックを定義します。ここでは、ローダーを使用して一連のローダーといくつかの通常のルールを定義できます。ロードされるファイルがテストの通常のパターンに一致すると、後続のローダーが呼び出されてファイルを処理します。これが webpack が強力な理由です。

ここで、package.jsonファイルを開き、"scripts"内の"test" "echo "Error: no test specific" && exit 1"を見つけて、次のコードに置き換えます: 

"start": "webpack-dev-server --hot"

package.json ファイルの内容は次のとおりです: 

$ cat package.json 
{
  "name": "php-react-test",
  "version": "1.0.0",
  "description": "php中文网 react 测试",
  "main": "index.js",
  "scripts": {
	"start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  }
}

これで、

npm start コマンドを使用してサービスを開始できるようになります。 --hot コマンドは変更後にファイルを再ロードするため、コードの変更後に変更を確認するためにブラウザを更新する必要はありません。

ステップ 6、index.html

アプリケーションのルート要素として div id = "app" を設定し、index.js スクリプト ファイルを導入します。 

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App - php中文网(php.cn)</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

ステップ 7、App.jsx と main.js

これは最初の React コンポーネントです。 React コンポーネントについては、次の章で詳しく紹介します。このコンポーネントは Hello World!!! を出力します。

App.jsx ファイル コード 

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到php中文网学习！！！
         </div>
      );
   }
}

export default App;

ブラウザ上で確認できるように、コンポーネントを取り込んでルート要素 App にレンダリングする必要があります。

main.js ファイル コード

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

import App from './App.jsx';

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

注:

コンポーネントを任意のアプリケーションで使用したい場合は、作成後に export を使用してエクスポートし、ファイル内で import を使用する必要があります。コンポーネントを使用してインポートします。

ステップ 8、サービスを実行します

上記の構成が完了したら、サービスを実行できます: 

$ npm start

ブラウザ経由でアクセスします http://localhost:7777/、出力結果は次のようになります:

QQ截图20161019101041.png

完全なサンプルのダウンロード

上記のテスト例の各ファイル コードのダウンロード アドレス: http://static.php.cn/download/reactApp.zip。