reagire installazione
Reagire può essere scaricato direttamente utilizzando il pacchetto di download fornisce anche molti esempi di apprendimento.
Questo tutorial utilizza Reagire versione è 0.14.7, è possibile sul sito ufficiale http://facebook.github.io/react/ scaricare l'ultima versione.
È inoltre possibile utilizzare direttamente questo tutorial Reagire biblioteca CDN, al seguente indirizzo:
<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>
esempio
I seguenti esempi di uscita Ciao, mondo!
<!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>
Esempi di analisi:
Esempio abbiamo introdotto tre biblioteche: react.min.js, reagire-dom.min.js e browser.min.js:
- react.min.js - Reagire libreria di base
- reagiscono-dom.min.js - fornire funzioni DOM-correlati
- browser.min.js - per JSX sintassi nella sintassi JavaScript
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Il codice un'intestazione h1 sopra, inserire id = node "esempio".
Nota:
Se abbiamo bisogno di usare il JSX, l'attributo type tag <script> deve essere impostato su text / Babel.
Reagire utilizzando NPM
Se il sistema non supporta Node.js e NPM possono fare riferimento al nostro tutorial di Node.js .
Si consiglia l'uso di un sistema modulare in CommonJS Reagire, tali browserify o webpack, questo tutorial utilizza webpack.
In primo luogo, installare il pacchetto globale
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Successivamente, creare la directory principale
Creare una directory principale, la directory denominata: reactApp, quindi utilizzare package.json NPM file di inizializzazione init generato:
$ 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)
Il terzo passo è quello di aggiungere le dipendenze e plug-in
Perché vogliamo usare reagire, quindi abbiamo bisogno di installarlo, - salva il comando viene utilizzato per aggiungere pacchetti a package.json file.
$ npm install react --save $ npm install react-dom --save
Allo stesso tempo, dobbiamo installare alcuniplug-babele
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Il quarto passo è quello di creare un file
Successivamente, creiamo i file necessari:
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
Il quinto passo, impostare il compilatore, il server, loader
Apri filewebpack.config.js aggiungere il seguente codice:
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;
- ingresso: la voce specificata main.js.file pacchetto
- Uscita: Configurazione risultato pacchetto, cartella di output percorso definito, il nome del file definisce il nome del file per confezionare i risultati.
- devserver: impostare il numero di porta del server è 7777,dopo il porto è possibile impostare voi stessi.
- Modulo: definisce la logica di elaborazione del modulo, in cui è possibile definire una serie di caricatori con caricatore, così come alcuni regolare.Quando il file da caricare Test match dei tempi regolamentari, si richiamerà il file del caricatore viene elaborato, che è webpack ragioni potenti.
Ora file apertopackage.json, trovare il "script"nel"test" "echo \" Errore: nessuna prova specificata \ "&& exit 1" per sostituire con il seguente codice:
"start": "webpack-dev-server --hot"
il contenuto dei filePackage.json dopo la sostituzione come segue:
$ 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" } }
Ora possiamo usareNPM comando di startper avviare il servizio.--hot comando ricaricherà dopo che i file cambia, in modo che non abbiamo bisogno di aggiornare il browser dopo aver modificato il codice sarà in grado di vedere il cambiamento.
Il passo sesto, index.html
Impostazionediv id = "app", come l'elemento principale delle nostre applicazioni, e l'introduzione di file di 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>
Settimo passo, App.jsx e main.js
Questo è il primo componente reagire. Un capitolo successivo ci saranno i dettagli Reagire componenti. Questo componente uscita volontàCiao Mondo !!!.
codice del file App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </div> ); } } export default App;
Dobbiamo introdurre il componente e reso all'elemento radiceapp, in modo che possiamo vedere nel browser.
codice del file main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
Nota:
Se si desidera che il componente può essere utilizzato in qualsiasi applicazione, esportarlo richiede l'uso diesportazione dopo la sua creazione, utilizzando i file di componenti che utilizzano l'importazione di importazione.
Passo Otto, servizi in esecuzione
Dopo aver completato la configurazione di cui sopra, siamo in grado di eseguire il servizio:
$ npm start
Browser suhttp: // localhost: 7777 /, risultati di output sono i seguenti:
Scarica l'esempio completo
Altri casi di test per ogni file indirizzo di download: http://static.w3big.com/download/reactApp.zip .