Tutorial bereaksi instalasi Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Bereaksi dengan menggunakan NPM,
Bereaksi dapat didownload langsung menggunakan paket download juga menyediakan banyak contoh pembelajaran.
Tutorial ini menggunakan Bereaksi versi 0.14.7, Anda dapat di situs resmi # men-download versi terbaru.
Anda juga dapat menggunakan langsung tutorial ini Bereaksi CDN perpustakaan, di alamat berikut:
<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>
Contoh berikut output Hello, world!
<!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>
contoh analisis:
Misalnya kita memperkenalkan tiga perpustakaan: react.min.js, bereaksi-dom.min.js dan browser.min.js:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Kode di atas sebuah heading h1, masukkan id = "contoh" simpul.
Catatan:
Jika kita perlu menggunakan BEJ, jenis atribut <script> tag harus di set ke text / babel.
Jika sistem Anda tidak mendukung Node.js dan NPM dapat merujuk ke kami tutorial Node.js .
Kami merekomendasikan penggunaan sistem modular di CommonJS Bereaksi, browserify atau Webpack seperti, tutorial ini menggunakan Webpack.
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Buat direktori root, direktori bernama: reactApp, kemudian gunakan package.json NPM init inisialisasi file yang dihasilkan:
$ 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)
Karena kita ingin menggunakan Bereaksi, jadi kita perlu menginstalnya, - menyimpan perintah digunakan untuk menambah paket untuk package.json berkas.
$ npm install react --save $ npm install react-dom --save
Pada saat yang sama kita harus menginstal beberapaplug-babel
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Selanjutnya, kita membuat file yang diperlukan:
$ touch index $ touch App.jsx $ touch main.js $ touch webpack.config.js
Membuka filewebpack.config.js tambahkan kode 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;
Sekarang file yangpackage.json terbuka, menemukan "script"dalam"test" "echo \" Kesalahan: tidak ada tes ditentukan \ "&& exit 1" untuk mengganti dengan kode berikut:
"start": "webpack-dev-server --hot"
FilePackage.json isi setelah penggantian sebagai berikut:
$ 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" } }
Sekarang kita dapat menggunakanNPM perintah mulaiuntuk memulai layanan. Perintah--hot akan reload setelah perubahan file, sehingga kita tidak perlu refresh browser Anda setelah memodifikasi kode akan dapat melihat perubahan.
Pengaturandiv id = "app" sebagai elemen root dari aplikasi kami, dan pengenalan file script index.js.
<!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>
Ini adalah komponen pertama bereaksi. Sebuah bab kemudian kami akan rinci Bereaksi komponen. Komponen akan menampilkanHello World !!!.
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </div> ); } } export default App;
Kita perlu untuk memperkenalkan komponen dan diberikan kepadaApp akar elemen,sehingga kita bisa melihatnya di browser Anda.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
Catatan:
Jika Anda ingin komponen dapat digunakan dalam aplikasi apapun, mengekspor memerlukan penggunaanekspor setelah dibuat, menggunakan file komponen menggunakan imporimpor.
Setelah menyelesaikan konfigurasi di atas, kita dapat menjalankan layanan:
$ npm start
Browser kehttp: // localhost: 7777 /, hasil output adalah sebagai berikut:
Lebih uji kasus untuk setiap file alamat download: http://static.w3write.com/download/reactApp.zip .