📘 ReactJS – Estrutura de Projeto, Componentes e Props

Introdução

O ReactJS permite construir interfaces de usuário a partir de componentes, ou seja, partes menores da interface que podem ser organizadas, combinadas e reutilizadas na construção de uma aplicação.

Antes de desenvolver aplicações mais complexas, é importante compreender como um projeto ReactJS é estruturado e como seus diferentes arquivos se relacionam.

Neste capítulo, utilizaremos uma aplicação simples de Login para explorar a organização básica de um projeto ReactJS e compreender como diferentes componentes podem ser utilizados em conjunto.

Ao longo do exemplo, serão apresentados componentes construídos de duas formas:

Componentes de Classe (Class Components);
Componentes Funcionais (Function Components).

Também será apresentado o conceito de Props (Properties), utilizado para transmitir informações entre componentes.

O exemplo permitirá acompanhar o fluxo da aplicação desde o arquivo index.html até os componentes responsáveis pela construção da interface.

🎯 Objetivos de Aprendizagem

Ao concluir este capítulo, você deverá ser capaz de:

compreender a estrutura básica de um projeto ReactJS;
identificar o papel do arquivo index.html;
compreender a função do arquivo main.jsx;
identificar o componente raiz App;
compreender o conceito de componentização;
criar e utilizar componentes React;
diferenciar Componentes de Classe e Componentes Funcionais;
compreender a utilização de JSX;
utilizar fragmentos (<> </>) para agrupar elementos;
compreender o funcionamento de import e export;
compreender o conceito de Props;
transmitir informações de um componente pai para um componente filho;
acessar Props utilizando this.props em componentes de classe;
utilizar desestruturação de Props em componentes funcionais;
compreender como diferentes componentes podem ser combinados para construir uma interface.

Estrutura do Projeto ReactJS

Para compreender como os arquivos de uma aplicação ReactJS trabalham em conjunto, considere a estrutura utilizada neste capítulo.

Na raiz do projeto temos o arquivo:

index.html

O arquivo index.html carrega:

src/main.jsx

O arquivo main.jsx, por sua vez, utiliza o componente:

src/App.jsx

O componente App.jsx utiliza o componente:

components/props/Login.jsx

Finalmente, Login.jsx utiliza outros componentes responsáveis pela construção da interface:

Label.jsx
Labelln.jsx
InputText.jsx
Button.jsx

Podemos representar esse fluxo da seguinte maneira:

index.html
    │
    ▼
main.jsx
    │
    ▼
App.jsx
    │
    ▼
Login.jsx
    │
    ├── Label.jsx
    │
    ├── Labelln.jsx
    │
    ├── InputText.jsx
    │
    └── Button.jsx

Essa organização demonstra uma das principais características do ReactJS: a construção da interface a partir da composição de componentes.

Do `index.html` aos Componentes

A aplicação começa pelo arquivo:

index.html

Nele existe um elemento que servirá como ponto de montagem da aplicação React:

<div id="root"></div>

O mesmo arquivo carrega o módulo:

<script type="module" src="/src/main.jsx"></script>

A partir desse ponto, o controle da construção da interface passa para os arquivos JavaScript/JSX da aplicação.

O arquivo main.jsx inicializa o React e solicita a renderização do componente:

<App />

O componente App, por sua vez, utiliza:

<Login />

Já o componente Login combina componentes menores para construir a interface.

Portanto, existe uma sequência de composição:

HTML
 │
 ▼
React
 │
 ▼
App
 │
 ▼
Login
 │
 ▼
Componentes da Interface

Componentização

Um dos conceitos centrais trabalhados neste capítulo é a componentização.

Em vez de construir toda a interface em um único arquivo, podemos dividi-la em partes menores.

No exemplo apresentado, a tela de Login utiliza quatro componentes:

Componente	Responsabilidade
`Label`	Exibir pequenos textos utilizados como rótulos.
`Labelln`	Exibir textos utilizados na composição da interface.
`InputText`	Criar campos de entrada de texto.
`Button`	Criar um botão reutilizável.

Esses componentes são posteriormente reunidos por:

Login.jsx

Assim:

                Login
                  │
        ┌─────────┼─────────┐
        │         │         │
      Label    InputText   Button
        │
     Labelln

O diagrama representa conceitualmente a composição da interface. Os componentes Label, Labelln, InputText e Button são utilizados por Login para construir a tela.

Essa separação permite que os componentes sejam reutilizados em diferentes partes de uma aplicação.

Componentes de Classe e Componentes Funcionais

O exemplo também apresenta duas formas de construção de componentes React.

Componentes de Classe

Os componentes Label e Button são implementados utilizando classes.

A estrutura básica segue o padrão:

class Componente extends React.Component {
    render() {
        return (
            ...
        )
    }
}

Nesse modelo, o componente herda de:

React.Component

e utiliza o método:

render()

para definir o conteúdo que será apresentado.

Componentes Funcionais

Os componentes Labelln, InputText, Login e App são implementados utilizando funções.

A estrutura básica é:

function Componente() {
    return (
        ...
    )
}

Nesse caso, uma função JavaScript retorna o JSX que representa a interface do componente.

Ao longo do capítulo, poderemos observar as diferenças entre essas duas formas de implementação.

Introdução às Props

Além da componentização, o exemplo introduz o conceito de Props.

Props são informações transmitidas de um componente para outro.

Considere:

<Label texto="Usuário: " />

Nesse exemplo, o componente Label recebe uma propriedade chamada:

texto

com o valor:

Usuário:

Outro exemplo aparece no componente InputText:

<InputText placeholder="user..." />

Nesse caso, é transmitida a prop:

placeholder

Também podemos transmitir informações ao componente Button:

<Button valor="Logar" />

Portanto:

Componente Pai
      │
      │ Props
      ▼
Componente Filho

As Props permitem utilizar um mesmo componente com diferentes informações, favorecendo sua reutilização.

📌 Primeiros Conceitos-Chave

Conceito	Explicação
ReactJS	Biblioteca utilizada para construção de interfaces a partir de componentes.
Componente	Parte da interface que pode ser organizada e reutilizada.
Componentização	Divisão da interface em componentes menores.
Composição	Utilização de componentes dentro de outros componentes.
Componente Raiz	Componente inicial utilizado para organizar a aplicação. No exemplo, `App`.
JSX	Sintaxe utilizada pelos componentes para representar a interface.
Class Component	Componente implementado utilizando uma classe que herda de `React.Component`.
Function Component	Componente implementado utilizando uma função.
Props	Propriedades utilizadas para transmitir informações para componentes.
`import`	Permite utilizar em um arquivo recursos definidos em outros módulos.
`export`	Permite disponibilizar um recurso para utilização em outros módulos.

💡 Dicas do Professor

Observe o fluxo da aplicação.

Antes de analisar cada componente isoladamente, procure compreender a sequência index.html → main.jsx → App.jsx → Login.jsx. Ela ajuda a entender como a aplicação é inicializada e como a interface é construída.

Pense nos componentes como peças de uma interface.

Label, InputText e Button possuem responsabilidades específicas. O componente Login combina essas peças para formar uma interface maior.

Props tornam os componentes reutilizáveis.

O mesmo componente Label pode apresentar diferentes textos simplesmente recebendo valores diferentes por meio da prop texto.

Observe as duas formas de criar componentes.

Neste capítulo são utilizados tanto componentes de classe quanto componentes funcionais. Compare suas estruturas durante os próximos exemplos.

Arquivo `index.html`

O arquivo index.html representa o ponto inicial da aplicação no navegador.

Embora a interface seja construída pelos componentes React, ainda é necessário um documento HTML responsável por fornecer a estrutura inicial da página e indicar onde a aplicação será montada.

No projeto utilizado neste capítulo, dois elementos são especialmente importantes:

<div id="root"></div>

<script type="module" src="/src/main.jsx"></script>

O primeiro define o local no qual a aplicação React será inserida.

O segundo carrega o arquivo main.jsx, responsável por iniciar a aplicação.

O fluxo inicial pode ser representado por:

index.html
    │
    ├── <div id="root">
    │        ▲
    │        │ montagem da aplicação
    │
    └── main.jsx
             │
             ▼
           React

💻 Código Completo

Arquivo: index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

📘 Comentários e Explicações Linha a Linha

Linhas 01–02 — Estrutura inicial do documento

<!doctype html>
<html lang="en">

A primeira linha:

<!doctype html>

indica que o documento utiliza HTML5.

Em seguida:

<html lang="en">

inicia o documento HTML e define o idioma da página por meio do atributo lang.

O elemento <html> funciona como elemento principal do documento e envolve as demais estruturas da página.

Linhas 03–08 — Cabeçalho da página

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React</title>
</head>

O elemento:

<head>

contém informações relacionadas à configuração e aos metadados da página.

A instrução:

<meta charset="UTF-8" />

define a codificação de caracteres utilizada pelo documento.

Em seguida:

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

define o ícone utilizado pela página.

A configuração:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

orienta o navegador sobre a forma como a página deverá ser apresentada em diferentes tamanhos de tela.

Por fim:

<title>Vite + React</title>

define o título apresentado pelo navegador para a página.

Linhas 09–12 — Corpo da página e inicialização da aplicação

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

O elemento:

<body>

representa o corpo da página.

Dentro dele encontramos:

<div id="root"></div>

Esse elemento possui um papel fundamental na aplicação React.

Ele será utilizado como ponto de montagem da interface.

Inicialmente, o elemento está vazio:

<div id="root"></div>

Posteriormente, o React localizará esse elemento por meio de seu identificador:

root

e utilizará esse espaço para inserir a interface construída pelos componentes.

A próxima instrução:

<script type="module" src="/src/main.jsx"></script>

carrega o arquivo:

/src/main.jsx

O atributo:

type="module"

indica que o arquivo JavaScript será tratado como um módulo, permitindo trabalhar com recursos como import e export.

Assim, podemos representar a relação entre os dois elementos como:

index.html
     │
     ├── #root
     │     ▲
     │     │
     │   React
     │     │
     │
     └── main.jsx

O index.html disponibiliza o elemento root, enquanto main.jsx será responsável por iniciar o React e utilizar esse elemento para montar a aplicação.

Linha 13 — Finalização do documento

</html>

A última linha encerra o elemento <html> iniciado no começo do documento.

Com isso, temos a estrutura completa do documento HTML que servirá como ponto inicial para a aplicação React.

O Papel do `root`

O elemento:

<div id="root"></div>

estabelece a ligação entre o documento HTML e a aplicação React.

Podemos pensar no root como um ponto de entrada da interface React dentro da página HTML.

O fluxo pode ser representado da seguinte forma:

index.html
     │
     ▼
<div id="root">
     ▲
     │
     │ React monta a aplicação
     │
main.jsx
     │
     ▼
<App />

No próximo arquivo estudado, main.jsx, veremos como o React localiza exatamente esse elemento.

O Papel de `type="module"`

A instrução:

<script type="module" src="/src/main.jsx"></script>

não apenas carrega um arquivo JavaScript.

O atributo:

type="module"

indica que o arquivo será tratado como um módulo.

