Como começar com o React

React é uma biblioteca javascript muito popular que é usada principalmente para criar aplicativos web de página única. Há tantas coisas que você pode fazer com o React, e tantos tutoriais disponíveis online, mas aqui falarei apenas sobre os passos a seguir para ir do zero ao seu primeiro componente react.

Antes de começar

Você precisa de uma versão recente do NodeJs, você pode instalar a versão mais recente do nodesource .

Além disso, se você não estiver familiarizado com a sintaxe JSX, verifique este link .

Configurando um ambiente de desenvolvimento

Você pode experimentar o React imediatamente, simplesmente incluindo uma tag de script em sua página da Web que carrega um arquivo .js pronto para uso, mas não acho que seja o caminho a seguir, porque você não quer apenas experimentá-lo , você deseja usá-lo.

Usando a ferramenta create-react-app, você pode configurar um clichê, que permite ver como é um aplicativo react básico, e um compilador ao vivo que mostra a saída do seu código assim que você salva um arquivo.

Depois que tudo estiver instalado, basta acessar a pasta do aplicativo e digitar: npm start.

Entenda os componentes e adereços

O propósito de um componente é renderizar algo para ser exibido toda vez que um evento específico acontece. Os eventos que acionam a re-renderização devem ser definidos, falamos em “mudar o estado” de um componente.

props é um objeto com propriedades que são passadas para a função componente através de variáveis ​​como atributos html.

Entenda os ganchos

O React primeiro usava classes para definir componentes, mas recentemente tornou-se possível usar funções para defini-los, e os ganchos são o que permite acessar as diferentes funcionalidades do React dentro dessas funções.

O estado é a funcionalidade mais básica, então o primeiro gancho que você precisará é useState .

Seu primeiro componente

Localize o arquivo app.js (ou app.tsx se você usa typescript) na pasta src e abra-o: a função App( ) será seu primeiro componente. Exclua o que está dentro de return( ), e também o que está acima dele, então vamos tentar algo bem simples:

Coloque este código dentro de return()

<button onClick={showMessage}>React!</button>

function showMessage(){
    console.log("It works!")
}

ReactDOM.render( ) é o que permite ao React “escrever” componentes na página da web, você o encontrará dentro de index.js (ou index.tsx).

Para entender as mudanças de estado, a maioria dos tutoriais mostra como construir contadores que incrementam seu valor cada vez que você clica em um botão.

Seu primeiro plug-in

Qualquer um pode criar seus próprios ganchos, e muitos ganchos personalizados estão disponíveis como “plugins”. Um deles é o react-hook-form , que lida com a exibição e validação de formulários,

No RHF, useState é substituído por useForm , que contém funcionalidades prontas para uso e muito bem documentadas.