Início Rápido

Bem-vindo à documentação do React! Esta página apresentará 80% dos conceitos do React que você usará no dia a dia.

Criando e aninhando componentes

Aplicativos React são feitos decomponentes. Um componente é uma parte da UI (interface do usuário) que tem sua própria lógica e aparência. Um componente pode ser tão pequeno quanto um botão ou tão grande quanto uma página inteira.

Componentes React são funções JavaScript que retornam marcação:

Agora que você declarouMyButton, pode aninhá-lo em outro componente:

Observe que<MyButton />começa com letra maiúscula. É assim que você sabe que é um componente React. Os nomes dos componentes React devem sempre começar com letra maiúscula, enquanto as tags HTML devem ser minúsculas.

Veja o resultado:

As palavras-chaveexport defaultespecificam o componente principal no arquivo. Se você não estiver familiarizado com alguma sintaxe JavaScript, oMDNe ojavascript.infotêm ótimas referências.

Escrevendo marcação com JSX

A sintaxe de marcação que você viu acima é chamada deJSX. Ela é opcional, mas a maioria dos projetos React usa JSX por conveniência. Todas asferramentas que recomendamos para desenvolvimento localsuportam JSX por padrão.

O JSX é mais rigoroso que o HTML. Você precisa fechar tags como<br />. Seu componente também não pode retornar múltiplas tags JSX. Você precisa envolvê-las em um elemento pai compartilhado, como um<div>...</div>ou um wrapper vazio<>...</>:

Se você tiver muito HTML para converter para JSX, pode usar umconversor online.

Adicionando estilos

No React, você especifica uma classe CSS comclassName. Funciona da mesma forma que o atributo HTMLclass:

Em seguida, você escreve as regras CSS para ela em um arquivo CSS separado:

O React não prescreve como você adiciona arquivos CSS. No caso mais simples, você adicionará uma tag<link>ao seu HTML. Se você usar uma ferramenta de build ou um framework, consulte sua documentação para aprender como adicionar um arquivo CSS ao seu projeto.

Exibindo dados

O JSX permite colocar marcação dentro do JavaScript. As chaves permitem que você "escape de volta" para o JavaScript para incorporar alguma variável do seu código e exibi-la ao usuário. Por exemplo, isso exibiráuser.name:

Você também pode "escapar para o JavaScript" a partir de atributos JSX, mas precisa usar chavesem vez deaspas. Por exemplo,className="avatar"passa a string"avatar"como a classe CSS, massrc={user.imageUrl}lê o valor da variável JavaScriptuser.imageUrl e, em seguida,

Você também pode colocar expressões mais complexas dentro das chaves do JSX, por exemplo,concatenação de strings:

No exemplo acima,style={{}}não é uma sintaxe especial, mas um objeto regular{}dentro das chaves JSXstyle={ }. Você pode usar o atributostylequando seus estilos dependem de variáveis JavaScript.

Renderização condicional

No React, não há uma sintaxe especial para escrever condições. Em vez disso, você usará as mesmas técnicas que usa ao escrever código JavaScript regular. Por exemplo, você pode usar uma instruçãoifpara incluir JSX condicionalmente:

Se você prefere um código mais compacto, pode usar ooperador condicional ?.Diferente deif, ele funciona dentro do JSX:

Quando você não precisa do ramoelse, também pode usar umasintaxe lógica && mais curta:

Todas essas abordagens também funcionam para especificar atributos condicionalmente. Se você não estiver familiarizado com algumas dessas sintaxes JavaScript, pode começar sempre usandoif...else.

Renderizando listas

Você contará com recursos do JavaScript comoloop fore afunção map() de arraypara renderizar listas de componentes.

Por exemplo, digamos que você tenha um array de produtos:

Dentro do seu componente, use a funçãomap()para transformar um array de produtos em um array de itens<li>:

Observe como<li>tem um atributokey. Para cada item em uma lista, você deve passar uma string ou um número que identifique exclusivamente esse item entre seus irmãos. Normalmente, uma chave deve vir dos seus dados, como um ID de banco de dados. O React usa suas chaves para saber o que aconteceu se você posteriormente inserir, excluir ou reordenar os itens.

