インストールの反応2024 年の最新の入門チュートリアル。このコースでは NPMを使用することによって反応, について学習できます。
反応は、ダウンロードパッケージにも学習の多くの例を提供するを使用して直接ダウンロードすることができます。
このチュートリアルでは、バージョンをリアクト使用は、公式ウェブサイトで、0.14.7できることです#最新バージョンをダウンロードしてください。
また、このチュートリアルでは、以下のアドレスで、CDNライブラリーを反応させ、直接使用することができます。
<script src="http://static.w3write.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.w3write.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.w3write.com/assets/react/browser.min.js"></script>
出力こんにちは、世界の以下の例!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="http://static.w3write.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.w3write.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.w3write.com/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、反応-dom.min.jsとbrowser.min.js:例では、我々は3つのライブラリを導入しました:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
上記のコードのh1見出し、ID = "例"ノードを挿入します。
注意:
我々はJSX、type属性を使用する必要がある場合は、<スクリプト>タグは、テキスト/バベルに設定する必要があります。
お使いのシステムがサポートしていない場合のNode.jsとNPMは、私たちを参照することができNode.jsのチュートリアル 。
我々は、このチュートリアルでは、WebPACKのを使用して、このようなbrowserifyまたはWebPACKは、CommonJSモジュール式システムを使用することが反応をお勧めします。
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
ルートディレクトリ、という名前のディレクトリを作成します。reactAppは、その後、NPM初期化初期化ファイル生成package.jsonを使用します。
$ mkdir reactApp $ cd reactApp/ $ npm init name: (reactApp) w3big-react-test version: (1.0.0) description: 本教程 react 测试 entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/tianqixin/www/reactApp/package.json: { "name": "w3big-react-test", "version": "1.0.0", "description": "本教程 react 测试", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes)
我々はリアクト使用したいので、私たちは、それをインストールする必要があるため - コマンドを保存するファイルをpackage.jsonするパッケージを追加するために使用されます。
$ npm install react --save $ npm install react-dom --save
同時に、我々はいくつかのプラグインバベルをインストールする必要があります
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
次に、我々は必要なファイルを作成します。
$ touch index $ touch App.jsx $ touch main.js $ touch webpack.config.js
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;
今オープンpackage.jsonファイルは、「テスト」」の「スクリプト」を見つけるエコー\ "エラー :なしテスト指定\" && 1番出口「次のコードで置換します:
"start": "webpack-dev-server --hot"
交換後Package.jsonファイルの内容を次のように
$ cat package.json { "name": "w3big-react-test", "version": "1.0.0", "description": "本教程 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コマンドは、ファイルの変更後にリロードされます。
私たちのアプリケーションのルート要素、およびindex.jsスクリプトファイルの導入としてのdivのid = "アプリ"を設定します。
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>React App - 本教程(w3write.com)</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
これは、第一成分が反応しています。 以降の章では、我々は詳細は、コンポーネントを反応させます。 このコンポーネントが出力さのHello World !!!。
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </div> ); } } export default App;
私たちは、お使いのブラウザで、我々はそれを見ることができるように、コンポーネントを導入し、ルート要素のAppにレンダリングする必要があります。
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
注意:
あなたは、コンポーネントが任意のアプリケーションで使用することができますしたい場合は、それが作成された後、輸出はそれが輸入インポートを使用してコンポーネントファイルを使用して、エクスポートを使用する必要があります。
上記の設定を完了した後、我々はサービスを実行することができます。
$ npm start
ブラウザでhttp:// localhostを:7777 /以下のように、出力結果は次のとおりです。
:各ファイルのダウンロードアドレスのためのより多くのテストケースhttp://static.w3write.com/download/reactApp.zip 。