---
title: React
localeTitle: React
---
# React
React é uma biblioteca JavaScript para criar interfaces com o usuário. É mantido pelo Facebook, Instagram e uma comunidade de desenvolvedores individuais e outras empresas. Ele foi eleito o mais amado na categoria "Frameworks, bibliotecas e outras tecnologias" da Pesquisa de desenvolvedores do Stack Overflow 2017. 1
React é uma biblioteca JavaScript e os aplicativos React criados nele são executados no navegador, NÃO no servidor. Aplicativos desse tipo só se comunicam com o servidor quando necessário, o que os torna muito rápidos em comparação com os sites tradicionais que forçam o usuário a esperar que o servidor renderize novamente páginas inteiras e as envie para o navegador.
O React é usado para criar interfaces com o usuário - o que o usuário vê na tela e interage para usar seu aplicativo da web. Essa interface é dividida em componentes, em vez de ter uma página enorme que você divide em partes menores conhecidas como componentes. Em termos mais gerais, essa abordagem é chamada de modularidade.
* É declarativo: o React usa um paradigma declarativo que facilita o raciocínio sobre seu aplicativo.
* É eficiente: o React calcula o conjunto mínimo de alterações necessárias para manter o seu DOM atualizado.
* E é flexível: o React funciona com as bibliotecas e estruturas que você já conhece.
## Por que aprender React?
1. React envolve Composição, que é um monte de componentes que envolvem as funcionalidades em um contêiner encapsulado. Muitos sites populares usam o React implementando o padrão arquitetural MVC. Facebook (Parcialmente), Instagram (Completamente), Khan Academy (Parcialmente), Codecademy (Parcialmente), New York Times (Parcialmente), Yahoo Mail (Completamente), o novo aplicativo de galeria de fotos e vídeos do Dropbox Carrossel (Completamente) são os sites populares conhecidos estar usando React. Como esses aplicativos grandes são criados usando o React? A resposta simples é construir pequenos aplicativos ou componentes. Exemplo:
```jsx
const Component2 = () => {
return (
);
};
const Component3 = () => {
return (
);
};
const Component1 = () => {
return (
);
};
ReactDOM.render(
,
document.getElementById("app")
);
```
2. React é declarativo para a maior parte em que estamos mais preocupados com o que fazer, em vez de como fazer uma tarefa específica. A programação declarativa é um paradigma de programação que expressa a lógica de uma computação sem descrever seu fluxo de controle. A programação declarativa vem com certas vantagens, como redução de efeitos colaterais (ocorre quando modificamos qualquer estado ou transformamos algo ou fazemos uma requisição de API), minimizando a mutabilidade (muito abstraído), melhor legibilidade, menores erros.
3. Fluxo de dados unidirecional. A interface do usuário no React é, na verdade, a função do estado que significa que, à medida que o estado é atualizado, ele também atualiza a interface do usuário. Portanto, nossa interface do usuário progride conforme o estado muda.
## Vantagens do React
Algumas razões para usar o React são:
1. Rápido. Os aplicativos feitos no React podem lidar com atualizações complexas e ainda se sentem rápidos e responsivos.
2. Modular Em vez de escrever arquivos grandes e densos de código, você pode escrever muitos arquivos menores e reutilizáveis. A modularidade do React pode ser uma bela solução para os [problemas de manutenção](https://en.wikipedia.org/wiki/Spaghetti_code) do JavaScript.
3. Escalável Programas grandes que exibem muitos dados alterados são onde o React apresenta o melhor desempenho.
4. Flexível. Você pode usar o React para projetos interessantes que não têm nada a ver com a criação de um aplicativo da web. As pessoas ainda estão descobrindo o potencial do React. [Há espaço para explorar](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) .
### DOM virtual
A mágica do React vem da interpretação do DOM e sua estratégia para criar interfaces de usuário.
O React usa o DOM virtual para renderizar uma árvore HTML virtualmente primeiro e, a cada vez que um estado muda e obtém uma nova árvore HTML que precisa ser levada ao DOM do navegador, em vez de gravar toda a nova árvore, o React só grava diferença entre a nova árvore e a árvore anterior (desde que o React tenha ambas as árvores na memória). Esse processo é conhecido como Reconciliação de Árvore.
### Reconciliação
O React possui um algoritmo de diferenciação inteligente que ele usa para regenerar apenas em seu nó DOM o que realmente precisa ser regenerado enquanto mantém tudo como está. Esse processo de diferenciação é possível devido ao DOM virtual do React.
Usando o DOM virtual, o React mantém a última versão do DOM na memória e quando tiver uma nova versão DOM para levar ao navegador, essa nova versão do DOM também estará na memória, então o React pode computar a diferença entre as versões novas e antigas .
O React instruirá o navegador para atualizar apenas o diff computado e não o nó DOM inteiro. Não importa quantas vezes nós regeneramos nossa interface, o React levará para o navegador apenas as novas atualizações “parciais”.
## React do zero
Você gostaria de começar a aprender os fundamentos da reação sem ficar atolado criando um ambiente de desenvolvimento? As chances são de que, se você é novo no desenvolvimento da Web, configurar um ambiente de desenvolvimento pode deixá-lo um pouco intimidado quando estiver apenas tentando aprender React ou simplesmente aprender React pela primeira vez.
Neste artigo, vamos ver como podemos começar a usar o React usando apenas um editor de texto, um navegador e nada mais.
[!["Assista](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)
[### 1 - Configure o Código da Placa da Caldeira com Emmet
Vamos começar com o passo 1. Começaremos com um arquivo no nosso navegador chamado “index.html”. Começaremos com o código HTML do código da placa de caldeira. Para um início rápido, recomendo usar o Emmet com qualquer editor de texto que você tenha e, na primeira linha, digitar `html:5` e pressionar a tecla Shift para obter o código abaixo. Ou você pode ir em frente e copiar e colar o código abaixo.
```javascript
html:5
```
Isso resultará no seguinte código:
```javascript
Document
```
Nós podemos preencher o título de "Time to React!".
Este conteúdo não aparecerá na sua página da web. Qualquer coisa na seção head do arquivo HTML será um metadado que nosso navegador usará para interpretar nosso código na seção do corpo. Este título vai ser o que aparece na aba da nossa página, não na página.
### 2 - Obtenha tags de script para aproveitar o poder das bibliotecas React e Babel
Ok, o item um é retirado da nossa lista. Vamos ver o item dois. Vamos configurar nosso ambiente de desenvolvedor usando tags de script para trazer React e Babel. Este não é um ambiente de desenvolvedor da vida real. Isso seria uma configuração bastante elaborada. Isso também nos deixaria com um monte de código de placa de caldeira e bibliotecas que nos tirariam do assunto de aprender o básico do React. O objetivo desta série é passar por cima da sintaxe básica do React e entrar diretamente na codificação. Vamos usar tags `
...
Time to React!
```
Você está livre para usar versões mais atualizadas dessas bibliotecas à medida que elas saem. Eles não devem criar nenhuma alteração significativa no conteúdo que estamos cobrindo.
o que você está fazendo aqui? O elemento HTML `
React has not rendered yet
React has not rendered yet
React has not rendered yet