Latest web development tutorials

réagir Installation

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 http://facebook.github.io/react/ 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.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>

exemple

Les exemples suivants de sortie Bonjour, monde! 

<!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>

Essayez »

Desexemples d'analyse:

Exemple nous avons introduit trois bibliothèques: react.min.js, réagissent-dom.min.js et browser.min.js:

  • react.min.js - Réagir bibliothèque centrale
  • réagir-dom.min.js - fournissant des fonctions DOM liées
  • browser.min.js - pour JSX syntaxe dans la syntaxe JavaScript 
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.

Réagir à l'aide de npm

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.

Tout d'abord, installez le package global 

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

Ensuite, créez le répertoire racine

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)

La troisième étape consiste à ajouter des dépendances et des plug-ins

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

La quatrième étape consiste à créer un fichier

Ensuite, nous créons les fichiers nécessaires: 

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

La cinquième étape, définir le compilateur, serveur, chargeur

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;
  • entrée: l'entrée spécifiée fichier package main.js.
  • sortie: package résultat de configuration, le dossier de sortie de chemin défini, le nom de fichier définit le nom du fichier pour emballer les résultats.
  • devserver: définir le numéro de port du serveur est 7777,après le port , vous pouvez définir vous - même.
  • Module: définit la logique de traitement du module, où vous pouvez définir une série de chargeurs avec chargeur, ainsi que quelques réguliers.Lorsque le chargement du fichier test match du temps régulier, il rappellera le fichier de chargement est traitée, ce qui est webpack puissantes raisons.

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.

La sixième étape, index.html

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 - 本教程(w3big.com)</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

Septième étape, App.jsx et main.js

Ceci est le premier composant réagit. Un chapitre plus tard, nous détaillera React composants. Cette volonté sortie composanteBonjour tout le monde !!!.

Code de fichier App.jsx 

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.

Code de 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 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.

Étape huit, services fonctionnement

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:

Télécharger l'exemple complet

Plus de cas de test pour chaque adresse de téléchargement de fichier: http://static.w3big.com/download/reactApp.zip .