Isso é importante porque os arquivos utilizados no projeto trabalham com instruções como:

import

export

Por exemplo, main.jsx poderá importar o componente App:

import App from './App.jsx'

A organização em módulos permite separar a aplicação em diferentes arquivos e estabelecer explicitamente as dependências entre eles.

📌 Conceitos-Chave Envolvidos

Conceito	Explicação
`index.html`	Documento HTML inicial utilizado pela aplicação.
HTML5	Versão do HTML indicada por `<!doctype html>`.
`<head>`	Contém metadados e configurações do documento.
`<body>`	Contém a estrutura utilizada na apresentação da página.
`root`	Elemento utilizado como ponto de montagem da aplicação React.
`id`	Identificador que permite localizar um elemento no documento.
`<script>`	Elemento utilizado para carregar o arquivo `main.jsx`.
`type="module"`	Indica que o JavaScript será tratado como módulo.
ES Modules	Sistema de módulos que permite utilizar `import` e `export`.
`main.jsx`	Arquivo responsável por iniciar a aplicação React no exemplo.

💡 Dicas do Professor

O React não elimina a necessidade do index.html.

O navegador ainda precisa carregar inicialmente um documento HTML. A aplicação React é posteriormente montada dentro desse documento.

Observe que o root começa vazio.

Não escrevemos manualmente a interface da aplicação dentro de <div id="root"></div>. Ela será construída pelos componentes React.

O identificador root será utilizado novamente.

Ao estudar main.jsx, observe como o mesmo nome definido em id="root" será utilizado para localizar o ponto de montagem da aplicação.

type="module" está relacionado à modularização do projeto.

Ele permite que o arquivo carregado trabalhe com a organização modular utilizada pelos arquivos da aplicação.

Arquivo `main.jsx`

Depois que o navegador carrega o index.html, o arquivo main.jsx é responsável por inicializar a aplicação React.

Na parte anterior, vimos que o index.html possui:

<div id="root"></div>

e carrega:

<script type="module" src="/src/main.jsx"></script>

Agora podemos compreender como main.jsx utiliza esse elemento root para montar a aplicação.

O fluxo é:

index.html
    │
    ▼
main.jsx
    │
    ├── localiza #root
    │
    ├── cria a raiz React
    │
    └── renderiza <App />
              │
              ▼
           App.jsx

💻 Código Completo

Arquivo: /src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root'))
  .render(
    <StrictMode>
      <App />
    </StrictMode>,
  )

📘 Comentários e Explicações Linha a Linha

Linhas 01–04 — Importações iniciais

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

As quatro primeiras linhas definem os recursos necessários para inicializar a aplicação.

Na primeira linha:

import { StrictMode } from 'react'

é importado o StrictMode da biblioteca React.

O StrictMode é utilizado durante o desenvolvimento para auxiliar na identificação de possíveis problemas e incentivar a utilização de boas práticas.

Na segunda linha:

import { createRoot } from 'react-dom/client'

é importada a função createRoot.

Essa função permite criar a raiz React que será associada a um elemento existente no documento HTML.

Na terceira linha:

import './index.css'

é importado o arquivo que contém os estilos globais da aplicação.

Diferentemente das demais importações, não estamos importando uma função ou componente para uma variável. O arquivo CSS é carregado para que seus estilos sejam aplicados à aplicação.

Finalmente:

import App from './App.jsx'

importa o componente App.

Esse componente será utilizado como componente raiz da interface.

Linha 05 — Separação entre importações e inicialização

A linha 05 está em branco.

Ela não possui efeito na execução do programa, mas ajuda a separar visualmente:

Importações
     │
     ▼
Inicialização da aplicação

Essa organização contribui para tornar o código mais legível.

Linha 06 — Criação da raiz React

createRoot(document.getElementById('root'))

Essa linha estabelece a ligação entre o React e o elemento definido anteriormente no index.html.

Primeiro é executado:

document.getElementById('root')

Esse comando procura no documento HTML um elemento cujo id seja:

root

No index.html, encontramos exatamente:

<div id="root"></div>

Portanto:

index.html                         main.jsx

<div id="root"></div>    ◄────    document.getElementById('root')

O elemento encontrado é então fornecido para:

createRoot(...)

Assim, o React cria uma raiz associada ao elemento HTML.

Podemos representar esse processo como:

document
    │
    ▼
getElementById('root')
    │
    ▼
<div id="root">
    │
    ▼
createRoot(...)
    │
    ▼
Raiz React

Linhas 07–11 — Renderização da aplicação

.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Depois que a raiz React é criada, o método:

.render(...)

define o conteúdo que será renderizado.

Dentro dele encontramos:

<StrictMode>
  <App />
</StrictMode>

O componente:

<App />

representa a interface principal da aplicação.

Ele está envolvido por:

<StrictMode>

que ativa verificações adicionais durante o desenvolvimento.

O resultado conceitual é:

<div id="root">
       │
       ▼
   StrictMode
       │
       ▼
      App

A partir desse momento, o React passa a controlar a interface apresentada dentro do elemento root.

Relação entre `index.html` e `main.jsx`

Agora podemos observar a ligação completa entre os dois primeiros arquivos estudados.

No index.html:

<div id="root"></div>

é criado o ponto de montagem.

Também no index.html:

<script type="module" src="/src/main.jsx"></script>

é carregado o arquivo responsável por inicializar o React.

Em main.jsx:

document.getElementById('root')

localiza esse elemento.

Em seguida:

createRoot(...)

cria a raiz React.

Finalmente:

.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

renderiza o componente App.

O fluxo completo é:

index.html
    │
    ├── cria <div id="root">
    │
    └── carrega main.jsx
                 │
                 ▼
        getElementById('root')
                 │
                 ▼
            createRoot()
                 │
                 ▼
              render()
                 │
                 ▼
           <StrictMode>
                 │
                 ▼
              <App />

`StrictMode`

O StrictMode é um recurso do React utilizado para auxiliar o desenvolvimento.

Ele é importado por:

import { StrictMode } from 'react'

e utilizado envolvendo o componente principal:

<StrictMode>
  <App />
</StrictMode>

No contexto do exemplo, sua função é ajudar a identificar possíveis problemas durante o desenvolvimento e reforçar boas práticas.

O StrictMode não representa um elemento visual da interface.

Ou seja:

StrictMode
    │
    ├── auxilia o desenvolvimento
    ├── realiza verificações adicionais
    └── envolve <App />

`createRoot()`

A função:

createRoot()

é responsável por criar a raiz da aplicação React.

No exemplo:

createRoot(document.getElementById('root'))

o argumento fornecido é o elemento HTML no qual a aplicação deverá ser montada.

Podemos interpretar a instrução em duas etapas:

1. Encontrar o elemento HTML

document.getElementById('root')

              │
              ▼

2. Criar a raiz React nesse elemento

createRoot(...)

Depois de criada a raiz, utilizamos:

.render(...)

para definir o que deverá ser apresentado.

O Componente Raiz `App`

A instrução:

import App from './App.jsx'

importa o componente App.

Posteriormente:

<App />

utiliza esse componente dentro da interface.

O App funciona como componente raiz da aplicação apresentada neste exemplo.

Isso significa que ele será responsável por iniciar a composição dos demais componentes da interface.

A hierarquia estudada até este momento é:

index.html
    │
    ▼
main.jsx
    │
    ▼
<App />

Na próxima parte, veremos que App utiliza outro componente:

<Login />

ampliando a hierarquia:

index.html
    │
    ▼
main.jsx
    │
    ▼
App.jsx
    │
    ▼
Login.jsx

CSS Global

A instrução:

import './index.css'

carrega o arquivo de estilos globais utilizado pela aplicação.

Nesse modelo de projeto, um arquivo CSS pode ser importado diretamente pelo JavaScript/JSX.

Assim:

main.jsx
    │
    ├── index.css
    │
    └── App.jsx

O index.css pode definir estilos básicos que serão utilizados pela aplicação.

Conforme o projeto cresce, outros arquivos de estilo podem ser organizados juntamente com seus respectivos componentes.

📌 Conceitos-Chave Envolvidos

Conceito	Explicação
`main.jsx`	Arquivo responsável pela inicialização da aplicação React no exemplo.
`StrictMode`	Recurso utilizado para auxiliar na identificação de problemas durante o desenvolvimento.
`createRoot()`	Cria uma raiz React associada a um elemento do documento HTML.
`document.getElementById()`	Localiza um elemento HTML utilizando seu identificador.
`root`	Identificador do elemento utilizado como ponto de montagem da aplicação.
`.render()`	Define o conteúdo que será renderizado pela raiz React.
`App`	Componente raiz utilizado pela aplicação.
`<App />`	Utilização do componente `App` em JSX.
`index.css`	Arquivo utilizado para os estilos globais da aplicação.
`import`	Permite utilizar recursos definidos em outros módulos.
JSX	Sintaxe utilizada para representar componentes e elementos da interface.

💡 Dicas do Professor

Relacione root nos dois arquivos.

O id="root" definido em index.html deve corresponder ao identificador procurado por document.getElementById('root') em main.jsx.

Não confunda a raiz HTML com o componente raiz.

<div id="root"> é o elemento HTML utilizado como ponto de montagem. App, por sua vez, é o componente React principal renderizado nesse ponto.

Observe a sequência createRoot() → .render().

Primeiro o React cria uma raiz associada ao elemento HTML. Depois define qual componente deverá ser renderizado nessa raiz.

<App /> é um componente, não uma tag HTML.

Em JSX, componentes React são utilizados de maneira semelhante às tags HTML. A inicial maiúscula ajuda a diferenciá-los dos elementos HTML tradicionais.

O StrictMode é utilizado durante o desenvolvimento.

Ele auxilia na identificação de situações que merecem atenção, mas não representa nenhum elemento visual da página.

Componente `App.jsx`

Depois que o arquivo main.jsx inicializa o React, o componente App passa a representar o componente raiz da interface.

Na parte anterior, vimos a seguinte instrução:

<App />

Ela solicita ao React que renderize o componente definido no arquivo:

/src/App.jsx

Neste exemplo, App possui uma responsabilidade simples: utilizar o componente Login.

A hierarquia passa a ser:

index.html
    │
    ▼
main.jsx
    │
    ▼
App.jsx
    │
    ▼
Login.jsx

Essa relação introduz um conceito importante no desenvolvimento com React: componentes podem utilizar outros componentes para construir interfaces maiores.

💻 Código Completo

Arquivo: /src/App.jsx

import Login from "./components/props/Login.jsx"

function App() {
  return (
    <>
      <Login />
    </>
  )
}

export default App

📘 Comentários e Explicações Linha a Linha

import Login from "./components/props/Login.jsx"

A primeira linha importa o componente Login.

O caminho:

./components/props/Login.jsx

indica a localização do arquivo em relação ao arquivo App.jsx.

A instrução:

import

permite utilizar dentro de App um componente definido em outro arquivo.

Podemos representar essa dependência como:

App.jsx
   │
   │ import
   ▼
Login.jsx

Essa separação é uma característica importante da componentização.

Em vez de implementar toda a interface diretamente em App.jsx, podemos dividir a aplicação em componentes menores e utilizá-los conforme necessário.

