Uma rápida introdução sobre React.js em 5min.

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:

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

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

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:

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

Como resultado, isso é renderizado na tela:

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