Le meilleur didacticiel réagir Installation en 2024, dans ce didacticiel, vous pouvez apprendre Réagir à l'aide de npm,
Réagir peut être téléchargé directement en utilisant le package de téléchargement fournit également de nombreux exemples d'apprentissage.
Ce tutoriel utilise la version React est 0.14.7, vous pouvez sur le site officiel # télécharger la dernière version.
Vous pouvez également utiliser directement ce tutoriel Réagir bibliothèque CDN, à l'adresse suivante:
<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>
Les exemples suivants de sortie Bonjour, monde!
<!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>
Desexemples d'analyse:
Exemple nous avons introduit trois bibliothèques: react.min.js, réagissent-dom.min.js et browser.min.js:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Le code ci-dessus une tête de h1, insérer id = "exemple" noeud.
Remarque:
Si nous avons besoin d'utiliser le JSX, l'attribut de type balise <script> doit être défini sur text / babel.
Si votre système ne fonctionne pas avec Node.js et NPM peuvent se référer à notre tutoriel Node.js .
Nous recommandons l'utilisation d'un système modulaire CommonJS Réagir, ces browserify ou webpack, ce tutoriel utilise webpack.
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Créer un répertoire racine, le répertoire nommé: reactApp, puis utilisez package.json npm fichier init initialisation généré:
$ 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)
Parce que nous voulons utiliser Réagir, donc nous avons besoin de l'installer, - commande de sauvegarde est utilisé pour ajouter des packages à package.json fichier.
$ npm install react --save $ npm install react-dom --save
Dans le même temps , nous devons installer unplug-babel
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Ensuite, nous créons les fichiers nécessaires:
$ touch index $ touch App.jsx $ touch main.js $ touch webpack.config.js
Ouvrir le fichierde webpack.config.js ajoutez le code suivant:
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;
Maintenant fichierpackage.json ouvert, trouver les "scripts"dans le"test" "echo \" Erreur: pas de test spécifiée \ "&& exit 1" pour le remplacer par le code suivant:
"start": "webpack-dev-server --hot"
le contenu du fichierPackage.json après le remplacement comme suit:
$ 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" } }
Maintenant , nous pouvons utiliser la commandenpm de démarrage pour démarrer le service.commande--hot rechargera après les modifications de fichiers, de sorte que nous ne devons actualiser votre navigateur après avoir modifié le code sera en mesure de voir le changement.
Réglagediv id = "app" comme l'élément racine de nos applications, et l'introduction du fichier de 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>
Ceci est le premier composant réagit. Un chapitre plus tard, nous détaillera React composants. Cette volonté sortie composanteBonjour tout le monde !!!.
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </div> ); } } export default App;
Nous avons besoin d'introduire le composant et rendu à l'élément racineApp, de sorte que nous pouvons le voir dans votre navigateur.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
Remarque:
Si vous voulez que le composant peut être utilisé dans toute application, exporter nécessite l'utilisation de l'exportation après sa création, en utilisant les fichiers de composants à l' aide de l' importation à l'importation.
Après avoir terminé la configuration ci-dessus, nous pouvons exécuter le service:
$ npm start
Navigateur àhttp: // localhost: 7777 /, les résultats de sortie sont les suivantes:
Plus de cas de test pour chaque adresse de téléchargement de fichier: http://static.w3write.com/download/reactApp.zip .