Descrevendo a Interface do Usuário

React é uma biblioteca JavaScript para renderizar interfaces de usuário (UI). A UI é construída a partir de pequenas unidades como botões, textos e imagens. O React permite que você as combine emcomponentesreutilizáveis e aninháveis. De sites da web a aplicativos de telefone, tudo na tela pode ser dividido em componentes. Neste capítulo, você aprenderá a criar, personalizar e exibir condicionalmente componentes React.

Seu primeiro componente

Aplicações React são construídas a partir de partes isoladas de UI chamadascomponentes. Um componente React é uma função JavaScript que você pode polvilhar com marcação. Os componentes podem ser tão pequenos quanto um botão ou tão grandes quanto uma página inteira. Aqui está um componenteGalleryrenderizando três componentesProfile:

Importando e exportando componentes

Você pode declarar muitos componentes em um arquivo, mas arquivos grandes podem ficar difíceis de navegar. Para resolver isso, você podeexportarum componente para seu próprio arquivo e, em seguida,importaresse componente de outro arquivo:

Escrevendo marcação com JSX

Cada componente React é uma função JavaScript que pode conter alguma marcação que o React renderiza no navegador. Os componentes React usam uma extensão de sintaxe chamada JSX para representar essa marcação. O JSX parece muito com HTML, mas é um pouco mais rigoroso e pode exibir informações dinâmicas.

Se colarmos uma marcação HTML existente em um componente React, nem sempre funcionará:

Se você tiver HTML existente como este, pode corrigi-lo usando umconversor:

JavaScript no JSX com chaves

O JSX permite que você escreva marcação semelhante a HTML dentro de um arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no mesmo lugar. Às vezes, você vai querer adicionar um pouco de lógica JavaScript ou referenciar uma propriedade dinâmica dentro dessa marcação. Nessa situação, você pode usar chaves no seu JSX para “abrir uma janela” para o JavaScript:

Passando props para um componente

Os componentes React usampropspara se comunicar entre si. Todo componente pai pode passar algumas informações para seus componentes filhos, fornecendo props. As props podem lembrar atributos HTML, mas você pode passar qualquer valor JavaScript através delas, incluindo objetos, arrays, funções e até mesmo JSX!

Renderização condicional

Seus componentes frequentemente precisarão exibir coisas diferentes dependendo de diferentes condições. No React, você pode renderizar JSX condicionalmente usando sintaxe JavaScript como instruçõesif, operadores&& e ? :.

Neste exemplo, o operador JavaScript&&é usado para renderizar condicionalmente uma marca de verificação:

Renderizando listas

Você frequentemente vai querer exibir vários componentes semelhantes a partir de uma coleção de dados. Você pode usar ofilter()e omap()do JavaScript com o React para filtrar e transformar seu array de dados em um array de componentes.

Para cada item do array, você precisará especificar umakey. Geralmente, você vai querer usar um ID do banco de dados comokey. As keys permitem que o React acompanhe o lugar de cada item na lista, mesmo que a lista mude.

Mantendo componentes puros

Algumas funções JavaScript sãopuras.Uma função pura:

• Cuida da sua própria vida.Ela não altera quaisquer objetos ou variáveis que existiam antes de ser chamada.
• Mesmas entradas, mesma saída.Dadas as mesmas entradas, uma função pura deve sempre retornar o mesmo resultado.

Ao escrever estritamente seus componentes apenas como funções puras, você pode evitar toda uma classe de bugs confusos e comportamentos imprevisíveis à medida que sua base de código cresce. Aqui está um exemplo de um componente impuro:

Você pode tornar este componente puro passando uma prop em vez de modificar uma variável preexistente:

Sua UI como uma árvore

O React usa árvores para modelar as relações entre componentes e módulos.

Uma árvore de renderização do React é uma representação da relação pai e filho entre componentes.

Um exemplo de árvore de renderização do React.

Componentes próximos ao topo da árvore, perto do componente raiz, são considerados componentes de nível superior. Componentes sem componentes filhos são componentes folha. Essa categorização de componentes é útil para entender o fluxo de dados e o desempenho de renderização.

Modelar a relação entre módulos JavaScript é outra maneira útil de entender seu aplicativo. Nós nos referimos a ela como uma árvore de dependência de módulos.

Um exemplo de árvore de dependência de módulos.

Uma árvore de dependência é frequentemente usada por ferramentas de build para agrupar todo o código JavaScript relevante para o cliente baixar e renderizar. Um tamanho de pacote grande prejudica a experiência do usuário em aplicativos React. Entender a árvore de dependência de módulos é útil para depurar tais problemas.

O que vem a seguir?

Vá paraSeu Primeiro Componentepara começar a ler este capítulo página por página!

Ou, se você já está familiarizado com esses tópicos, por que não ler sobreAdicionando Interatividade?