ℹ️ 🕘 🍋 Tutorial Reagir Parte 2: Componentes Funcionais 🗃️ 🍢 🏘️

Em um de nossos artigos anteriores, perguntamos se é aconselhável fazer uma série de publicações tradicionais com base neste curso do React. Você apoiou a nossa ideia. Portanto, hoje apresentamos a sua atenção a continuação do curso. Aqui falamos sobre componentes funcionais.

→ 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 6. Componentes Funcionais

→ Original

Na lição prática anterior, falamos sobre o fato de que não é necessário colocar todo o código JSX que forma os elementos HTML no argumento do método ReactDOM.render() . No nosso caso, estamos falando de uma lista com marcadores, descrita abaixo.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

Imagine o que você precisa exibir, usando a mesma abordagem, uma página da Web inteira na qual existem centenas de elementos. Se isso for feito, será praticamente impossível manter esse código normalmente. Quando falamos sobre os motivos da popularidade do React, um deles foi o suporte a componentes reutilizáveis nesta biblioteca. Agora, falaremos sobre como criar componentes funcionais do React.

Esses componentes são chamados de "funcionais" devido ao fato de criá-los através da construção de funções especiais.

Crie uma nova função e atribua o nome MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

O nome da função é criado exatamente pelo motivo pelo qual o esquema de nomeação das funções do construtor é usado aqui. Seus nomes (de fato - os nomes dos componentes) são escritos em estilo camelo - as primeiras letras das palavras em que são compostas são escritas em letras maiúsculas, incluindo a primeira letra da primeira palavra. Você deve seguir rigorosamente esta convenção de nomenclatura para essas funções.

Os componentes funcionais são organizados de maneira bastante simples. Ou seja, no corpo da função, deve haver um comando que retorne o código JSX, que representa o componente correspondente.

No nosso exemplo, é suficiente pegar o código com marcadores e organizar o retorno desse código a partir do componente funcional. Aqui está o que pode parecer:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> }

E, embora neste caso tudo funcione conforme o esperado, ou seja, o comando return retornará todo esse código, é recomendável colocar construções semelhantes entre parênteses e aplicar outra convenção adotada no React ao formatar o código do programa. Consiste em colocar elementos individuais em linhas separadas e alinhá-los de acordo. Como resultado da aplicação das idéias acima, o código do nosso componente funcional ficará assim:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) }

Com essa abordagem, a marcação retornada do componente é muito semelhante ao código HTML comum.

Agora, no método ReactDOM.render() , você pode criar uma instância do nosso componente funcional passando-o para este método como o primeiro argumento e colocando-o em uma tag JSX.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") )

Você pode perceber que uma tag de fechamento automático é usada aqui. Em alguns casos, quando você precisa criar componentes que tenham uma estrutura mais complexa, projetos similares são criados de maneira diferente, mas, por enquanto, usaremos exatamente essas tags de fechamento automático.

Se você atualizar a página formada pelo código acima, sua aparência será a mesma de antes da marcação da lista com marcadores no componente funcional.

A marcação retornada pelos componentes funcionais obedece às mesmas regras que consideramos ao aplicar o método ReactDOM.render() ao primeiro parâmetro. Ou seja - é impossível que ele contenha elementos JSX que se seguem um após o outro. Tentar colocar qualquer outro elemento após o elemento <ul> no exemplo anterior, digamos - <ol> , resultará em um erro. Você pode evitar esse problema, por exemplo, simplesmente agrupando tudo o que retorna um componente funcional em um elemento <div> .

Talvez você já tenha começado a sentir que oportunidades poderosas o uso de componentes funcionais nos oferece. Em particular, estamos falando sobre a criação de nossos próprios componentes que contêm fragmentos de código JSX, que é uma descrição da marcação HTML que aparece na página da web. Tais componentes podem ser dispostos juntos.

Em nosso exemplo, há um componente que exibe uma lista HTML simples, mas, à medida que criamos aplicativos cada vez mais complexos, desenvolvemos componentes que exibem outros componentes que criamos. Como resultado, tudo isso se transformará em elementos HTML comuns, mas às vezes, para a formação desses elementos, você pode precisar de dezenas de seus próprios componentes.

Como resultado, quando criarmos mais e mais componentes, os colocaremos em arquivos separados, mas, por enquanto, é importante que você domine o que acabamos de discutir, acostume-se aos componentes funcionais. Durante o curso, você criará estruturas de arquivos cada vez mais complexas.

Nesta lição, examinamos o básico dos componentes funcionais e, na próxima, aplicamos o conhecimento adquirido na prática.

Lição 7. Oficina. Componentes funcionais

→ Original

▍Job

Prepare um projeto básico do React.
Crie um componente funcional MyInfo que forma os seguintes elementos HTML:
1. Elemento <h1> com o seu nome.
2. Um parágrafo de texto (elemento <p> ) contendo sua história curta sobre você.
3. Uma lista marcada ( <ul> ) ou numerada ( <ol> ), com uma lista dos três lugares que você gostaria de visitar.
Liste a instância do componente MyInfo na página da web.

Task Tarefa adicional

Estilize os elementos da página aprendendo sobre como fazer você mesmo (pesquise no Google). Note-se que falaremos mais sobre componentes de estilo neste curso.

Nota: bloco dobrável

▍Solução

Aqui, estamos satisfeitos com a mesma página HTML que usamos anteriormente. Um arquivo com o código React também parecerá bastante padrão. Nomeadamente, importamos as bibliotecas para ele, criamos o esqueleto do componente funcional MyInfo e chamamos o método render() do objeto ReactDOM , passando para ele o componente a ser exibido na página e um link para o elemento da página no qual esse componente deve ser exibido. Nesta fase, o código ficará assim:

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

Agora você precisa retornar o código JSX do MyInfo que gera a marcação HTML de acordo com a tarefa. Aqui está o código completo da solução.

 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 a construção retornada de MyInfo está entre parênteses e que os elementos a serem exibidos estão dentro do elemento <div> auxiliar.

Sumário

Neste artigo, apresentamos os componentes funcionais do React. Da próxima vez, falaremos sobre arquivos de componentes e a estrutura dos projetos React.

Caros leitores! Se você fizer este curso, conte-nos sobre o ambiente em que você realiza os exercícios.