bereaksi instalasi

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 http://facebook.github.io/react/ men-download versi terbaru.

Anda juga dapat menggunakan langsung tutorial ini Bereaksi CDN perpustakaan, di alamat berikut:

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

contoh

Contoh berikut output Hello, world!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.w3big.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>

Coba »

contoh analisis:

Misalnya kita memperkenalkan tiga perpustakaan: react.min.js, bereaksi-dom.min.js dan browser.min.js:

react.min.js - Bereaksi perpustakaan inti
bereaksi-dom.min.js - menyediakan fungsi DOM terkait
browser.min.js - untuk BEJ sintaks dalam sintaks JavaScript

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.

Bereaksi dengan menggunakan NPM

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.

Pertama, instal paket global

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

Selanjutnya, buat direktori root

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)

Langkah ketiga adalah untuk menambahkan dependensi dan plug-ins

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

Langkah keempat adalah membuat sebuah file

Selanjutnya, kita membuat file yang diperlukan:

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

Langkah kelima, mengatur compiler, Server, loader

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;

entri: entri ditentukan berkas paket main.js.
Output: Konfigurasi hasil paket, jalan didefinisikan folder output, nama file mendefinisikan nama file mengemas hasil.
devServer: mengatur nomor port server 7777,setelah pelabuhan, Anda dapat mengatur diri sendiri.
Modul: mendefinisikan logika pengolahan modul, di mana Anda dapat menentukan serangkaian loader dengan loader, serta beberapa biasa.Ketika file untuk memuat laga uji coba dari waktu reguler, ia akan memanggil kembali file loader diproses, yang merupakan Webpack alasan kuat.

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.

Langkah keenam, index.html

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 - 本教程(w3big.com)</title>
   </head>

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

</html>

Langkah ketujuh, App.jsx dan main.js

Ini adalah komponen pertama bereaksi. Sebuah bab kemudian kami akan rinci Bereaksi komponen. Komponen akan menampilkanHello World !!!.

file kode App.jsx

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.

file kode main.js

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.

Langkah delapan, layanan berjalan

Setelah menyelesaikan konfigurasi di atas, kita dapat menjalankan layanan:

$ npm start

Browser kehttp: // localhost: 7777 /, hasil output adalah sebagai berikut:

Ambil contoh lengkap

Lebih uji kasus untuk setiap file alamat download: http://static.w3big.com/download/reactApp.zip .

Sebelumnya: Bereaksi Tutorial

Berikutnya: Bereaksi BEJ

React kuliah