React instalację
React można pobrać bezpośrednio za pomocą pakietu do pobrania dostarcza również wiele przykładów uczenia się.
Ten poradnik wykorzystuje React wersja jest 0.14.7, można na oficjalnej stronie #~~HEAD=pobj pobrać najnowszą wersję.
Można również skorzystać z bezpośredniego ten poradnik React bibliotekę CDN, pod następującym adresem:
<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>
przykład
Poniższe przykłady wyjściowego 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>
Przykłady analizy:
Przykład wprowadziliśmy trzy biblioteki: react.min.js reagują-dom.min.js i browser.min.js:
- react.min.js - React rdzenia biblioteki
- reagują-dom.min.js - zapewniając funkcje związane DOM
- browser.min.js - dla JSX składni w składni JavaScript
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Powyższy kod nagłówek h1, włóż id = "przykład" węzła.
Uwaga:
Jeśli musimy użyć JSX, atrybut type <script> tag powinien być ustawiony na tekst / babel.
React za pomocą NPM
Jeśli system nie obsługuje node.js i NPM może odnosić się do naszego poradnika node.js .
Zalecamy korzystanie z systemu modułowego w CommonJS React, takich browserify lub WebPACK, ten poradnik wykorzystuje WebPACK.
Po pierwsze, należy zainstalować pakiet globalny
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Następnie należy utworzyć katalog główny
Tworzenie katalogu głównym katalog o nazwie: reactApp, a następnie użyć npm plik inicjujący startowych wygenerowany 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)
Trzecim krokiem jest dodanie zależności i wtyczek
Ponieważ chcemy wykorzystać zareagować, więc musimy go zainstalować - zachowaj polecenie służy do dodawania pakietów package.json pliku.
$ npm install react --save $ npm install react-dom --save
Jednocześnie musimy zainstalować jakiśplug-babel
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Czwartym krokiem jest utworzenie pliku
Następnie tworzymy potrzebne pliki:
$ touch index $ touch App.jsx $ touch main.js $ touch webpack.config.js
Piąty krok, ustaw kompilatora, serwer, ładowacz
Otwórz plikwebpack.config.js dodać następujący kod:
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;
- Wpis: Wpis określony main.js.plików pakietów
- Wyjście: Konfiguracja wynikiem pakietu, folder ścieżki wyjścia zdefiniowane nazwa_pliku określa nazwę pliku, do spakowania wyników.
- devServer: ustawić numer portu serwera to 7777,po porcie można ustawić samodzielnie.
- Moduł: definiuje logikę przetwarzania modułu, w którym można zdefiniować serię ładowarek z ładowaczem, jak również niektóre zwykłe.Gdy plik do załadowania testowy mecz regulaminowym czasie gry, to oddzwoni plik ładowarka ma zostać przetworzony, który jest WebPack mocne powody.
Teraz otwórz plikpackage.json, znaleźć "skrypty"na"test" echo "\" Błąd: brak badanie określone \ "&& exit 1" zastąpić za pomocą następującego kodu:
"start": "webpack-dev-server --hot"
Zawartość plikuPackage.json po wymianie w następujący sposób:
$ 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" } }
Teraz możemy użyćnpm polecenie Start,aby uruchomić usługę. Komenda--hot będzie przeładować po zmianach plików, dzięki czemu nie musimy odświeżyć swoją przeglądarkę po zmodyfikowaniu kodu będą mogli zobaczyć zmiany.
Szósty krok, index
Ustawianiediv id = "aplikacji" jako elementu głównego naszych aplikacji, oraz wprowadzenia index.jspliku skryptu.
<!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>
Siódmy krok App.jsx i main.js
Jest to pierwszy element reakcję. Następnym rozdziale będziemy szczegółowo React komponentów. Ten komponent wyjście wolaHello World !!!.
App.jsx kod pliku
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </div> ); } } export default App;
Musimy wprowadzić element i renderowane do elementu głównegoaplikacji, dzięki czemu możemy zobaczyć go w przeglądarce.
main.js kod pliku
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
Uwaga:
Jeśli chcesz składnik może być stosowany w dowolnej aplikacji, eksport wymaga użyciaeksportu po jej utworzeniu, z wykorzystaniem plików składowych za pomocą importu importu.
Krok ósmy, uruchamianie usługi
Po ukończeniu powyższej konfiguracji, możemy uruchomić usługę:
$ npm start
Przeglądarka dohttp: // localhost: 7777 / wyniki wyjściowe są następujące:
Pobierz kompletny przykład
Inne przypadki testowe dla każdego pliku adresu do pobrania: http://static.w3write.com/download/reactApp.zip~~HEAD=pobj .