Uma rápida introdução sobre React.js em 5min.
Tags: react, translate, javascript
Published: 2019-08-21 18:05:11

####Esse tutorial é inteiramente traduzido e adaptado por mim, então o conteúdo não é inteiramente meu!!! Mas como eu achei muito interessante, resolvi deixar no meu site (https://anabneri.com.br/), porque me ajudou e creio que pode ajudar mais pessoas! ENJOY DUDES

##A configuração
Ao começar a utilizar o REACT, você deve usar a configuração mais simples possível: um arquivo HTML que importa as bibliotecas `React` e `ReactDOM ` usando Tags de script, como esta:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gvukucle2xbu9onuyeae.png)

Também importamos Babel, já que o React usa algo chamado JSX para escrever marcações. Vamos precisar transformar esse JSX em JavaScript simples, para que o navegador possa entendê-lo.

Há mais duas coisas que vocês precisam observar:
1. a `<div>`  com o ID de `#root`. Este é o ponto de entrada para o nosso aplicativo. Este é o lugar onde todo o nosso aplicativo vai viver.
1. o  `< script type =  "texto/babel " > ` tag no corpo. É aqui que escreveremos o nosso código React. js.

Se você quiser experimentar com o código, confira este playground Scrimba.

##Componentes/ Components

Tudo em REACT é um componente, e estes geralmente tomam a forma de classes JavaScript. Você cria um componente estendendo-se sobre a classe  `react-component`. Vamos criar um componente chamado `Eai rapaziada`.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a52jut61zu7d357sutpz.png)

Então é aqui que conectamos nosso componente  `Hello` com o ponto de entrada para o aplicativo (`<div id="root"></div>`). Isso resulta:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/57cqb4hzm1y76qnkjquu.png)

A sintaxe de HTML'ish que apenas olhou para (`<h1>` e `<Hello/> `) é o código JSX que mencionei anteriormente. Não é realmente HTML, embora o que você escreve lá acaba como Tags HTML no DOM.

O próximo passo é obter o nosso aplicativo para manipular dados.

##Manipulação de dados

Existem dois tipos de dados no React: props e State. A diferença entre os dois é um pouco complicado de entender no início, por isso não se preocupe se você encontrá-lo um pouco confuso. Vai se tornar mais fácil quando você começar a trabalhar com eles.

A principal diferença é que o estado é privado e pode ser alterado de dentro do próprio componente. Os adereços são externos e não são controlados pelo próprio componente. Ele é passado de componentes acima da hierarquia, que também controlam os dados.
**"um componente pode alterar seu estado interno diretamente. Ele não pode mudar seus adereços diretamente."**

Vamos dar uma olhada mais de perto em props/adereços primeiro.

##Props/ Adereços

Nosso componente `Hello` é muito estático e renderiza a mesma mensagem independentemente. Uma grande parte do REACT é a reutilização, o que significa a capacidade de escrever um componente uma vez e, em seguida, reutilizá-la em casos de uso diferentes — por exemplo, para exibir mensagens diferentes.

Para alcançar esse tipo de reutilização, adicionaremos adereços. É assim que você passa adereços para um componente:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/amkugslexlm7q2roszzl.png)

Este prop é chamado de  `message` e tem o valor "my friend". Podemos acessar este prop dentro do componente Hello referenciando  `this. props. Message`, assim:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/heqcqkvtax9co4u4h0tc.png)

Como resultado, isso é renderizado na tela:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m0jpc8qij1tmici4480m.png)

A razão pela qual estamos escrevendo {this. props. Message} com chavetas é porque precisamos informar ao JSX que queremos adicionar uma expressão JavaScript. Isto é chamado * * escapando * *.

Então agora temos um componente reutilizável que pode renderizar qualquer mensagem que quisermos na página. Woohoo!

...

Continue lendo no meu site [Reactjs em 5 minutos completo](https://anabneri.com.br/blog/react-em-5min/)