Linha 02 — Separação entre importação e componente

A linha 02 está em branco.

Ela separa visualmente:

Importação
    │
    ▼
Definição do componente

Embora não altere o funcionamento da aplicação, essa organização melhora a legibilidade do código.

Linhas 03–09 — Definição do componente `App`

function App() {
  return (
    <>
      <Login />
    </>
  )
}

A instrução:

function App() {

declara uma função JavaScript chamada App.

No React, uma função que retorna uma interface utilizando JSX pode ser utilizada como um Function Component.

Portanto:

Função JavaScript
       │
       │ retorna JSX
       ▼
Function Component

O nome:

App

começa com letra maiúscula.

Essa convenção é importante para diferenciar componentes React de elementos HTML tradicionais.

Por exemplo:

<div>

representa um elemento HTML.

Enquanto:

<App />

representa um componente React.

Linhas 04–08 — Retorno da interface com JSX

return (
  <>
    <Login />
  </>
)

A instrução:

return

define o conteúdo que o componente deverá apresentar.

O conteúdo retornado utiliza JSX.

JSX permite escrever estruturas semelhantes ao HTML dentro do código JavaScript.

Neste exemplo, o conteúdo principal retornado por App é:

<Login />

Portanto, quando o React renderiza:

<App />

o componente App solicita a renderização de:

<Login />

A relação pode ser representada por:

<App />
   │
   ▼
<Login />

Linhas 05 e 07 — Utilização de Fragmento

<>
  <Login />
</>

Os símbolos:

<>

</>

representam um Fragmento (Fragment) do React.

Um fragmento permite agrupar elementos JSX sem adicionar um novo elemento HTML ao DOM.

Por exemplo, poderíamos utilizar:

<div>
  <Login />
</div>

Entretanto, nesse caso seria criado um elemento <div> adicional na estrutura HTML.

Com:

<>
  <Login />
</>

os elementos podem ser agrupados sem criar essa <div> adicional.

Conceitualmente:

Fragment
   │
   └── Login

O fragmento organiza o retorno JSX, mas não representa uma <div> adicional na interface.

<Login />

Essa instrução utiliza o componente Login importado na primeira linha.

Observe a relação:

import Login from "./components/props/Login.jsx"

<Login />

Primeiro, o componente é importado.

Depois, ele pode ser utilizado dentro do JSX.

Podemos representar esse processo como:

Login.jsx
    │
    │ export
    ▼
App.jsx
    │
    │ import
    ▼
<Login />

O componente Login será responsável por organizar outros componentes menores utilizados na construção da tela.

Linha 10 — Separação antes da exportação

A linha 10 está em branco.

Ela separa a definição do componente de sua exportação.

A organização do arquivo fica, portanto:

Importação
    │
    ▼
Componente
    │
    ▼
Exportação

Linha 11 — Exportação do componente

export default App

A última linha exporta o componente App.

A instrução:

export default

indica que App representa a exportação padrão desse módulo.

Isso permite que outro arquivo utilize:

import App from './App.jsx'

Foi exatamente o que ocorreu no arquivo main.jsx.

Assim:

App.jsx
   │
   │ export default App
   ▼
main.jsx
   │
   │ import App
   ▼
<App />

O mecanismo de import e export permite organizar a aplicação em diferentes arquivos sem perder a relação entre eles.

Function Component

O componente App é implementado como uma função:

function App() {
  return (
    ...
  )
}

Essa forma de construção é denominada Function Component.

Um componente funcional pode receber informações e retornar JSX para definir sua representação na interface.

Neste primeiro exemplo, App possui uma estrutura bastante simples:

App
 │
 └── retorna
        │
        ▼
      Login

Posteriormente, outros componentes poderão apresentar estruturas mais elaboradas.

JSX

No componente App, encontramos:

<Login />

Essa sintaxe faz parte do JSX.

O JSX permite representar elementos e componentes de maneira declarativa.

Por exemplo, elementos HTML podem aparecer como:

<div>
  <p>Olá!</p>
</div>

Enquanto componentes React podem aparecer como:

<Login />

Uma diferença visual importante é a utilização da letra inicial maiúscula nos componentes:

<div>       → elemento HTML

<Login />   → componente React

Essa distinção será observada ao longo de todo o projeto.

Fragmentos

Quando um componente precisa agrupar elementos, podemos utilizar um fragmento:

<>
  ...
</>

No exemplo:

<>
  <Login />
</>

o fragmento envolve o componente Login.

Uma das principais características desse recurso é permitir o agrupamento sem criar um elemento adicional no DOM.

Compare:

<div>
  <Login />
</div>

com:

<>
  <Login />
</>

No primeiro caso, existe uma <div> adicional.

No segundo, o fragmento realiza apenas o agrupamento necessário ao JSX.

Composição de Componentes

Até este momento, já temos dois componentes relacionados:

App
 │
 ▼
Login

App não precisa conhecer todos os detalhes internos de Login.

Ele apenas utiliza:

<Login />

Esse princípio permite construir interfaces maiores por meio da combinação de componentes menores.

A estrutura da aplicação começa a assumir a seguinte organização:

                    index.html
                        │
                        ▼
                     main.jsx
                        │
                        ▼
                      App
                        │
                        ▼
                      Login
                        │
             ┌──────────┼──────────┐
             │          │          │
           Label    InputText    Button
             │
          Labelln

Nos próximos componentes veremos como Login é construído a partir dessas partes menores.

Relação entre `main.jsx` e `App.jsx`

Podemos agora conectar os conceitos das duas partes.

Em main.jsx:

import App from './App.jsx'

carrega o componente.

Depois:

<App />

solicita sua renderização.

Em App.jsx:

export default App

disponibiliza o componente para outros módulos.

Assim:

App.jsx
   │
   │ export default
   ▼
main.jsx
   │
   │ import
   ▼
<App />
   │
   ▼
<Login />

Essa relação entre exportação, importação e composição será repetida diversas vezes durante a construção da aplicação.

📌 Conceitos-Chave Envolvidos

Conceito	Explicação
`App`	Componente raiz da interface utilizado no exemplo.
Function Component	Componente React implementado utilizando uma função.
JSX	Sintaxe utilizada para representar a interface dentro do código JavaScript.
`<App />`	Utilização do componente `App`.
`<Login />`	Utilização do componente `Login` dentro de `App`.
Fragmento	Permite agrupar elementos JSX sem adicionar um elemento extra ao DOM.
`<> </>`	Sintaxe simplificada utilizada para criar um fragmento.
Componentização	Organização da interface em componentes menores.
Composição	Construção de um componente utilizando outros componentes.
`import`	Permite utilizar um recurso exportado por outro módulo.
`export default`	Define a exportação padrão de um módulo.
Componente Raiz	Componente principal a partir do qual a interface é organizada.

💡 Dicas do Professor

Observe a letra inicial dos componentes.

App e Login começam com letra maiúscula. Essa característica permite diferenciá-los visualmente de elementos HTML como div, input e button.

Importar não significa renderizar.

A instrução import Login ... apenas torna o componente disponível no arquivo. A utilização <Login /> é que o inclui na interface retornada por App.

App não precisa implementar toda a interface.

Sua função pode ser organizar outros componentes. Essa divisão de responsabilidades é uma das bases da componentização.

Observe o caminho inverso entre import e export.

App.jsx utiliza export default App, enquanto main.jsx utiliza import App. Da mesma forma, Login.jsx exportará Login para que App.jsx possa importá-lo.

Fragmentos evitam elementos desnecessários.

<> </> permite organizar o JSX sem adicionar uma <div> apenas para realizar o agrupamento.

Componentes `Label.jsx` e `Labelln.jsx`

Até este momento, vimos que o componente App utiliza:

<Login />

O componente Login, por sua vez, será construído a partir de componentes menores.

Entre esses componentes estão:

Label.jsx
Labelln.jsx
InputText.jsx
Button.jsx

Nesta parte, estudaremos Label e Labelln.

Os dois componentes possuem uma característica em comum: recebem um texto por meio de Props e utilizam esse valor na construção da interface.

Entretanto, eles foram implementados utilizando abordagens diferentes:

Label.jsx
    │
    └── Class Component
             │
             └── this.props.texto


Labelln.jsx
    │
    └── Function Component
             │
             └── { texto }

Essa diferença permite comparar duas formas de construção de componentes e duas maneiras de acessar Props.

Componente `Label.jsx`

O componente Label é responsável por receber um texto e apresentá-lo na interface.

No formulário de Login, ele será utilizado, por exemplo, para apresentar:

Usuário:

Senha:

O componente é implementado utilizando uma classe que herda de React.Component.

💻 Código Completo

Arquivo: /src/components/props/Label.jsx

import React from 'react';

export default class Label extends React.Component{
  render(){
    return(
      <>
        {this.props.texto}
      </>
    );
  }
}

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do React

import React from 'react';

A primeira linha importa o objeto React.

Essa importação será utilizada na declaração:

React.Component

que servirá como classe-base para Label.

Linha 02 — Separação entre importação e componente

A linha 02 está em branco.

Ela separa visualmente a importação da declaração do componente.

A organização fica:

Importação
    │
    ▼
Declaração da classe

Linha 03 — Declaração do componente de classe

export default class Label extends React.Component{

Essa linha reúne três elementos importantes.

Primeiro:

class Label

declara uma classe chamada Label.

Em seguida:

extends React.Component

indica que Label herda de React.Component.

Por fim:

export default

define Label como a exportação padrão do módulo.

Podemos representar essa estrutura como:

React.Component
      ▲
      │ extends
      │
    Label
      │
      │ export default
      ▼
outros componentes

Por herdar de React.Component, Label pode ser utilizado como um componente React baseado em classe.

Linhas 04–10 — Método `render()`

render(){
  return(
    <>
      {this.props.texto}
    </>
  );
}

Componentes baseados em classe utilizam o método:

render()

para definir o conteúdo que será apresentado na interface.

Dentro de render(), encontramos:

return(...)

responsável por retornar o JSX do componente.

Neste caso, o JSX apresenta o valor recebido pela prop:

texto

Linhas 06–08 — Fragmento e utilização da Prop

<>
  {this.props.texto}
</>

O componente utiliza novamente um Fragmento:

<>
</>

Dentro dele encontramos:

{this.props.texto}

Em JSX, as chaves:

{ }

permitem inserir uma expressão JavaScript dentro da estrutura da interface.

Como Label é um componente de classe, as propriedades recebidas podem ser acessadas por:

this.props

Portanto:

this.props.texto

significa:

this
 │
 ▼
props
 │
 ▼
texto

Ou seja, estamos acessando a prop chamada texto recebida pelo componente.

Linha 11 — Finalização da classe

A última linha encerra a declaração da classe Label.

Com isso, temos um componente completo que:

recebe uma Prop
      │
      ▼
this.props.texto
      │
      ▼
render()
      │
      ▼
interface

Utilizando o Componente `Label`

Posteriormente, o componente poderá ser utilizado da seguinte forma:

<Label texto="Usuário: " />

Nesse caso:

Prop        Valor

texto  →   "Usuário: "

Dentro de Label, o valor poderá ser acessado utilizando:

{this.props.texto}

Assim:

<Login />
    │
    │ texto="Usuário: "
    ▼
<Label />
    │
    ▼
this.props.texto
    │
    ▼
"Usuário: "

O mesmo componente pode ser reutilizado com outro valor:

<Label texto="Senha: " />

Agora:

texto  →  "Senha: "

A estrutura do componente não precisa ser modificada.

Apenas o valor da Prop é diferente.

📌 Conceitos-Chave Envolvidos em `Label`

Conceito	Explicação
Class Component	Componente implementado utilizando uma classe.
`React.Component`	Classe-base utilizada pelo componente `Label`.
`extends`	Estabelece a herança de `React.Component`.
`render()`	Método que define o JSX apresentado pelo componente de classe.
Props	Informações recebidas pelo componente.
`this.props`	Permite acessar as Props em um componente de classe.
`this.props.texto`	Acessa especificamente a Prop `texto`.
`{ }`	Permite inserir uma expressão JavaScript dentro do JSX.
`export default`	Define `Label` como exportação padrão do módulo.

💡 Dicas do Professor

Observe que Label não define o texto que apresenta.

O texto é recebido de outro componente por meio de Props. Isso permite reutilizar Label com diferentes valores.

Em um Class Component, observe o uso de this.props.

Neste exemplo, this.props.texto acessa a propriedade texto recebida pelo componente.

O método render() possui uma função importante.

Em um componente de classe, ele define o conteúdo JSX que será apresentado.

Componente `Labelln.jsx`

O componente Labelln possui uma finalidade semelhante à de Label: receber um texto e apresentá-lo na interface.

Entretanto, sua implementação utiliza uma função, permitindo observar outra forma de construção de componentes React.

No formulário utilizado neste capítulo, ele será utilizado para apresentar o texto:

Login

Sua estrutura também introduz a desestruturação de Props.

💻 Código Completo

Arquivo: /src/components/props/Labelln.jsx

import React from 'react';

export default function Labelln({ texto }) {
  return (
    <>
      {texto} <br />
    </>
  );
}

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do React

import React from 'react';

O arquivo inicia importando React.

No exemplo do material, essa importação é mantida no componente funcional.

Linha 02 — Separação entre importação e componente

A linha 02 está em branco.

Ela separa a importação da declaração do componente.

Linha 03 — Declaração do Function Component

export default function Labelln({ texto }) {

Essa linha declara uma função chamada:

Labelln

Como a função retorna JSX e será utilizada como componente React, temos um Function Component.

A declaração também utiliza:

export default

permitindo que Labelln seja importado por outros módulos.

Observe o parâmetro:

{ texto }

Ele representa a desestruturação das Props recebidas pelo componente.

Desestruturação de Props

Um componente recebe suas Props como um objeto.

Conceitualmente, podemos imaginar:

props = {
  texto: "Login"
}

Uma forma de acessar esse valor seria:

props.texto

Entretanto, Labelln utiliza desestruturação diretamente no parâmetro:

function Labelln({ texto })

Assim, a propriedade:

texto

é extraída do objeto recebido e pode ser utilizada diretamente dentro da função.

Podemos representar:

Props
  │
  ▼
{
  texto: "Login"
}
  │
  │ desestruturação
  ▼
texto
  │
  ▼
"Login"

Linhas 04–08 — Retorno JSX

return (
  <>
    {texto} <br />
  </>
);

O componente retorna JSX utilizando:

return

Dentro do fragmento encontramos:

{texto}

Como a Prop já foi desestruturada no parâmetro da função, não é necessário escrever:

props.texto

Podemos utilizar diretamente:

texto

Linha 06 — Exibição da Prop e quebra de linha

{texto} <br />

As chaves:

{texto}

inserem o valor da variável texto no JSX.

Em seguida:

<br />

adiciona uma quebra de linha.

Assim, se o componente for utilizado como:

<Labelln texto="Login" />

a Prop recebida será:

texto  →  "Login"

e o componente apresentará esse valor seguido de uma quebra de linha.

Linha 09 — Finalização do componente

A última linha encerra a função Labelln.

O fluxo do componente pode ser representado como:

<Labelln texto="Login" />
           │
           ▼
       Props
           │
           ▼
    { texto }
           │
           ▼
        texto
           │
           ▼
       JSX + <br />

Utilizando o Componente `Labelln`

O componente poderá ser utilizado por Login da seguinte forma:

<Labelln texto="Login" />

O valor:

Login

é enviado por meio da Prop:

texto

O componente recebe:

{ texto }

e utiliza:

{texto}

para apresentar esse conteúdo.

Comparando `Label` e `Labelln`

Agora podemos comparar os dois componentes.

`Label`

É implementado como classe:

export default class Label extends React.Component

e acessa a Prop utilizando:

this.props.texto

`Labelln`

É implementado como função:

export default function Labelln({ texto })

e utiliza desestruturação para acessar diretamente:

texto

Podemos resumir:

Característica	`Label`	`Labelln`
Tipo	Class Component	Function Component
Estrutura	`class`	`function`
Base	`React.Component`	Função JavaScript
Método `render()`	Sim	Não
Prop utilizada	`texto`	`texto`
Acesso à Prop	`this.props.texto`	`texto`
Desestruturação	Não	Sim
Retorna JSX	Sim	Sim
`export default`	Sim	Sim

Apesar das diferenças de implementação, os dois componentes recebem informações por meio de Props.

Props: Componente Pai → Componente Filho

Os dois exemplos permitem compreender uma característica importante das Props.

Os valores são fornecidos quando o componente é utilizado.

Por exemplo:

<Label texto="Usuário: " />

ou:

<Labelln texto="Login" />

Podemos representar essa relação como:

Componente Pai
      │
      │ texto="..."
      ▼
Componente Filho
      │
      ▼
     Prop

No exemplo completo, Login será o componente responsável por fornecer esses valores:

Login
  │
  ├── texto="Login"
  │       │
  │       ▼
  │    Labelln
  │
  ├── texto="Usuário: "
  │       │
  │       ▼
  │     Label
  │
  └── texto="Senha: "
          │
          ▼
        Label

Essa comunicação permite que componentes menores sejam reutilizados com conteúdos diferentes.

Props e Reutilização

Considere:

<Label texto="Usuário: " />

<Label texto="Senha: " />

O componente utilizado é exatamente o mesmo:

Label

O que muda é o valor da Prop:

             Label
            /     \
           /       \
"Usuário: "         "Senha: "

Esse comportamento demonstra uma das vantagens da componentização: podemos criar uma estrutura uma única vez e configurá-la por meio das informações recebidas.

📌 Conceitos-Chave Envolvidos

Conceito	Explicação
Props	Propriedades utilizadas para transmitir informações para um componente.
Componente Pai	Componente que utiliza outro componente e fornece suas Props.
Componente Filho	Componente que recebe as Props.
Class Component	Componente implementado por meio de uma classe.
Function Component	Componente implementado por meio de uma função.
`React.Component`	Classe-base utilizada na implementação de `Label`.
`render()`	Método utilizado pelo Class Component para retornar JSX.
`this.props`	Forma utilizada no exemplo para acessar Props no componente de classe.
Desestruturação	Recurso JavaScript utilizado para extrair propriedades de um objeto.
`{ texto }`	Desestrutura a propriedade `texto` recebida pelo Function Component.
`{this.props.texto}`	Insere no JSX a Prop `texto` em `Label`.
`{texto}`	Insere no JSX a Prop desestruturada em `Labelln`.
`<br />`	Elemento utilizado no exemplo para inserir uma quebra de linha.
Reutilização	Possibilidade de utilizar o mesmo componente com diferentes valores de Props.

💡 Dicas do Professor

Compare os dois componentes, não apenas seus resultados.

Label e Labelln recebem uma Prop chamada texto, mas fazem isso utilizando estruturas diferentes. Essa comparação ajuda a compreender Class Components e Function Components.

Props podem ser entendidas como informações fornecidas ao componente.

Quando escrevemos <Label texto="Usuário: " />, estamos fornecendo um valor para a propriedade texto.

Observe a desestruturação em Labelln.

{ texto } no parâmetro permite utilizar diretamente texto dentro da função, evitando a escrita props.texto.

Não confunda as chaves utilizadas na desestruturação com as chaves do JSX.

Em function Labelln({ texto }), as chaves fazem parte da desestruturação do objeto de Props. Em {texto} dentro do JSX, as chaves permitem inserir uma expressão JavaScript na interface.

A reutilização ficará mais evidente em Login.jsx.

O mesmo Label será utilizado para apresentar valores diferentes, demonstrando na prática a relação entre Props e componentização.

Componente `InputText.jsx`

O componente InputText é responsável por criar um campo de entrada de texto reutilizável.

No formulário de Login, ele será utilizado para representar os campos destinados ao usuário e à senha.

Em vez de criar diretamente diferentes elementos <input> no componente Login, será utilizado um componente que recebe por meio de Props a informação necessária para configurar o campo.

No exemplo, a Prop utilizada será:

placeholder

Assim, o mesmo componente poderá ser utilizado com diferentes textos de orientação.

💻 Código Completo

Arquivo: /src/components/props/InputText.jsx

import React from 'react';

export default function InputText({ placeholder }) {
  return (
    <input type="text" placeholder={placeholder} />
  );
}

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do React

import React from 'react';

O arquivo inicia importando React.

No exemplo apresentado, essa importação é mantida no componente funcional.

Linha 02 — Separação entre importação e componente

A linha 02 está em branco.

Ela separa visualmente a importação da declaração do componente.

Linha 03 — Declaração do Function Component

export default function InputText({ placeholder }) {

Essa linha declara um Function Component chamado:

InputText

Assim como ocorreu em Labelln, as Props são recebidas utilizando desestruturação.

A expressão:

{ placeholder }

extrai a propriedade placeholder do objeto de Props recebido pelo componente.

Conceitualmente:

Props
  │
  ▼
{
  placeholder: "user..."
}
  │
  │ desestruturação
  ▼
placeholder
  │
  ▼
"user..."

A declaração também utiliza:

export default

permitindo que InputText seja importado e utilizado por outros componentes.

Linhas 04–06 — Retorno do campo de entrada

return (
  <input type="text" placeholder={placeholder} />
);

O componente retorna um elemento HTML:

<input>

O atributo:

type="text"

indica que se trata de um campo de entrada de texto.

Já:

placeholder={placeholder}

define dinamicamente o texto de orientação apresentado dentro do campo.

Observe que existem dois usos da palavra placeholder:

placeholder={placeholder}

O primeiro:

placeholder=

corresponde ao atributo do elemento <input>.

O segundo:

{placeholder}

corresponde ao valor recebido pelo componente por meio das Props.

Assim:

Prop do componente
        │
        ▼
   placeholder
        │
        ▼
atributo do <input>
        │
        ▼
texto apresentado no campo

Linha 07 — Finalização do componente

A última linha encerra a função InputText.

O componente completo pode ser compreendido pelo seguinte fluxo:

<InputText placeholder="user..." />
                │
                ▼
             Props
                │
                ▼
       { placeholder }
                │
                ▼
          placeholder
                │
                ▼
      <input type="text">

Utilizando o Componente `InputText`

No formulário de Login, o componente poderá ser utilizado como:

<InputText placeholder="user..." />

Nesse caso:

placeholder  →  "user..."

O componente utiliza esse valor em:

<input type="text" placeholder={placeholder} />

O mesmo componente também poderá ser reutilizado:

<InputText placeholder="password..." />

Agora:

placeholder  →  "password..."

A implementação de InputText permanece a mesma.

Somente a Prop fornecida pelo componente pai é modificada.

Props em Atributos JSX

Nos componentes anteriores, utilizamos uma Prop como conteúdo:

{texto}

Em InputText, a Prop é utilizada de outra maneira:

placeholder={placeholder}

Isso demonstra que expressões JavaScript podem ser utilizadas também para definir valores de atributos em JSX.

Compare:

<Labelln texto="Login" />

Dentro de Labelln:

{texto}

<InputText placeholder="user..." />

Dentro de InputText:

<input type="text" placeholder={placeholder} />

Portanto, uma Prop pode ser utilizada tanto no conteúdo apresentado pelo componente quanto na configuração dos elementos que ele retorna.

Input Não Controlado

No exemplo apresentado, InputText apenas cria o campo:

<input type="text" placeholder={placeholder} />

Não existe um estado associado ao valor digitado e também não existe, neste momento, um evento para acompanhar suas alterações.

Por isso, o exemplo apresenta um input não controlado.

Neste capítulo, o objetivo está concentrado na componentização e na utilização de Props.

A captura e o gerenciamento dos valores digitados poderão ser tratados posteriormente com outros recursos do React.

📌 Conceitos-Chave Envolvidos em `InputText`

Conceito	Explicação
Function Component	Componente implementado utilizando uma função.
Props	Informações recebidas pelo componente.
`placeholder`	Prop utilizada para configurar o texto de orientação do campo.
Desestruturação	Permite extrair `placeholder` diretamente das Props.
`<input>`	Elemento HTML utilizado para entrada de dados.
`type="text"`	Define o campo como entrada de texto.
`placeholder={placeholder}`	Utiliza uma expressão JavaScript para definir dinamicamente o atributo.
Input não controlado	Campo cujo valor não está sendo gerenciado por um estado React no exemplo.
Reutilização	Permite utilizar o mesmo `InputText` com diferentes valores de `placeholder`.

💡 Dicas do Professor

Observe onde a Prop está sendo utilizada.

Em Labelln, texto aparece como conteúdo do componente. Em InputText, placeholder é utilizado para definir dinamicamente um atributo do elemento <input>.

Não confunda os dois placeholder.

Em placeholder={placeholder}, o primeiro identifica o atributo do elemento e o segundo representa a variável obtida por meio da desestruturação das Props.

O componente ainda não captura o valor digitado.

Neste momento, InputText tem como objetivo demonstrar componentização e Props. O gerenciamento do conteúdo do campo exige outros recursos que serão estudados posteriormente.

Componente `Button.jsx`

O próximo componente representa um botão reutilizável.

No formulário de Login, ele será utilizado para apresentar:

Logar

Assim como Label, o componente Button é implementado utilizando uma classe que herda de:

React.Component

O texto apresentado pelo botão será recebido por meio da Prop:

valor

💻 Código Completo

Arquivo: /src/components/props/Button.jsx

import React from 'react';

export default class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.valor}
      </button>
    );
  }
}

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do React

