Instalação

React é flexível e pode ser usado em uma variedade de projetos. Você pode criar novos apps com ele, mas você também pode inseri-lo gradualmente em uma base de código existente sem fazer uma reescrita.

Testando o React #

Se você está apenas interessado em brincar um pouco com React, você pode usar o CodePen. Tente começar com este códio Hello World de exemplo. Você não precisa instalar nada; Você pode modificar o código e ver como ele funciona.

Se você preferir usar seu próprio editor de texto, você pode também If you prefer to use your own text editor, you can also baixar este arquivo HTML, editá-lo, e abri-lo do seu sistema de arquivos no seu browser. Ele faz uma transformação de código em tempo de execução, portanto não use-o em produção

Criando uma Single Page Application #

Criando uma aplicação React é a melhor maneira de começar a construir uma nova Single Page Application com React. Ele configura o ambiente de desenvolvimento para que você possa usar os recursos do JavaScript mais recentes, provendo uma agrável experiencia de desenvolvimento, e otimizando sua aplicação para produção.

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Uma aplicação React não lida com lógica no backend ou banco de dados; cria apenas uma aplicação do frontend, então você pode usá-lo com qualquer backend que você quiser. Ele usa webpack, Babel e ESLint sob do capô, e configura-os para você

Acionando React a uma aplicação existente #

Você não precisa reescrever sua aplicação para começar a usar React.

Nós recomendamos adicionar React a uma pequena parte de sua aplicação, como um widget individual, então você pode ver ele funcionar bem para seu caso de uso.

Enquanto React pode ser usado sem um build pipeline, nós recomendamos configurá-lo para que você possa ser mais produtivo. Um moderno build pipeline tipicamente consiste em:

• Um Gerenciador de pagotes, como o Yarn ou npm. Permite a você tomar vantagens de uma vasta variedade de um ecosistema de pacotes de terceiros, e facilmente instalar ou atualiza-los.
• Um bundler, como o webpack ou Browserify. Pertmite a você escrever código modular e empacotá-lo junto em pequenos pacotes para otimizar tempo de carregamento.
• Um compilador como o Babel. Permite a você escrever código JavaScript moderno que continuará funcionando em browsers antigos.

Instalando o React #

Nós recomendamos usar o Yarn ou npm para gerenciar dependencias do frontend. Se você é novo com gerenciadores de pacotes, a documentação do Yarn é um bom lugar para começar.

Para instalar o React com Yarn, execute:

yarn add react react-dom

Para instalar o React com npm, execute:

npm install --save react react-dom

Ambos Yarn e npm baixam pacotes do registro do npm.

Habilitando o ES6 e JSX #

Nós recomendamos usar o React com Babel para permitir a você usar ES6 e JSX em seu código JavaScript. ES6 é um conjunto de funcionalidades modernas do JavaScript que torna o desenvolvimento mais fácil, enquanto JSX é uma extensão para a linguagem JavaScript que trabalha muito bem com o React.

As instruções de instalação do Babel explicam como configurar o Babel em diferentes ambientes. Tenha certeza de instalar o babel-preset-react e o babel-preset-es2015 e habilitá-lo no seu arquivo de configuração .babelrc . Agora você está pronto para começar.

Hello World com ES6 e JSX #

Nós recomendamos usar um bundler como o webpack ou o Browserify para que você possa escrever código modular e empacotá-lo junto em pequenos pacotes para otimizar tempo de carregamento.

O menor exemplo de React se parece com isto:

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

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

Este código renderiza em um elemento DOM com o id root então nós precisamos de <div id="root"></div> em algum lugar do nosso arquivo HTML.

Similarmente, você pode renderizar um componente React dentro de um elemento DOM em algum lugar no seu app existente, escrito com qualquer outra biblioteca de UI de JavaScript.

Versões de Desenvolvimento e Produção #

Por padrão, React inclue alguns avisos de ajuda. Estes avisos são muito úteis no desenvolvimento. Contudo, eles deixam o React maior e mais lento, então você deve se certificar de usar a versão de produção quando fizer o deploy da sua aplicação.

Criando uma aplicação React #

Se você usar Criando uma aplicação React , npm run build irá criar uma compilação otimizada da sua aplicação na pasta build.

Webpack #

Include both DefinePlugin and UglifyJsPlugin into your production Webpack configuration as described in this guide.

Inclua ambos DefinePlugin e UglifyJsPlugin na sua configuração de produção do Webpack como descrito neste guia.

Browserify #

Execute Browserify com a variável NODE_ENV setada para production e use UglifyJS como o último passo de compilação para que o código de desenvolvimento seja retirado.

Usando um CDN #

Se você não deseja usar npm para gerenciar os pacotes do cliente, os pacotes npm react e react-dom são distribuídos em arquivos nas pastas dist, ques são hospedadas em um CDN:

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

As versão abaixo são somente para desenvolvimento, e não são adequadas para produção. Versões minificadas e otimizadas de desenvolvimento do React estão disponíveis em:

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

Para carregar uma versão específica de react e react-dom, substitua o 15 pelo o número da versão desejada.

Se você usa Bower, React está disponível via pacote react.