Installation de réaction
React peut être téléchargé et utilisé directement, et le package de téléchargement fournit également de nombreux exemples d'apprentissage.
Ce tutoriel utilise la version 0.14.7 de React. Vous pouvez télécharger la dernière version sur le site officiel http://facebook.github.io/react/.
Vous pouvez également utiliser directement la bibliothèque React CDN du site Web chinois php, l'adresse est la suivante :
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.php.cn/assets/react/browser.min.js"></script>
Utilisation d'exemples
L'exemple suivant affiche Hello, world !
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Exemple d'analyse :
Dans l'exemple, nous avons introduit trois bibliothèques : react.min.js, react-dom.min.js et browser.min.js :
react.min.js - La bibliothèque principale de React
react-dom.min.js - Fournit Fonctions liées au DOM
browser.min.js - Utilisé pour convertir la syntaxe JSX en syntaxe JavaScript
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
); Le Le code ci-dessus insère un titre h1 dans le nœud id="example".
Remarque :
Si nous devons utiliser JSX, l'attribut type de la balise <script>
Utilisez React via npm
Si votre système ne prend pas en charge Node.js et NPM, vous pouvez vous référer à notre tutoriel Node.js.
Nous vous recommandons d'utiliser un système de modules CommonJS avec React, tel que browserify ou webpack, et ce tutoriel utilise webpack.
La première étape consiste à installer le package global
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
La deuxième étape consiste à créer le répertoire racine
Créez un répertoire racine avec le nom du répertoire : reactApp, puis utilisez npm init pour l'initialiser. Générez le fichier package.json :
$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) php-react-test
version: (1.0.0)
description: php中文网 react 测试
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/tianqixin/www/reactApp/package.json:
{
"name": "php-react-test",
"version": "1.0.0",
"description": "php中文网 react 测试",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)Étape 3. Ajoutez des packages et des plug-ins dépendants
Parce que nous voulons utiliser React, nous devons d'abord l'installer. La commande --save est utilisée pour ajouter le package au fichier package.json.
$ npm install react --save $ npm install react-dom --save
En même temps, nous devons également installer des plug-ins babel
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Étape 4. Créer des fichiers
Ensuite, nous créons quelques fichiers nécessaires :
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
La cinquième étape, configurez le compilateur, le serveur, le chargeur
Ouvrez le fichier webpack.config.js et 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;entrée : Spécifiez le fichier d'entrée empaqueté main.js.
sortie : Configurez le résultat de l'empaquetage, le chemin définit le dossier de sortie et le nom de fichier définit le nom du fichier de résultat de l'empaquetage.
devServer : Définissez le numéro de port du serveur sur 7777 Vous pouvez le définir vous-même après le port.
module : définit la logique de traitement du module. Ici, vous pouvez utiliser des chargeurs pour définir une série de chargeurs, ainsi que quelques règles régulières. Lorsque le fichier à charger correspond au modèle habituel du test, le chargeur suivant sera appelé pour traiter le fichier. C'est pourquoi webpack est puissant.
Ouvrez maintenant le fichier package.json et recherchez le "test" "echo "Erreur : aucun test dans les "scripts" spécifié" && exit 1" Remplacer par le code suivant :
"start": "webpack-dev-server --hot"
Le contenu du fichier package.json remplacé est le suivant :
$ cat package.json
{
"name": "php-react-test",
"version": "1.0.0",
"description": "php中文网 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 commande >npm start pour démarrer le service. La commande --hot rechargera le fichier après sa modification, nous n'avons donc pas besoin d'actualiser le navigateur après la modification du code pour voir les modifications.
Étape 6, index.html
Définissez div id = "app" comme élément racine de notre application et introduisez le fichier de script index.js .
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>React App - php中文网(php.cn)</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
Étape 7, App.jsx et main.js
Il s'agit du premier composant de réaction. Nous présenterons les composants React en détail dans les chapitres suivants. Ce composant affichera Hello World!!!.
Code du fichier App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!<br />
欢迎来到php中文网学习！！！
</div>
);
}
}
export default App;Nous devons importer le composant et le restituer sur l'élément racine App afin que nous puissions le voir sur le navigateur.
Code du fichier main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))Remarque :
Si vous souhaitez que le composant soit utilisé dans n'importe quelle application, vous devez créez-le Ensuite, utilisez export pour l'exporter, et utilisez import pour l'importer dans le fichier à l'aide du composant.
Étape 8, exécutez le service
Après avoir terminé la configuration ci-dessus, nous pouvons exécuter le service :
$ npm start
Accès via le navigateur http:// localhost:7777/, les résultats de sortie sont les suivants :
Exemple de téléchargement complet
Adresse de téléchargement de chaque code de fichier du Exemple de test ci-dessus : http ://static.php.cn/download/reactApp.zip.
