Tutorial Reagir Parte 3: Arquivos de Componentes, Estrutura do Projeto

Neste artigo, falaremos sobre arquivos de componentes e a estrutura dos projetos React.



→ 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: workshops de componentes de saúde
→ 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 8. Arquivos de Componentes, Estrutura dos Projetos React

→ Original

Arquivos de componente

Se assumirmos que você executou a tarefa da lição prática anterior usando o projeto padrão criado pelo create-react-app , agora ele usa o arquivo index.html da pasta public , cujo conteúdo é adequado para nós, e o arquivo index.js da pasta src , em que escrevemos o código. Em particular, o index.js agora se parece com isso:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Observe que o código do componente funcional MyInfo está contido neste arquivo. Como você se lembra, o React permite criar muitos componentes, esse é um dos seus pontos fortes. É claro que colocar o código de um grande número de componentes em um arquivo, embora tecnicamente viável, na prática, significa um grande inconveniente. Portanto, o código dos componentes, mesmo os pequenos, geralmente é organizado em arquivos separados. É essa abordagem que é recomendável seguir ao desenvolver aplicativos React.

Os arquivos de componentes recebem nomes correspondentes aos nomes dos componentes cujo código esses arquivos são armazenados. Coloque-os, no caso de create-react-app , na mesma pasta src que o arquivo index.js está index.js . Com essa abordagem, o arquivo com o componente MyInfo será nomeado MyInfo.js .

Crie um arquivo MyInfo.js e transfira o código do componente MyInfo para ele, removendo-o do index.js .

Nesta fase, o index.js ficará assim:

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

MyInfo.js código MyInfo.js será assim:

 function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } 

É assim que tudo parece no VSCode.


Transferir código do componente para um novo arquivo

Transferimos o código do componente do index.js , mas a estrutura que temos agora ainda está inoperante.

Primeiro, lembre-se para que serve o comando import React from "react" no index.js , mesmo que não React diretamente aqui. A razão para isso é que, sem a importação React , os mecanismos desta biblioteca, em particular, o JSX, não funcionarão. Graças a esse comando de importação, nas classes anteriores, pudemos passar o código JSX para o método ReactDOM.render() e ReactDOM.render() a marcação HTML criada com base na página. Tudo isso significa que no arquivo MyInfo.js também precisamos importar o React. Essa é uma prática comum para arquivos de componentes.

Em segundo lugar, precisamos garantir que a função MyInfo.js arquivo MyInfo.js possa ser usada em outros arquivos de aplicativos. Ele precisa ser exportado para isso. Aqui, os recursos do padrão ES6 são usados. Como resultado, o código MyInfo.js atualizado assume o seguinte formato:

 import React from "react" function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } export default MyInfo 

Agora vamos trabalhar no arquivo index.js . Ou seja, precisamos que o componente MyInfo esteja disponível neste arquivo. Você pode disponibilizá-lo no index.js importando-o.

E se eu tentar escrever um comando de importação de componente com base nos comandos de importação de react e react-dom no index.js ? Por exemplo, adicione o seguinte comando de importação ao arquivo:

 import MyInfo from "MyInfo.js" //  

O sistema, tendo visto esse comando, em particular, contando com o fato de não conter informações sobre o caminho relativo ao arquivo, procurará a dependência do projeto - o módulo com o nome especificado quando esse comando foi chamado (veja como instalar dependências em projetos criados usando create-react-app ; essas dependências podem ser importadas para os projetos React da mesma maneira que a biblioteca React foi importada). Ela não encontrará esse módulo, como resultado, o comando import não funcionará. Portanto, o comando de importação de arquivo deve ser reescrito com o caminho para ele. Nesse caso, estamos satisfeitos com a indicação do diretório atual ( ./ ) e o comando import terá o seguinte formato:

 import MyInfo from "./MyInfo.js" //  

Além disso, se falarmos sobre o comando import , é importante considerar que isso implica que os arquivos JavaScript sejam importados com sua ajuda. Ou seja, a extensão .js pode ser completamente removida e o comando import , adquirido o formulário mostrado abaixo, não perderá sua funcionalidade.

 import MyInfo from "./MyInfo" //  

Geralmente, esses comandos de importação de arquivo JS são gravados dessa maneira.

Aqui está o index.js completo do arquivo index.js .

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

▍ Estrutura do projeto

Com o crescimento em tamanho e complexidade dos projetos React, é muito importante manter sua estrutura em boas condições. No nosso caso, embora nosso projeto agora seja pequeno, é possível, na pasta src , criar a pasta components , projetada para armazenar arquivos com código de componente.

Crie uma pasta e mova o arquivo MyInfo.js para ela. Depois disso, você precisará editar o comando de importação deste arquivo em index.js .

Nomeadamente, agora o caminho para MyInfo.js indica que esse arquivo está localizado no mesmo local que index.js , mas, na verdade, esse arquivo está localizado na pasta de components localizada na mesma pasta que index.js . Como resultado, o caminho relativo para ele no index.js ficará assim: ./components/MyInfo . Aqui está o código index.js atualizado:

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

E aqui está como tudo fica no VSCode.


Uma pasta para armazenar componentes e importar um componente desta pasta para o VSCode

De fato, uma pasta de components , projetada para hospedar código para todos os componentes, é um exemplo de uma estrutura de projeto extremamente simplificada. Em projetos reais, para garantir a conveniência de trabalhar com um grande número de entidades, estruturas de pastas muito mais complexas são usadas. O que exatamente essas estruturas serão depende das necessidades do projeto e das preferências pessoais do programador.

É recomendável experimentar tudo o que você aprendeu hoje. Por exemplo, você pode tentar mover o arquivo MyInfo.js para alguma pasta e ver o que MyInfo.js ; pode renomeá-lo, alterando algum código nele. Quando, durante o curso de tais experiências, a operação correta do projeto for interrompida - será útil entender o problema e trazer o projeto de volta à condição de trabalho.

Sumário

Nesta lição, falamos sobre como formatar o código do componente como arquivos separados, exportar e importar o código usando o ES6 e a estrutura dos projetos React. Na próxima vez, continuaremos a nos familiarizar com os recursos dos componentes.

Caros leitores! Pedimos aos desenvolvedores experientes do React que compartilhem idéias com os novatos sobre a organização da estrutura do projeto.