Latest web development tutorials

reagir instalação

Reagir pode ser baixado diretamente usando o pacote de download também fornece muitos exemplos de aprendizagem.

Este tutorial usa Reagir versão é 0.14.7, você pode pelo site oficial http://facebook.github.io/react/ baixar a versão mais recente.

Você também pode usar este tutorial direta Reagir biblioteca CDN, no seguinte endereço: 

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

exemplo

Os seguintes exemplos de saída Olá, 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>

tente »

exemplos de análise:

Exemplo introduzimos três bibliotecas: react.min.js, reagem-dom.min.js e browser.min.js:

  • react.min.js - Reagir biblioteca central
  • reagem-dom.min.js - fornecendo funções relacionadas com o DOM
  • browser.min.js - para sintaxe JSX em sintaxe JavaScript 
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

O código acima um título h1, insira id = "exemplo" nó.

Nota:

Se precisar usar o JSX, o tipo de atributo tag <script> deve ser definido como text / babel.

Reagir usando NPM

Se o seu sistema não suporta Node.js e NPM pode consultar o nosso tutorial Node.js .

Nós recomendamos o uso de um sistema modular em commonjs Reagir, tais browserify ou Webpack, este tutorial usa Webpack.

Primeiro, instale o pacote global de 

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

Em seguida, crie o diretório raiz

Criar um diretório raiz, o diretório chamado: reactApp, em seguida, usar package.json NPM arquivo de inicialização de inicialização gerado: 

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

O terceiro passo é adicionar dependências e plug-ins

Porque queremos usar Reagir, por isso precisamos de instalá-lo, - salvar comando é usado para adicionar pacotes a package.json arquivo. 

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

Ao mesmo tempo, temos que instalar algunsplug-babel

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

A quarta etapa é criar um arquivo

Em seguida, criamos os arquivos necessários: 

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

O quinto passo, definir o compilador, servidor, loader

Abrir arquivowebpack.config.js adicione o seguinte código:

 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: a entrada especificada main.js.de arquivos de pacote
  • Saída: Configuração resultado pacote, pasta de saída caminho definido, filename define o nome do arquivo para empacotar os resultados.
  • devserver: definir o número da porta do servidor é 7777,depoisdea porta que você pode definir-se.
  • módulo: define a lógica de processamento do módulo, onde você pode definir uma série de carregadores com carregador, bem como alguns regular.Quando o arquivo para carregar jogo teste do tempo regular, ele irá chamar de volta o arquivo de carregador é processado, que é Webpack razões poderosas.

Agora arquivo abertopackage.json, encontrar os "scripts"no"teste" "echo \" Erro: nenhum teste especificado \ "&& exit 1" para substituir com o seguinte código: 

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

o conteúdo do arquivoPackage.json após a substituição da seguinte forma:

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

Agora podemos usarNPM comando startpara iniciar o serviço.--hot comando irá recarregar após as alterações de arquivos, de modo que não precisamos para atualizar seu navegador depois de modificar o código será capaz de ver a mudança.

A etapa de sexta, index.html

Definirdiv id = "app" como o elemento raiz de nossos aplicativos, ea introdução de arquivo 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étima etapa, App.jsx e main.js

Este é o primeiro componente de reagir. Um capítulo posterior detalhamos reagirá componentes. A saída será componenteOlá Mundo !!!.

código de arquivo App.jsx 

import React from 'react';

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

export default App;

Temos de introduzir o componente e processados para o elemento raizApp, para que possamos vê-lo no seu browser.

código de arquivo main.js 

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

import App from './App.jsx';

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

Nota:

Se quiser que o componente pode ser usado em qualquer aplicação, exportá-lo requer o uso deexportação depois de ser criado, usando os arquivos do componente usando a importação de importação.

Passo Oito, serviços em execução

Depois de completar a configuração acima, podemos executar o serviço: 

$ npm start

Navegador parahttp: // localhost: 7777 /, resultados de saída são as seguintes:

Baixe o exemplo completo

Mais casos de teste para cada arquivo endereço de download: http://static.w3big.com/download/reactApp.zip .