reaccionar instalación

Reaccionar puede ser descargado directamente utilizando el paquete de descarga también proporciona muchos ejemplos de aprendizaje.

Este tutorial usa Reaccionar es la versión 0.14.7, puede en el sitio oficial http://facebook.github.io/react/ descargar la última versión.

También puede utilizar este tutorial directa Reaccionar biblioteca CDN, en la siguiente dirección:

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

ejemplo

Los siguientes ejemplos de producción Hola, mundo!

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

Trate »

ejemplos de análisis:

Ejemplo introdujimos tres bibliotecas: react.min.js, reaccionar-dom.min.js y browser.min.js:

react.min.js - Reaccionar biblioteca central
reaccionar-dom.min.js - proporcionar funciones relacionadas con el DOM
- browser.min.js de sintaxis JSX en la sintaxis de JavaScript

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

El código por encima de un encabezamiento E1, inserte id = "ejemplo" nodo.

Nota:
Si tenemos que utilizar el JSX, el atributo de tipo de etiqueta <script> se debe establecer en el texto / babel.

Reaccionar mediante el uso de la NGP

Si el sistema no es compatible con Node.js y NPM puede consultar a nuestro tutorial Node.js .

Se recomienda el uso de un sistema modular en CommonJS Reaccionar, tales browserify o webpack, este tutorial utiliza webpack.

En primer lugar, instale el paquete global

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

A continuación, cree el directorio raíz

Crear un directorio raíz, el directorio llamado: reactApp, a continuación, utilizar package.json NPM archivo de inicialización de inicialización generada:

$ 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)

El tercer paso es agregar las dependencias y plug-ins

Porque queremos utilizar reaccionar, así que tenemos que instalarlo, - guardar comando se utiliza para agregar paquetes de package.json archivo.

$ npm install react --save
$ npm install react-dom --save

Al mismo tiempo, tenemos que instalar algunosplug-babel

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

El cuarto paso es crear un archivo

A continuación, creamos los archivos necesarios:

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

El quinto paso, establecer el compilador, un servidor, un cargador

webpack.config.js archivo abierto agregue el código siguiente:

 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;

entrada: la entrada especificada main.js.de los paquetes
Salida: Paquete de configuración resultado, la carpeta de salida trayectoria definida, nombre del archivo define el nombre del archivo para empaquetar los resultados.
devserver: establecer el número de puerto del servidor es 7777,después de que el puerto se puede configurar usted mismo.
Módulo: define la lógica de procesamiento del módulo, donde puede definir una serie de cargadores con cargador, así como algo normal.Cuando el archivo se cargue partido de prueba del tiempo regular, que volverá a llamar el archivo de carga es procesada, que es webpack razones poderosas.

Ahorapackage.json archivo abierto, encontrar los "scripts"en la"prueba" "echo \" Error: no hay prueba especificada \ "&& salida 1" para reemplazar con el siguiente código:

"start": "webpack-dev-server --hot"

package.json archivos contenidos después de la sustitución de la siguiente manera:

$ 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"
  }
}

Ahora podemos usarla NGP comando de arranquepara iniciar el servicio.--buen comando volverá a cargar después de que los cambios en los archivos, por lo que no es necesario actualizar su navegador después de modificar el código será capaz de ver el cambio.

El paso sexto, index.html

Configuracióndiv id = "aplicación" como elemento raíz de nuestras aplicaciones, y la introducción de archivo 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>

Séptimo paso, App.jsx y main.js

Esta es la primera componente de reaccionar. Un capítulo más adelante detallaremos Reaccionar componentes. Esta es la salida componenteHello World !!!.

código del archivo App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到本教程学习！！！
         </div>
      );
   }
}

export default App;

Hay que introducir el componente y rendido al elemento raízde la aplicación, por lo que podemos verlo en su navegador.

código del archivo main.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

Nota:
Si desea que el componente puede ser utilizado en cualquier aplicación, exportarlo requiere el uso deexportación después de su creación, el uso de los archivos de los componentes mediante la importación de importación.

Paso ocho, servicios en ejecución

Después de completar la configuración anterior, podemos ejecutar el servicio:

$ npm start

Navegador ahttp: // localhost: 7777 /, los resultados de salida son los siguientes:

Descargar el ejemplo completo

Más casos de prueba para cada archivo de direcciones de descarga: http://static.w3big.com/download/reactApp.zip .

Anterior: Reaccionar Tutorial

Siguiente: Reaccionar JSX

React curso