import React from 'react';

O arquivo importa React, que será utilizado na declaração:

React.Component

Linha 02 — Separação entre importação e componente

A linha 02 está em branco.

Ela separa a importação da declaração da classe.

Linha 03 — Declaração do componente `Button`

export default class Button extends React.Component {

Essa linha declara uma classe chamada:

Button

A expressão:

extends React.Component

estabelece que Button herda de React.Component.

Portanto, sua estrutura é semelhante à utilizada anteriormente em Label:

React.Component
       ▲
       │
       ├── Label
       │
       └── Button

A declaração também utiliza:

export default

para disponibilizar Button como exportação padrão do módulo.

Linhas 04–10 — Método `render()`

render() {
  return (
    <button>
      {this.props.valor}
    </button>
  );
}

Como Button é um componente de classe, utiliza:

render()

para definir o JSX que será apresentado.

Dentro do return, encontramos um elemento HTML:

<button>
</button>

Esse elemento representa o botão que será apresentado na interface.

Linhas 06–08 — Elemento `<button>` e Prop `valor`

<button>
  {this.props.valor}
</button>

O conteúdo do botão não está definido diretamente no componente.

Em vez de escrever:

<button>
  Logar
</button>

o componente utiliza:

{this.props.valor}

Assim como vimos em Label, this.props permite acessar as Props recebidas por um componente de classe.

A propriedade utilizada é:

valor

Portanto:

this
 │
 ▼
props
 │
 ▼
valor

O valor recebido será utilizado como conteúdo do elemento <button>.

Linha 11 — Finalização da classe

A última linha encerra a classe Button.

Seu funcionamento pode ser representado por:

<Button valor="Logar" />
          │
          ▼
        Props
          │
          ▼
 this.props.valor
          │
          ▼
       "Logar"
          │
          ▼
  <button>Logar</button>

Utilizando o Componente `Button`

No componente Login, o botão será utilizado como:

<Button valor="Logar" />

Nesse caso:

valor  →  "Logar"

Dentro do componente, esse valor será acessado por:

{this.props.valor}

O resultado será um botão cujo texto é definido pela Prop recebida.

O componente também poderia ser reutilizado com outros valores:

<Button valor="Cadastrar" />

ou:

<Button valor="Cancelar" />

A estrutura de Button não precisaria ser modificada.

Comparando `InputText` e `Button`

Os dois componentes representam elementos de uma interface, mas utilizam formas diferentes de implementação.

InputText é um Function Component:

export default function InputText({ placeholder })

e recebe sua Prop utilizando desestruturação:

{ placeholder }

Já Button é um Class Component:

export default class Button extends React.Component

e acessa sua Prop utilizando:

this.props.valor

Podemos comparar:

Característica	`InputText`	`Button`
Tipo	Function Component	Class Component
Estrutura	`function`	`class`
Prop utilizada	`placeholder`	`valor`
Acesso à Prop	`placeholder`	`this.props.valor`
Desestruturação	Sim	Não
Método `render()`	Não	Sim
Elemento retornado	`<input>`	`<button>`
`export default`	Sim	Sim
Reutilizável	Sim	Sim

Evolução da Composição da Interface

Agora já conhecemos os quatro componentes utilizados por Login:

Label.jsx
Labelln.jsx
InputText.jsx
Button.jsx

Cada um possui uma responsabilidade específica:

Componente	Tipo	Prop	Responsabilidade
`Label`	Class Component	`texto`	Apresentar um texto utilizado como rótulo.
`Labelln`	Function Component	`texto`	Apresentar um texto seguido de uma quebra de linha.
`InputText`	Function Component	`placeholder`	Apresentar um campo de entrada de texto.
`Button`	Class Component	`valor`	Apresentar um botão com texto configurável.

Podemos visualizar a futura composição:

Login
  │
  ├── Labelln
  │      └── texto
  │
  ├── Label
  │      └── texto
  │
  ├── InputText
  │      └── placeholder
  │
  ├── Label
  │      └── texto
  │
  ├── InputText
  │      └── placeholder
  │
  └── Button
         └── valor

O componente Login não precisará implementar novamente o funcionamento de cada elemento.

Sua responsabilidade será combinar e configurar esses componentes por meio das Props.

📌 Conceitos-Chave Envolvidos

Conceito	Explicação
Function Component	Forma utilizada para implementar `InputText`.
Class Component	Forma utilizada para implementar `Button`.
Props	Informações fornecidas aos componentes.
Desestruturação de Props	Forma utilizada por `InputText` para acessar `placeholder`.
`this.props`	Forma utilizada por `Button` para acessar suas Props.
`placeholder`	Prop utilizada para configurar o campo de entrada.
`valor`	Prop utilizada para definir o texto do botão.
`<input>`	Elemento HTML utilizado para entrada de dados.
`<button>`	Elemento HTML utilizado para representar um botão.
JSX	Permite combinar elementos e expressões JavaScript na interface.
Input não controlado	Campo cujo valor não é gerenciado por estado no exemplo.
Reutilização	Possibilidade de utilizar os componentes com diferentes valores de Props.
Componentização	Divisão da interface em componentes com responsabilidades específicas.

💡 Dicas do Professor

Observe como as Props tornam os componentes configuráveis.

InputText não precisa saber antecipadamente qual texto deverá aparecer como placeholder, assim como Button não precisa saber qual texto deverá apresentar.

Compare novamente Function Component e Class Component.

InputText recebe placeholder por desestruturação, enquanto Button utiliza this.props.valor. Essa diferença reforça as duas formas de implementação apresentadas neste capítulo.

Componentização não significa apenas dividir arquivos.

Cada componente deve possuir uma responsabilidade clara. Neste exemplo, InputText representa um campo de entrada e Button representa um botão.

Ainda não existe comportamento associado ao botão.

O componente apresenta o elemento <button> e seu texto, mas o material ainda não adiciona uma ação de clique. Neste momento, o foco permanece na estrutura dos componentes e na utilização de Props.

Observe como estamos preparando o Login.

Agora já possuímos todas as peças necessárias. Na próxima parte, Login.jsx reunirá Label, Labelln, InputText e Button, demonstrando de forma completa a composição e a passagem de Props.

Componente `Login.jsx`

Depois de criarmos os componentes:

Label.jsx
Labelln.jsx
InputText.jsx
Button.jsx

podemos utilizá-los em conjunto para construir uma interface maior.

Essa responsabilidade será atribuída ao componente:

Login.jsx

Diferentemente dos componentes anteriores, Login não representa apenas um elemento específico da interface.

Sua principal responsabilidade é organizar e combinar outros componentes.

A composição pode ser representada por:

Login
  │
  ├── Labelln
  │
  ├── Label
  │
  ├── InputText
  │
  ├── Label
  │
  ├── InputText
  │
  └── Button

Além de utilizar esses componentes, Login fornece os valores das Props necessárias para configurá-los.

💻 Código Completo

Arquivo: /src/components/props/Login.jsx

import Label from "./Label.jsx"
import Labelln from "./Labelln.jsx"
import Button from "./Button.jsx"
import InputText from "./InputText.jsx"

function Login() {
  return (
    <>
      <Labelln texto="Login"/>
      <Label texto="Usuário: "/>
      <InputText placeholder="user..."/> <br />
      <Label texto="Senha: "/>
      <InputText placeholder="password..."/> <br />
      <Button valor="Logar" />
    </>
  )
}

export default Login

📘 Comentários e Explicações Linha a Linha

Linhas 01–04 — Importação dos componentes

import Label from "./Label.jsx"
import Labelln from "./Labelln.jsx"
import Button from "./Button.jsx"
import InputText from "./InputText.jsx"

As primeiras linhas importam os quatro componentes utilizados para construir a interface de Login.

Cada componente está definido em seu próprio arquivo:

Login.jsx
    │
    ├── Label.jsx
    ├── Labelln.jsx
    ├── Button.jsx
    └── InputText.jsx

Como todos esses componentes foram definidos utilizando:

export default

podemos importá-los diretamente pelo nome utilizado no arquivo Login.jsx.

Por exemplo:

import Label from "./Label.jsx"

torna o componente Label disponível para utilização dentro do JSX de Login.

Essa organização demonstra a modularização da aplicação.

Cada componente possui sua própria implementação, enquanto Login é responsável por reuni-los.

Linha 05 — Separação entre importações e componente

A linha 05 está em branco.

Ela separa visualmente:

Importações
     │
     ▼
Definição do componente

Essa separação não interfere na execução, mas contribui para a organização e a legibilidade do código.

function Login() {
  return (
    <>
      <Labelln texto="Login"/>
      <Label texto="Usuário: "/>
      <InputText placeholder="user..."/> <br />
      <Label texto="Senha: "/>
      <InputText placeholder="password..."/> <br />
      <Button valor="Logar" />
    </>
  )
}

A instrução:

function Login() {

declara um Function Component chamado Login.

Assim como App, esse componente utiliza uma função JavaScript que retorna JSX.

Entretanto, existe uma diferença importante.

App utilizava apenas:

<Login />

Já Login combina diversos componentes menores.

Podemos representar:

App
 │
 ▼
Login
 │
 ├── Labelln
 ├── Label
 ├── InputText
 ├── Label
 ├── InputText
 └── Button

Isso demonstra como componentes simples podem ser combinados para construir componentes maiores.

Linhas 07–16 — Retorno JSX

return (
  <>
    <Labelln texto="Login"/>
    <Label texto="Usuário: "/>
    <InputText placeholder="user..."/> <br />
    <Label texto="Senha: "/>
    <InputText placeholder="password..."/> <br />
    <Button valor="Logar" />
  </>
)

O return define a interface que será apresentada pelo componente.

Nesse caso, o JSX não é composto diretamente apenas por elementos HTML.

Grande parte da interface é construída utilizando os componentes criados anteriormente:

Labelln
Label
InputText
Button

Isso demonstra a composição de componentes.

Linhas 08 e 15 — Fragmento

<>

</>

delimitam um Fragmento.

O fragmento permite que Login retorne vários elementos sem precisar adicionar uma <div> apenas para agrupá-los.

Dentro dele estão todos os componentes utilizados para construir a interface.

Conceitualmente:

Fragment
   │
   ├── Labelln
   ├── Label
   ├── InputText
   ├── Label
   ├── InputText
   └── Button

Linha 09 — Título da interface

<Labelln texto="Login"/>

O componente Labelln recebe a Prop:

texto

com o valor:

Login

Na parte anterior, vimos que Labelln recebe essa propriedade utilizando desestruturação:

function Labelln({ texto })

e apresenta o valor utilizando:

{texto}

Portanto, o fluxo é:

Login.jsx
    │
    │ texto="Login"
    ▼
Labelln
    │
    ▼
{ texto }
    │
    ▼
"Login"

Linhas 10–11 — Campo destinado ao usuário

<Label texto="Usuário: "/>
<InputText placeholder="user..."/> <br />

Essas duas instruções constroem a parte da interface destinada ao usuário.

Primeiro:

<Label texto="Usuário: "/>

utiliza o componente Label e fornece:

texto  →  "Usuário: "

Como Label é um Class Component, o valor será acessado internamente por:

this.props.texto

Em seguida:

<InputText placeholder="user..."/>

utiliza o componente InputText e fornece:

placeholder  →  "user..."

Como InputText é um Function Component com desestruturação, o valor é recebido por:

{ placeholder }

e utilizado no elemento:

<input type="text" placeholder={placeholder} />

O elemento:

<br />

adiciona uma quebra de linha após o campo.

Linhas 12–13 — Campo destinado à senha

<Label texto="Senha: "/>
<InputText placeholder="password..."/> <br />

A mesma estrutura utilizada anteriormente é reutilizada.

O componente:

<Label texto="Senha: "/>

recebe agora outro valor para a Prop texto:

texto  →  "Senha: "

Já:

<InputText placeholder="password..."/>

recebe:

placeholder  →  "password..."

Observe que não foi necessário criar novos componentes para representar esses campos.

Os mesmos componentes:

Label
InputText

foram reutilizados com Props diferentes.

Podemos visualizar:

                Label
               /     \
              /       \
      "Usuário: "    "Senha: "


              InputText
               /     \
              /       \
        "user..."   "password..."

Essa reutilização é uma das principais vantagens da componentização.

Linha 14 — Botão da interface

<Button valor="Logar" />

A última parte da interface utiliza o componente:

Button

A Prop:

valor

recebe:

Logar

Como Button é um Class Component, o valor será acessado internamente utilizando:

{this.props.valor}

O fluxo é:

Login
  │
  │ valor="Logar"
  ▼
Button
  │
  ▼
this.props.valor
  │
  ▼
"Logar"

Linha 18 — Separação antes da exportação

A linha 18 está em branco.

Ela separa a declaração do componente de sua exportação.

Linha 19 — Exportação do componente

export default Login

A última linha exporta Login como conteúdo padrão do módulo.

Isso permite que App.jsx utilize:

import Login from "./components/props/Login.jsx"

e posteriormente:

<Login />

Portanto:

Login.jsx
    │
    │ export default Login
    ▼
App.jsx
    │
    │ import Login
    ▼
<Login />

Passagem de Props

O componente Login permite visualizar claramente como ocorre a passagem de Props.

Considere:

<Label texto="Usuário: "/>

Nesse caso, Login é o componente pai, enquanto Label é o componente filho.

A informação é transmitida da seguinte forma:

Login
  │
  │ texto="Usuário: "
  ▼
Label
  │
  ▼
this.props.texto

Outro exemplo:

<InputText placeholder="user..."/>

Nesse caso:

Login
  │
  │ placeholder="user..."
  ▼
InputText
  │
  ▼
{ placeholder }

Portanto, no exemplo apresentado, as Props estabelecem um fluxo de informações do componente pai para seus componentes filhos.

Props Diferentes para Componentes Diferentes

Cada componente pode definir as propriedades necessárias para sua responsabilidade.

No exemplo:

<Labelln texto="Login"/>

utiliza:

texto

Assim como:

<Label texto="Usuário: "/>

Já:

<InputText placeholder="user..."/>

utiliza:

placeholder

<Button valor="Logar" />

utiliza:

valor

Podemos resumir:

Componente	Prop	Valor utilizado no exemplo
`Labelln`	`texto`	`"Login"`
`Label`	`texto`	`"Usuário: "`
`InputText`	`placeholder`	`"user..."`
`Label`	`texto`	`"Senha: "`
`InputText`	`placeholder`	`"password..."`
`Button`	`valor`	`"Logar"`

Isso demonstra que as Props funcionam como uma forma de configurar cada utilização de um componente.

Reutilização de Componentes

Um dos aspectos mais importantes do exemplo está na reutilização.

Label é utilizado duas vezes:

<Label texto="Usuário: "/>

<Label texto="Senha: "/>

Da mesma forma, InputText é utilizado duas vezes:

<InputText placeholder="user..."/>

<InputText placeholder="password..."/>

Não foi necessário criar:

LabelUsuario
LabelSenha
InputUsuario
InputSenha

Os mesmos componentes foram configurados com diferentes Props.

Assim:

Componente
    │
    ├── estrutura reutilizável
    │
    └── Props
          │
          ▼
    configuração específica

Separação de Responsabilidades

A estrutura criada também demonstra a separação de responsabilidades.

Cada componente possui uma função específica:

Labelln
   │
   └── apresenta texto e quebra de linha

Label
   │
   └── apresenta um texto

InputText
   │
   └── apresenta um campo de entrada

Button
   │
   └── apresenta um botão

Login
   │
   └── organiza os componentes

O componente Login não precisa conhecer os detalhes de implementação de cada componente.

Por exemplo, ele não precisa saber que Label utiliza:

this.props.texto

ou que InputText utiliza:

{ placeholder }

Ele apenas fornece as Props esperadas.

Essa divisão torna a estrutura da aplicação mais organizada.

Hierarquia Completa da Aplicação

Agora já podemos visualizar toda a estrutura estudada neste capítulo:

index.html
    │
    │ carrega
    ▼
main.jsx
    │
    │ renderiza
    ▼
App
    │
    │ utiliza
    ▼
Login
    │
    ├── Labelln
    │      └── texto="Login"
    │
    ├── Label
    │      └── texto="Usuário: "
    │
    ├── InputText
    │      └── placeholder="user..."
    │
    ├── Label
    │      └── texto="Senha: "
    │
    ├── InputText
    │      └── placeholder="password..."
    │
    └── Button
           └── valor="Logar"

Essa hierarquia demonstra como uma aplicação React pode ser construída progressivamente.

Começamos com:

index.html

que disponibiliza o ponto de montagem.

Depois:

main.jsx

inicializa o React.

Em seguida:

App.jsx

organiza a aplicação.

Por fim:

Login.jsx

combina componentes menores para construir a interface.

Composição × Reutilização × Props

Os três conceitos podem ser observados simultaneamente no componente Login.

Composição

Login é construído utilizando outros componentes:

Login
  │
  ├── Label
  ├── Labelln
  ├── InputText
  └── Button

Reutilização

Label e InputText aparecem mais de uma vez:

<Label texto="Usuário: "/>
<Label texto="Senha: "/>

<InputText placeholder="user..."/>
<InputText placeholder="password..."/>

Props

Cada utilização pode receber valores diferentes:

Componente reutilizável
          │
          │ Props
          ▼
Configuração específica

Esses conceitos trabalham em conjunto e constituem elementos importantes para a organização de interfaces em React.

Formulário Apresentado no Exemplo

Embora o componente represente visualmente uma tela de Login, neste momento o exemplo está concentrado na estrutura da interface e no uso de Props.

Os campos:

<InputText placeholder="user..."/>

<InputText placeholder="password..."/>

ainda não possuem gerenciamento dos valores digitados.

Da mesma forma:

<Button valor="Logar" />

ainda não possui uma ação associada ao clique.

Portanto, neste estágio:

Interface de Login
      │
      ├── componentes
      ├── Props
      ├── composição
      └── apresentação

O comportamento do formulário poderá ser acrescentado posteriormente com outros recursos do React.

📌 Conceitos-Chave Envolvidos

Conceito	Explicação
`Login`	Function Component responsável por organizar a interface apresentada no exemplo.
Componente Pai	Componente que utiliza e fornece Props para outros componentes.
Componente Filho	Componente utilizado por outro componente e que pode receber Props.
Props	Informações transmitidas para configurar componentes.
Composição	Construção de uma interface por meio da combinação de componentes.
Reutilização	Utilização do mesmo componente mais de uma vez com diferentes Props.
Modularização	Organização dos componentes em arquivos separados.
`import`	Torna os componentes exportados disponíveis em `Login.jsx`.
`export default`	Disponibiliza `Login` para utilização em outro módulo.
Fragmento	Agrupa os elementos retornados por `Login` sem adicionar uma `<div>` extra.
`texto`	Prop utilizada pelos componentes `Label` e `Labelln`.
`placeholder`	Prop utilizada por `InputText`.
`valor`	Prop utilizada por `Button`.
Separação de Responsabilidades	Distribuição das diferentes partes da interface entre componentes específicos.

💡 Dicas do Professor

Observe que Login é responsável principalmente pela composição.

Ele não implementa novamente um campo de entrada, um botão ou um rótulo. Em vez disso, utiliza componentes que já possuem essas responsabilidades.

O componente pai fornece as Props.

Em <Label texto="Usuário: " />, Login fornece a Prop texto, enquanto Label é responsável por utilizá-la.

Reutilizar um componente não significa apresentar sempre a mesma informação.

As Props permitem utilizar a mesma estrutura com valores diferentes. Por isso, Label pode representar tanto "Usuário: " quanto "Senha: ".

A interface ainda não possui a lógica de autenticação.

Os campos não estão sendo gerenciados por estado e o botão ainda não possui uma ação associada. O objetivo deste exemplo é compreender estrutura, componentização e Props.

Observe a aplicação como uma hierarquia.

A sequência index.html → main.jsx → App → Login → componentes ajuda a compreender como partes menores são organizadas para formar a interface completa.

📌 Conceitos-Chave Envolvidos

Ao longo deste capítulo, acompanhamos o fluxo completo de uma aplicação ReactJS simples, desde o documento HTML inicial até a composição da interface de Login.

Os principais conceitos estudados podem ser sintetizados da seguinte forma:

Conceito	Explicação
`index.html`	Documento HTML inicial que disponibiliza o ponto de montagem da aplicação React.
`root`	Elemento HTML no qual a interface React é montada.
`main.jsx`	Arquivo responsável por inicializar a aplicação React.
`createRoot()`	Cria uma raiz React associada ao elemento definido no documento HTML.
`.render()`	Define o conteúdo que será renderizado pela raiz React.
`StrictMode`	Recurso utilizado durante o desenvolvimento para auxiliar na identificação de possíveis problemas.
`App`	Componente raiz da interface apresentado no exemplo.
Componente	Parte da interface que possui uma responsabilidade específica e pode ser combinada com outros componentes.
Componentização	Divisão da interface em componentes menores.
Composição	Construção de componentes maiores utilizando componentes menores.
Reutilização	Utilização do mesmo componente em diferentes situações, alterando sua configuração por meio de Props.
JSX	Sintaxe utilizada para representar elementos e componentes dentro do código JavaScript.
Fragmento	Permite agrupar elementos JSX sem adicionar um elemento HTML adicional ao DOM.
`<> </>`	Sintaxe simplificada utilizada para representar um fragmento.
Function Component	Componente React implementado utilizando uma função.
Class Component	Componente React implementado utilizando uma classe que herda de `React.Component`.
`React.Component`	Classe-base utilizada pelos componentes de classe apresentados no capítulo.
`render()`	Método utilizado pelos Class Components para retornar JSX.
Props	Informações fornecidas a um componente para configurar sua utilização.
`this.props`	Forma utilizada nos componentes de classe do exemplo para acessar Props.
Desestruturação de Props	Recurso utilizado nos componentes funcionais para acessar diretamente propriedades recebidas.
`import`	Permite utilizar recursos disponibilizados por outros módulos.
`export default`	Define a exportação padrão de um módulo.
Modularização	Organização da aplicação em diferentes arquivos e componentes.

Integração dos Conceitos

A estrutura construída ao longo do capítulo pode ser representada pela seguinte hierarquia:

index.html
    │
    │ carrega
    ▼
main.jsx
    │
    │ inicializa o React
    ▼
App.jsx
    │
    │ utiliza
    ▼
Login.jsx
    │
    ├── Labelln.jsx
    │      └── texto
    │
    ├── Label.jsx
    │      └── texto
    │
    ├── InputText.jsx
    │      └── placeholder
    │
    ├── Label.jsx
    │      └── texto
    │
    ├── InputText.jsx
    │      └── placeholder
    │
    └── Button.jsx
           └── valor

Cada arquivo possui uma responsabilidade dentro dessa estrutura.

O index.html disponibiliza:

<div id="root"></div>

que representa o ponto no qual a aplicação será montada.

O main.jsx localiza esse elemento:

document.getElementById('root')

cria a raiz React:

createRoot(...)

e renderiza:

<App />

App, por sua vez, utiliza:

<Login />

Finalmente, Login combina os componentes menores responsáveis pela construção da interface.

Assim, podemos visualizar o processo como:

Documento HTML
      │
      ▼
Inicialização do React
      │
      ▼
Componente Raiz
      │
      ▼
Componente Login
      │
      ▼
Componentes Reutilizáveis
      │
      ▼
Interface

Componentes de Classe × Componentes Funcionais

O exemplo apresentou intencionalmente duas formas de implementação de componentes.

Componentes de Classe

Foram implementados como Class Components:

Label
Button

Sua estrutura utiliza:

class Componente extends React.Component {
  render() {
    return (
      ...
    );
  }
}

As Props são acessadas, nos exemplos, utilizando:

this.props

Como em:

{this.props.texto}

{this.props.valor}

Componentes Funcionais

Foram implementados como Function Components:

App
Login
Labelln
InputText

Sua estrutura básica utiliza uma função:

function Componente() {
  return (
    ...
  )
}

Em Labelln e InputText, as Props são recebidas utilizando desestruturação:

{ texto }

{ placeholder }

Podemos comparar:

Característica	Class Component	Function Component
Estrutura principal	`class`	`function`
Herança de `React.Component`	Sim	Não
Método `render()`	Sim	Não
Retorna JSX	Sim	Sim
Pode receber Props	Sim	Sim
Acesso utilizado no exemplo	`this.props`	Desestruturação
Exemplo do capítulo	`Label`, `Button`	`App`, `Login`, `Labelln`, `InputText`

Apesar das diferenças estruturais, ambas as formas permitem criar componentes que podem ser utilizados na composição de uma interface.

Props e Reutilização

As Props foram utilizadas para fornecer informações aos componentes.

Em:

<Label texto="Usuário: " />

a Prop:

texto

recebe:

"Usuário: "

Já em:

<InputText placeholder="user..." />

a Prop:

placeholder

recebe:

"user..."

E em:

<Button valor="Logar" />

a Prop:

valor

recebe:

"Logar"

O fluxo apresentado no capítulo é:

Componente Pai
      │
      │ Props
      ▼
Componente Filho

No componente Login, isso fica especialmente evidente:

                     Login
                       │
          ┌────────────┼────────────┐
          │            │            │
       texto      placeholder      valor
          │            │            │
          ▼            ▼            ▼
     Label/Labelln  InputText      Button

A utilização de Props permite modificar informações apresentadas pelos componentes sem modificar sua implementação.

Componentização e Separação de Responsabilidades

A interface apresentada poderia ser escrita diretamente em um único componente.

Entretanto, o exemplo divide sua construção em:

Label
Labelln
InputText
Button
Login

Cada componente possui uma responsabilidade específica.

Essa organização permite compreender que componentização não significa apenas criar vários arquivos.

Os componentes representam partes da interface com responsabilidades próprias.

No exemplo:

Label
  └── apresenta texto

Labelln
  └── apresenta texto e quebra de linha

InputText
  └── apresenta campo de entrada

Button
  └── apresenta botão

Login
  └── organiza os componentes

App
  └── organiza a interface principal

Essa separação favorece a organização e a reutilização dos componentes.

💡 Dicas do Professor

Procure compreender a hierarquia antes de analisar componentes isoladamente.

O fluxo index.html → main.jsx → App → Login → componentes ajuda a visualizar como a aplicação é construída.

Um componente deve possuir uma responsabilidade clara.

No exemplo, InputText representa um campo de entrada, enquanto Button representa um botão. Login possui uma responsabilidade diferente: organizar esses componentes.

Props permitem configurar componentes reutilizáveis.

O mesmo Label pode apresentar "Usuário: " ou "Senha: " sem que sua implementação seja modificada.

Compare Class Components e Function Components.

O capítulo apresenta as duas estruturas para permitir essa comparação. Observe principalmente render(), this.props e a desestruturação das Props.

Importar um componente não significa utilizá-lo na interface.

import disponibiliza o componente no módulo. É sua utilização no JSX, como <Login />, que o inclui na composição da interface.

Observe o sentido das Props.

Nos exemplos estudados, as informações são fornecidas pelo componente pai e recebidas pelos componentes filhos.

A tela ainda não implementa autenticação.

O objetivo do exemplo é estudar a estrutura do projeto, componentização e Props. Os campos ainda não possuem gerenciamento de estado e o botão não possui comportamento associado ao clique.

💡 Resumo Final

Neste capítulo estudamos a estrutura básica de uma aplicação ReactJS e acompanhamos o caminho percorrido desde o carregamento do documento HTML até a construção de uma interface composta por diferentes componentes.

O processo começa em:

index.html

Nesse arquivo, o elemento:

<div id="root"></div>

define o ponto de montagem da aplicação.

O arquivo:

main.jsx

é carregado e utiliza:

createRoot(document.getElementById('root'))

para criar uma raiz React associada ao elemento root.

Em seguida, o componente:

<App />

é renderizado.

App funciona como componente raiz da interface e utiliza:

<Login />

O componente Login demonstra a composição de componentes ao reunir:

Label
Labelln
InputText
Button

Durante essa construção, foram apresentadas duas formas de implementação de componentes.

Label e Button foram construídos como Class Components, utilizando:

extends React.Component

render()

Já App, Login, Labelln e InputText foram apresentados como Function Components.

Também estudamos Props, utilizadas para transmitir informações aos componentes.

Por exemplo:

<Label texto="Usuário: " />

fornece a Prop texto ao componente Label.

Em componentes de classe, vimos o acesso utilizando:

this.props.texto

Nos componentes funcionais apresentados, utilizamos desestruturação:

function Labelln({ texto })

A reutilização de Label e InputText com valores diferentes demonstrou como as Props permitem configurar um componente sem alterar sua estrutura.

Assim, o exemplo integrou os conceitos de estrutura de projeto, JSX, modularização, componentes, composição, reutilização e Props na construção de uma interface ReactJS.

📌 O que você aprendeu

Ao concluir este capítulo, você deverá ser capaz de:

identificar os principais arquivos envolvidos na inicialização de uma aplicação ReactJS;
compreender o papel do index.html;
identificar o elemento utilizado como ponto de montagem da aplicação;
compreender a função do arquivo main.jsx;
utilizar conceitualmente createRoot() e .render();
compreender o papel do componente raiz App;
compreender o conceito de JSX;
reconhecer componentes pela utilização de nomes iniciados com letra maiúscula;
compreender o conceito de Function Component;
compreender o conceito de Class Component;
identificar o papel de React.Component;
compreender a função do método render() em componentes de classe;
utilizar fragmentos para agrupar elementos JSX;
compreender o funcionamento básico de import e export default;
compreender o conceito de componentização;
compreender a composição entre componentes;
identificar relações entre componentes pais e filhos;
compreender o conceito de Props;
acessar Props utilizando this.props nos componentes de classe apresentados;
utilizar desestruturação para acessar Props em componentes funcionais;
utilizar Props como conteúdo de um componente;
utilizar valores recebidos por Props em atributos JSX;
compreender como Props favorecem a reutilização de componentes;
identificar a responsabilidade dos componentes Label, Labelln, InputText, Button e Login;
compreender a hierarquia utilizada para construir a interface apresentada no capítulo.

📚 Exercícios de Fixação

Introdução
🎯 Objetivos de Aprendizagem
Estrutura do Projeto ReactJS
Do index.html aos Componentes
Componentização
Componentes de Classe e Componentes Funcionais
- Componentes de Classe
- Componentes Funcionais
Introdução às Props
📌 Primeiros Conceitos-Chave
💡 Dicas do Professor
Arquivo index.html
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linhas 01–02 — Estrutura inicial do documento
- Linhas 03–08 — Cabeçalho da página
- Linhas 09–12 — Corpo da página e inicialização da aplicação
- Linha 13 — Finalização do documento
O Papel do root
O Papel de type="module"
📌 Conceitos-Chave Envolvidos
💡 Dicas do Professor
Arquivo main.jsx
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linhas 01–04 — Importações iniciais
- Linha 05 — Separação entre importações e inicialização
- Linha 06 — Criação da raiz React
- Linhas 07–11 — Renderização da aplicação
Relação entre index.html e main.jsx
StrictMode
createRoot()
O Componente Raiz App
CSS Global
📌 Conceitos-Chave Envolvidos
💡 Dicas do Professor
Componente App.jsx
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linha 01 — Importação do componente Login
- Linha 02 — Separação entre importação e componente
- Linhas 03–09 — Definição do componente App
- Linhas 04–08 — Retorno da interface com JSX
- Linhas 05 e 07 — Utilização de Fragmento
- Linha 06 — Renderização do componente Login
- Linha 10 — Separação antes da exportação
- Linha 11 — Exportação do componente
Function Component
JSX
Fragmentos
Composição de Componentes
Relação entre main.jsx e App.jsx
📌 Conceitos-Chave Envolvidos
💡 Dicas do Professor
Componentes Label.jsx e Labelln.jsx
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linha 01 — Importação do React
- Linha 02 — Separação entre importação e componente
- Linha 03 — Declaração do componente de classe
- Linhas 04–10 — Método render()
- Linhas 06–08 — Fragmento e utilização da Prop
- Linha 11 — Finalização da classe
Utilizando o Componente Label
📌 Conceitos-Chave Envolvidos em Label
💡 Dicas do Professor
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linha 01 — Importação do React
- Linha 02 — Separação entre importação e componente
- Linha 03 — Declaração do Function Component
Desestruturação de Props
- Linhas 04–08 — Retorno JSX
- Linha 06 — Exibição da Prop e quebra de linha
- Linha 09 — Finalização do componente
Utilizando o Componente Labelln
- Label
- Labelln
Props: Componente Pai → Componente Filho
Props e Reutilização
📌 Conceitos-Chave Envolvidos
💡 Dicas do Professor
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linha 01 — Importação do React
- Linha 02 — Separação entre importação e componente
- Linha 03 — Declaração do Function Component
- Linhas 04–06 — Retorno do campo de entrada
- Linha 07 — Finalização do componente
Utilizando o Componente InputText
Props em Atributos JSX
Input Não Controlado
📌 Conceitos-Chave Envolvidos em InputText
💡 Dicas do Professor
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linha 01 — Importação do React
- Linha 02 — Separação entre importação e componente
- Linha 03 — Declaração do componente Button
- Linhas 04–10 — Método render()
- Linhas 06–08 — Elemento <button> e Prop valor
- Linha 11 — Finalização da classe
Utilizando o Componente Button
Evolução da Composição da Interface
📌 Conceitos-Chave Envolvidos
💡 Dicas do Professor
💻 Código Completo
📘 Comentários e Explicações Linha a Linha
- Linhas 01–04 — Importação dos componentes
- Linha 05 — Separação entre importações e componente
- Linhas 06–17 — Definição do componente Login
- Linhas 07–16 — Retorno JSX
- Linhas 08 e 15 — Fragmento
- Linha 09 — Título da interface
- Linhas 10–11 — Campo destinado ao usuário
- Linhas 12–13 — Campo destinado à senha
- Linha 14 — Botão da interface
- Linha 18 — Separação antes da exportação
- Linha 19 — Exportação do componente
Passagem de Props
Props Diferentes para Componentes Diferentes
Reutilização de Componentes
Separação de Responsabilidades
Hierarquia Completa da Aplicação
Composição × Reutilização × Props
- Composição
- Reutilização
- Props
Formulário Apresentado no Exemplo
📌 Conceitos-Chave Envolvidos
💡 Dicas do Professor
📌 Conceitos-Chave Envolvidos
Integração dos Conceitos
Componentes de Classe × Componentes Funcionais
- Componentes de Classe
- Componentes Funcionais
Props e Reutilização
Componentização e Separação de Responsabilidades
💡 Dicas do Professor
💡 Resumo Final
📌 O que você aprendeu
📚 Exercícios de Fixação

Introdução​

🎯 Objetivos de Aprendizagem​

Estrutura do Projeto ReactJS​

Do index.html aos Componentes​

Componentização​

Componentes de Classe e Componentes Funcionais​

Componentes de Classe​

Componentes Funcionais​

Introdução às Props​

📌 Primeiros Conceitos-Chave​

💡 Dicas do Professor​

Arquivo index.html​

💻 Código Completo​

📘 Comentários e Explicações Linha a Linha​

Linhas 01–02 — Estrutura inicial do documento​

Linhas 03–08 — Cabeçalho da página​

Linhas 09–12 — Corpo da página e inicialização da aplicação​

Linha 13 — Finalização do documento​

O Papel do root​

O Papel de type="module"​

📌 Conceitos-Chave Envolvidos​

💡 Dicas do Professor​

Arquivo main.jsx​

💻 Código Completo​

📘 Comentários e Explicações Linha a Linha​

Linhas 01–04 — Importações iniciais​

Linha 05 — Separação entre importações e inicialização​

Linha 06 — Criação da raiz React​

Linhas 07–11 — Renderização da aplicação​

Relação entre index.html e main.jsx​

StrictMode​

createRoot()​

O Componente Raiz App​

CSS Global​

📌 Conceitos-Chave Envolvidos​

💡 Dicas do Professor​

Componente App.jsx​

💻 Código Completo​

📘 Comentários e Explicações Linha a Linha​

Linha 01 — Importação do componente Login​

Linha 02 — Separação entre importação e componente​

Linhas 03–09 — Definição do componente App​

Linhas 04–08 — Retorno da interface com JSX​

Linhas 05 e 07 — Utilização de Fragmento​

Linha 06 — Renderização do componente Login​

Linha 10 — Separação antes da exportação​

Linha 11 — Exportação do componente​

Function Component​

JSX​

Fragmentos​

Composição de Componentes​

Relação entre main.jsx e App.jsx​

📌 Conceitos-Chave Envolvidos​

💡 Dicas do Professor​

Componentes Label.jsx e Labelln.jsx​

Componente Label.jsx

💻 Código Completo​

📘 Comentários e Explicações Linha a Linha​

Linha 01 — Importação do React​

Linha 02 — Separação entre importação e componente​

Linha 03 — Declaração do componente de classe​

Linhas 04–10 — Método render()​

Linhas 06–08 — Fragmento e utilização da Prop​

Linha 11 — Finalização da classe​

Utilizando o Componente Label​

📌 Conceitos-Chave Envolvidos em Label​

💡 Dicas do Professor​

Componente Labelln.jsx

💻 Código Completo​

📘 Comentários e Explicações Linha a Linha​

Linha 01 — Importação do React​

Linha 02 — Separação entre importação e componente​

Linha 03 — Declaração do Function Component​

Desestruturação de Props​

Linhas 04–08 — Retorno JSX​

Linha 06 — Exibição da Prop e quebra de linha​

Linha 09 — Finalização do componente​

Utilizando o Componente Labelln​

Comparando Label e Labelln

Label​

Introdução

🎯 Objetivos de Aprendizagem

Estrutura do Projeto ReactJS

Do `index.html` aos Componentes

Componentização

Componentes de Classe e Componentes Funcionais

Componentes de Classe

Componentes Funcionais

Introdução às Props

📌 Primeiros Conceitos-Chave

💡 Dicas do Professor

Arquivo `index.html`

💻 Código Completo

📘 Comentários e Explicações Linha a Linha

Linhas 01–02 — Estrutura inicial do documento

Linhas 03–08 — Cabeçalho da página

Linhas 09–12 — Corpo da página e inicialização da aplicação

Linha 13 — Finalização do documento

O Papel do `root`

O Papel de `type="module"`

📌 Conceitos-Chave Envolvidos

💡 Dicas do Professor

Arquivo `main.jsx`

💻 Código Completo

📘 Comentários e Explicações Linha a Linha

Linhas 01–04 — Importações iniciais

Linha 05 — Separação entre importações e inicialização

Linha 06 — Criação da raiz React

Linhas 07–11 — Renderização da aplicação

Relação entre `index.html` e `main.jsx`

`StrictMode`

`createRoot()`

O Componente Raiz `App`

CSS Global

📌 Conceitos-Chave Envolvidos

💡 Dicas do Professor

Componente `App.jsx`

💻 Código Completo

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do componente `Login`

Linha 02 — Separação entre importação e componente

Linhas 03–09 — Definição do componente `App`

Linhas 04–08 — Retorno da interface com JSX

Linhas 05 e 07 — Utilização de Fragmento

Linha 06 — Renderização do componente `Login`

Linha 10 — Separação antes da exportação

Linha 11 — Exportação do componente

Function Component

JSX

Fragmentos

Composição de Componentes

Relação entre `main.jsx` e `App.jsx`

📌 Conceitos-Chave Envolvidos

💡 Dicas do Professor

Componentes `Label.jsx` e `Labelln.jsx`

Componente `Label.jsx`

💻 Código Completo

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do React

Linha 02 — Separação entre importação e componente

Linha 03 — Declaração do componente de classe

Linhas 04–10 — Método `render()`

Linhas 06–08 — Fragmento e utilização da Prop

Linha 11 — Finalização da classe

Utilizando o Componente `Label`

📌 Conceitos-Chave Envolvidos em `Label`

💡 Dicas do Professor

Componente `Labelln.jsx`

💻 Código Completo

📘 Comentários e Explicações Linha a Linha

Linha 01 — Importação do React

Linha 02 — Separação entre importação e componente

Linha 03 — Declaração do Function Component

Desestruturação de Props

Linhas 04–08 — Retorno JSX

Linha 06 — Exibição da Prop e quebra de linha

Linha 09 — Finalização do componente

Utilizando o Componente `Labelln`

Comparando `Label` e `Labelln`

`Label`