Najlepszy samouczek React instalację W 2024 r. W tym samouczku możesz dowiedzieć się React za pomocą NPM,
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>
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:
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.
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.
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
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)
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
Następnie tworzymy potrzebne pliki:
$ touch index $ touch App.jsx $ touch main.js $ touch webpack.config.js
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;
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.
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>
Jest to pierwszy element reakcję. Następnym rozdziale będziemy szczegółowo React komponentów. Ten komponent wyjście wolaHello World !!!.
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.
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.
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:
Inne przypadki testowe dla każdego pliku adresu do pobrania: http://static.w3write.com/download/reactApp.zip~~HEAD=pobj .