Tutorial Reagir Parte 4: Componentes pai e filho

Estamos publicando a próxima parte da tradução do curso de treinamento do React. Nosso tópico hoje será o relacionamento entre os componentes pai e filho.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 9. Componentes pai e filho

→ Original

Hoje falaremos sobre componentes pai e filho. O uso de tais construções tornará nosso aplicativo muito mais complexo do que quando havia apenas um componente de saída no DOM, como MyInfo . Em vez dessa estrutura simples, o aplicativo pode ter uma hierarquia complexa de componentes que, como resultado, é convertida em elementos JSX.

Vamos começar com o modelo de aplicativo que você já conhece. Para recuperar o que index.js , você pode, de memória, escrever um código no arquivo index.js vazio para exibir a página de cabeçalho de primeiro nível com o texto Hello World! Reagir ferramentas. Aqui está a aparência do código:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") ) 

A última vez em que a descrição do elemento <h1> está no código acima, havia um código para exibir o componente MyInfo . Agora vamos criar o componente App e exibi-lo. Para fazer isso, precisamos de um código do seguinte formato:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

O componente App será o ponto de entrada para o nosso aplicativo. Você provavelmente já percebeu que faltava algo no código do exemplo anterior. Isso é verdade - ainda não importamos o App aqui. Vamos fazer isso:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Mas esse código ainda permanece inoperante. Precisamos do arquivo de componente do App ( App.js ) localizado na mesma pasta que o index.js . Este é o arquivo ao qual nos referimos no import App from "./App" comando import App from "./App" . Lembre-se de que os nomes dos componentes do React estão escritos em estilo camelo e começam com uma letra maiúscula. Crie o arquivo que precisamos e descreva o componente App nele. Tente fazer você mesmo. Ou seja, escreva o código graças ao qual o componente App exibe Hello again na página.

Aqui está a aparência desse código:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

Aqui, a função App retorna um único elemento, mas lembre-se de que estruturas mais complexas podem ser retornadas a partir de funções semelhantes. O mais importante é não esquecer que você pode retornar apenas um elemento que, se, de fato, precisar exibir vários elementos, é um contêiner que os inclui. Por exemplo, veja como seria um retorno de marcação descrevendo um cabeçalho de primeiro nível e uma lista de marcadores:

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

Talvez agora possamos decidir que o que é formado por meio do componente App deve ser um site. Ele terá um bloco de navegação ( <nav></nav> ) e uma área de conteúdo principal ( <main></main> ). Esta solução levará à formação do seguinte código:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

É assim que ficará em um navegador.


Aplicativo no navegador

Aqui você ainda pode estilizar a lista para que ela se pareça mais com uma barra de navegação.

Você pode perceber que o código do componente já se tornou bastante grande. Isso vai contra o propósito para o qual usamos o React. Anteriormente, falamos sobre o fato de que fragmentos de código HTML podem ser representados como componentes separados, e em nosso componente tudo é empilhado em uma pilha. Portanto, agora criaremos componentes para cada fragmento independente da marcação.

Dê uma olhada neste diagrama para entender melhor o que está em jogo.


O componente App exibe o componente MyInfo, a saída do elemento <div>

Aqui, exibimos o componente App na página. Nesse caso, o componente App decide exibir outro componente - MyInfo . E o componente MyInfo já exibe um determinado elemento JSX. Preste atenção à diferença entre os conceitos de "componente" e "elemento". Elementos são entidades que se transformam em código HTML comum. Portanto, no elemento apresentado na parte inferior do diagrama, uma simples tag <div> é usada, seu nome começa com uma letra minúscula, o que nos diz que esse é um elemento comum e não um dos componentes que criamos. Por outro lado, o nome MyInfo começa com uma letra maiúscula. Isso ajuda a entender que temos um componente.

Você pode ter ouvido falar que o DOM (Modelo de Objeto de Documento, geralmente chamado de "árvore"). O elemento raiz desta árvore é o elemento <html> . No nosso caso, o elemento raiz da árvore representada no diagrama é o componente App . As capacidades deste componente não se limitam à saída de outro componente, MyInfo no nosso caso. Pode, por exemplo, exibir outro componente, que é um "rodapé", na parte inferior da página. Digamos que esse componente será chamado AwesomeFooter .


O aplicativo Component gera dois componentes

Este componente, por sua vez, pode gerar um elemento <footer> que conterá o código HTML na parte inferior da página.

Se tivermos um "rodapé" de uma página, ela também poderá conter um "cabeçalho", que forma sua parte superior.


Aplicativo de componente gera três componentes