Respondendo a eventos

Você pode responder a eventos declarando funções demanipulador de eventosdentro de seus componentes:

Observe comoonClick={handleClick}não tem parênteses no final! Nãochamea função do manipulador de eventos: você só precisapassá-la. O React chamará seu manipulador de eventos quando o usuário clicar no botão.

Atualizando a tela

Frequentemente, você vai querer que seu componente "lembre" de algumas informações e as exiba. Por exemplo, talvez você queira contar o número de vezes que um botão é clicado. Para fazer isso, adicioneestadoao seu componente.

importuseStatefrom React:

Agora você pode declarar umavariável de estadodentro do seu componente:

Você obterá duas coisas douseState: o estado atual (count) e a função que permite atualizá-lo (setCount). Você pode dar a eles quaisquer nomes, mas a convenção é escrever[algo, setAlgo].

Na primeira vez que o botão for exibido,countserá0porque você passou0parauseState(). Quando quiser alterar o estado, chamesetCount()e passe o novo valor para ele. Clicar neste botão incrementará o contador:

O React chamará sua função de componente novamente. Desta vez,countserá1. Depois será2. E assim por diante.

Se você renderizar o mesmo componente várias vezes, cada um terá seu próprio estado. Clique em cada botão separadamente:

Observe como cada botão “lembra” seu próprio estadocounte não afeta os outros botões.

Usando Hooks

Funções que começam comusesão chamadas deHooks.useStateé um Hook integrado fornecido pelo React. Você pode encontrar outros Hooks integrados nareferência da API.Você também pode escrever seus próprios Hooks combinando os existentes.

Hooks são mais restritivos que outras funções. Você só pode chamar Hooksno topodos seus componentes (ou de outros Hooks). Se quiser usaruseStateem uma condição ou loop, extraia um novo componente e coloque-o lá.

Compartilhando dados entre componentes

No exemplo anterior, cadaMyButtontinha seu própriocountindependente, e quando cada botão era clicado, apenas ocountdo botão clicado mudava:

Inicialmente, o estadocountde cadaMyButton é 0

O primeiroMyButtonatualiza seucountpara1

No entanto, muitas vezes você precisará que os componentescompartilhem dados e sempre sejam atualizados juntos.

Para fazer com que ambos os componentesMyButtonexibam o mesmocounte sejam atualizados juntos, você precisa mover o estado dos botões individuais “para cima” para o componente mais próximo que contém todos eles.

Neste exemplo, é oMyApp:

Inicialmente, o estadoMyApp’scount é 0e é passado para ambos os filhos

Ao clicar,MyAppatualiza seu estadocountpara1e o passa para ambos os filhos

Agora, quando você clicar em qualquer botão, ocountemMyAppmudará, o que mudará ambas as contagens emMyButton. Veja como você pode expressar isso em código.

Primeiro,mova o estado para cimadeMyButtonparaMyApp:

Em seguida,passe o estado para baixodeMyApppara cadaMyButton, junto com o manipulador de clique compartilhado. Você pode passar informações paraMyButtonusando as chaves JSX, assim como você fez anteriormente com tags integradas como<img>:

As informações que você passa para baixo dessa forma são chamadas deprops. Agora o componenteMyAppcontém o estadocounte o manipulador de eventoshandleClick, e passa ambos como propspara cada um dos botões.

Finalmente, altereMyButtonparaleras props que você passou do seu componente pai:

Quando você clica no botão, o manipuladoronClické acionado. A proponClickde cada botão foi definida como a funçãohandleClickdentro deMyApp, então o código dentro dela é executado. Esse código chamasetCount(count + 1), incrementando a variável de estadocount. O novo valor decounté passado como prop para cada botão, então todos mostram o novo valor. Isso é chamado de “elevação de estado”. Ao mover o estado para cima, você o compartilhou entre componentes.

Próximos passos

Até agora, você conhece o básico de como escrever código React!

Confira oTutorialpara colocá-los em prática e construir seu primeiro mini-app com React.