Pemasangan bertindak balas
React boleh dimuat turun dan digunakan secara terus, dan pakej muat turun juga menyediakan banyak contoh pembelajaran.
Tutorial ini menggunakan React versi 0.14.7 Anda boleh memuat turun versi terkini daripada tapak web rasmi http://facebook.github.io/react/.
Anda juga boleh terus menggunakan perpustakaan React CDN laman web php Cina, alamatnya adalah seperti berikut:
<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>
Menggunakan Contoh
Contoh berikut menghasilkan 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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Analisis contoh:
Dalam contoh, kami memperkenalkan tiga perpustakaan: react.min.js, react-dom.min.js dan browser.min.js:
react.min.js - Pustaka teras React
react-dom.min.js - Menyediakan Fungsi berkaitan DOM
browser.min.js - Digunakan untuk menukar sintaks JSX kepada sintaks JavaScript
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
); The kod di atas memasukkan tajuk h1 ke dalam nod id="example".
Nota:
Jika kita perlu menggunakan JSX, atribut jenis teg <skrip>
Gunakan React melalui npm
Jika sistem anda tidak menyokong Node.js dan NPM, anda boleh merujuk kepada tutorial Node.js kami.
Kami mengesyorkan menggunakan sistem modul CommonJS dengan React, seperti browserify atau webpack, dan tutorial ini menggunakan webpack.
Langkah pertama ialah memasang pakej global
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Langkah kedua ialah mencipta direktori akar
Buat direktori akar dengan nama direktori: reactApp, dan kemudian gunakan npm init untuk memulakannya. Jana fail 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)Langkah 3. Tambah pakej bergantung dan pemalam
Oleh kerana kita ingin menggunakan React, kita perlu memasangnya terlebih dahulu. Perintah --save digunakan untuk menambah pakej pada fail package.json.
$ npm install react --save $ npm install react-dom --save
Pada masa yang sama, kami juga perlu memasang beberapa pemalam babel
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Langkah 4. Cipta fail
Seterusnya kami buat beberapa fail yang diperlukan:
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
Langkah kelima, sediakan pengkompil, pelayan, pemuat
Buka fail webpack.config.js dan tambah kod berikut:
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;masukan: Nyatakan fail kemasukan berpakej main.js.
output: Konfigurasikan hasil pembungkusan, laluan mentakrifkan folder output dan nama fail mentakrifkan nama fail hasil pembungkusan.
devServer: Tetapkan nombor port pelayan kepada 7777 Anda boleh menetapkannya sendiri selepas port.
modul: mentakrifkan logik pemprosesan untuk modul Di sini anda boleh menggunakan pemuat untuk menentukan siri pemuat, serta beberapa peraturan biasa. Apabila fail yang akan dimuatkan sepadan dengan corak biasa ujian, pemuat seterusnya akan dipanggil untuk memproses fail Itulah sebabnya pek web berkuasa.
Sekarang buka fail package.json dan cari "test" "echo "Ralat: tiada ujian dalam "skrip" dinyatakan" && keluar 1" Gantikan dengan kod berikut:
"start": "webpack-dev-server --hot"
Kandungan fail package.json yang diganti adalah seperti berikut:
$ 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"
}
}Sekarang kita boleh menggunakan perintah >npm start untuk memulakan perkhidmatan. Perintah --hot akan memuatkan semula fail selepas ia berubah, jadi kami tidak perlu memuat semula penyemak imbas selepas kod diubah suai untuk melihat perubahan.
Langkah 6, index.html
Tetapkan div id = "app" sebagai elemen akar aplikasi kami dan perkenalkan fail skrip 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>
Langkah 7, App.jsx dan main.js
Ini ialah komponen tindak balas yang pertama. Kami akan memperkenalkan komponen React secara terperinci dalam bab berikut. Komponen ini akan mengeluarkan Hello World!!!.
Kod fail App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!<br />
欢迎来到php中文网学习！！！
</div>
);
}
}
export default App;Kami perlu membawa masuk komponen dan menjadikannya pada elemen akar Apl supaya kami dapat melihatnya pada penyemak imbas.
kod fail main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))Nota:
Jika anda mahu komponen digunakan dalam mana-mana aplikasi, anda perlu ciptakannya Kemudian gunakan eksport untuk mengeksportnya dan gunakan import untuk mengimportnya dalam fail menggunakan komponen.
Langkah 8, jalankan perkhidmatan
Selepas melengkapkan konfigurasi di atas, kami boleh menjalankan perkhidmatan:
$ npm start
Akses melalui penyemak imbas http:/ / localhost:7777/, hasil output adalah seperti berikut:
Muat turun contoh penuh
Alamat muat turun setiap kod fail contoh ujian di atas: http ://static.php.cn/download/reactApp.zip.