A parte superior da página é representada em nosso diagrama pelo componente AwesomeHeader . Esses nomes são dados a esses componentes para não confundi-los com os elementos. O componente AwesomeHeader , como o componente App , pode gerar não apenas a marcação JSX, mas também outros componentes. Por exemplo, pode ser um componente NavBar , que é uma barra de navegação, e um componente Logo que exibe um logotipo. E esses componentes já exibirão elementos comuns - como <img /> e <nav> .

Ao revisar esse esquema, você pode perceber que um aplicativo React, à medida que se desenvolve, pode se tornar cada vez mais complexo. E o que examinamos aqui é, de fato, um exemplo de uma estrutura de aplicativo extremamente simples.

Agora vamos criar um componente em nosso aplicativo de treinamento que será um "rodapé" da página.

Para fazer isso, crie, na mesma pasta que o arquivo index.js , um novo arquivo. Footer.js -o de Footer.js e coloque o seguinte código:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

Observe que o nome do componente funcional começa com uma letra maiúscula ( Footer ) e o nome do elemento (<footer> ) começa com uma letra pequena. Como já mencionado, isso ajuda a distinguir elementos de componentes.

Se você agora atualizar a página, a marcação gerada pelo componente Footer não será exibida na parte inferior. Isso é completamente esperado, pois para exibi-lo, é necessário fazer as alterações apropriadas no código do componente do App .

Ou seja, estamos falando sobre o fato de que, no código do arquivo do componente App , você precisa importar o componente Footer e criar uma instância dele. Edite o código para o arquivo App.js :

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

Agora, a página que os formulários de inscrição terão a aparência mostrada abaixo.


O componente App exibe a marcação formada por outro componente na parte inferior da página - Rodapé

Você pode perceber que agora na saída de código do componente App há uma estranha mistura de elementos JSX comuns com componentes. Seria muito melhor se o que o componente App exibir fosse como um sumário de um livro, para que ele contenha principalmente componentes. Ou seja, o ponto é que o código do componente seria algo como isto:

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Se o aplicativo tiver uma estrutura semelhante (no nosso caso, como os arquivos dos componentes Header e MainContent ainda não foram criados, o código não funcionará), a descrição dos elementos que formam as várias partes da página estará nos arquivos dos componentes correspondentes. Ao mesmo tempo, os componentes importados para o componente App podem conter outros componentes aninhados. Assim, estruturas extensas podem ser formadas, cujas dimensões são determinadas pelas necessidades de uma aplicação específica.

Aqui falamos sobre como trabalhar com componentes aninhados. Você pode muito bem tentar praticar o que acabou de aprender, trazendo o projeto, App.js arquivo App.js parece como mostrado acima, para a condição de trabalho.

Lição 10. Oficina. Componentes pai e filho

→ Original

▍Job

Crie um aplicativo React do zero. Exiba o componente raiz do App (definido em um arquivo separado) na página. Imprima os seguintes componentes dentro deste componente:

1. Navbar
2. MainContent
3. Footer

Os componentes exibidos pelo App devem ser descritos em arquivos separados, cada um deles deve gerar alguns elementos JSX.

▍Solução

Como base para resolver esse problema, é usado um projeto padrão criado usando as ferramentas create-react-app (se você não souber como criar esse projeto, dê uma olhada neste material). Ele usa o index.html padrão.

O código para o arquivo index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Aqui está o código para o arquivo App.js Observe que usaremos a pasta de components para armazenar os arquivos de componentes.

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

O código para o arquivo Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js arquivo MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

Código do arquivo Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

Você pode organizar o trabalho com os componentes como desejar. Ou seja, é possível, por exemplo, primeiro gravar todo o código necessário no arquivo App.js que importa os componentes e exibe suas instâncias e, em seguida, cria os arquivos de componentes. Você pode fazer o oposto - primeiro crie arquivos de componentes com código e trabalhe no arquivo App.js O mais importante é que você termine com um aplicativo em funcionamento.

É assim que o projeto se parece no VSCode.


Projeto no VSCode

E aqui está a página que esse aplicativo formou.


Página do aplicativo no navegador

Nosso aplicativo React funciona, mas o que é exibido na página parece completamente desinteressante. Você pode corrigir isso estilizando o conteúdo da página.

Sumário

Hoje falamos sobre componentes pai e filho. Da próxima vez, começaremos a trabalhar em nosso primeiro grande projeto de treinamento e falaremos sobre os elementos da página de estilo.

Caros leitores! Se você está envolvido neste curso, conte-nos como você realiza exercícios práticos. Ou seja - você escreve o código chamado "da cabeça" ou olha o texto da lição anterior? Ou talvez você esteja tentando encontrar o que esqueceu na Internet?