Figura 1.

Componente App

Isso foi feito através do Código 1.

import React from 'react';

import './App.css';

function App()

{ return (

<div className="App"> </div>

);

} export default App;

Código 1. Código utilizado para criar o componente App

Podemos criar e exportar um componente utilizando uma função nomeada

como pode ser visto no Código 2.

import React from 'react';

import './App.css';

function App()

{ return (

<div className="App"> </div>

);

} export default App;

Código 2. Componente criado utilizando uma função nomeada

Figura 1. Componente Header

Criando uma pasta para os componentes

Para organizar melhor os arquivos do nosso código vamos criar uma pasta
chamada ‘componentes’ dentro do diretório src.

Dentro do diretório componentes vamos criar uma pasta chamada Header e

nela um arquivo chamado index.js. Esse arquivo terá o código do nosso
componente Header, como mostra a Figura 2.
Figura 2. Arquivo index.js

Abra esse arquivo e vamos codar o nosso componente.

Criando o Header

No Código 1 temos o nosso componente.

import React from 'react';

function Header()

{ return(

<header>Trabalhando com componentes</header>

);

} export default Header;

Código 1. Componente header

Entendendo o código

Linha 1:

import React from 'react';

Sempre que formos criar um novo componente, ou seja, um elemento que

vamos colocar na tela, precisamos importar o componente React da
dependência react.

Dessa forma o React vai entender que esse código é um componente que
será renderizado na tela. Isso é uma mecânica padrão da construção de
componentes com React.

Linha 3:

function Header() {

Na linha 3 criamos uma função JavaScript com o nome do próprio

componente - novamente, um comportamento padrão na codificação de
componentes React.

Linha 4:

return (

Todo componente precisa retornar o que será renderizado na tela. Isso é feito
utilizando a palavra-chave return.

Nosso componente está quase pronto porém ele ainda não vai exibir nada na
tela. O que precisamos agora é colocar dentro dos parênteses o que vamos
exibir, nesse caso o texto "Trabalhando com componentes".

Vamos colocar uma tag JSX <header> (ver nota) com o texto "Trabalhando
com componentes".

Vejamos novamente o código atual do componente:

import React from 'react';

function Header()
 { return (

<header>Trabalhando com componentes</header>

);

A sintaxe que usamos dentro do return se chama JSX e é bem parecida

com HTML. Você não precisa se preocupar em se tornar um expert em

JSX, pois a sintaxe é facilmente aprendida durante a programação em

React - e é muito similar ao HTML tradicional.

Linha 9:

export default Header;

Agora com nosso componente criado precisamos exportá-lo para que o

componente App possa consumi-lo. Fazemos isso com o uso de export.

Nosso primeiro componente está pronto: veja como ficou no Código 2.

import React from 'react';

function Header()

{ return (

<header>Trabalhando com componentes</header>

);

} export default Header;

Código 2. Novo código do componente heade

Antes de criar o componente HomePage vamos criar o componente Footer

que é muito similar ao componente Header, como mostra a Figura 1.

Figura 1. Componente Footer

Criando o componente Footer

Crie uma pasta chamada Footer e nela um arquivo chamado index.js no

mesmo diretório que estamos salvando nossos componentes
(src/componente), como mostra a Figura 2.

Figura 2. Diretório footer

Abra o arquivo e digite o Código 1.

import React from 'react'; export default function Footer() {

return ( <footer>Desenvolvido com React</footer> ); }

Código 1. Arquivo index.js

Você já deve estar se familiarizando com essa estrutura, mas vamos

relembrar a funcionalidade desse código.

Entendendo o código

Linha 1:

import React from 'react';

Lembrando que precisamos importar o React da dependência react para

que ele entenda que este é um componente que será exibido na tela.

Linha 3:
export default function Footer() {

Estamos criando uma função JavaScript com o nome do próprio componente.

Dessa vez já estamos exportando esse componente direto no cabeçalho da
função.

Linha 4:

return (

Utilizamos a palavra-chave return e colocaremos entre parênteses o que será

exibido na tela para o usuário.

Linha 5:

<footer>Desenvolvido com React</footer>

Dessa vez utilizamos outra tag JSX chamada <footer> com o texto
Desenvolvido com React.

Perceba que criar e exportar componentes no React é muito fácil e com

pouco código já criamos mais um componente. Chegou a hora de vermos os
componentes na tela, assunto da próxima aula.

Com nossos dois componentes criados (Header e Footer) chegou a hora de

exibi-los no navegador.

A princípio não vamos nos preocupar com a estilização e sim em aprender a

parte lógica. No final deste curso vamos estilizar toda nossa aplicação.

Nesta aula vamos importar os componentes Header e Footer para nosso

componente principal App.

Veja na Figura 1 como ficará nossa aplicação.

Figura 1. Aplicação em execução
Abra seu arquivo App.js. Ele terá a seguinte estrutura apresentada no

Código 1.

import React from 'react';

import './App.css';

function App() {

return ( <div className="App"> </div> );

export default App;

Código 1. Arquivo App.js

Vamos agora importar nossos componentes.

Importando componentes

O código do componente App modificado segue no Código 2.

import React from 'react';

import './App.css';

import Header from './componentes/Header/';

import Footer from './componentes/Footer/';

function App() {
return ( <div className="App">

<Header />

<Footer />

</div> );

export default App;

Código 2. Componente App modificado

Entendendo o código

Linhas 4 e 5:

import Header from './componentes/Header/';

import Footer from './componentes/Footer/';

Nestas linhas estamos, basicamente, importando os componentes Header e

Footer para dentro do nosso arquivo App.js. Desta forma conseguimos

exibi-los no nosso componente App.

Comentários importantes:

1. Esses componentes estão em uma pasta dentro do mesmo diretório do

arquivo App.js, por isso utilizamos ./componentes/, o caminho até
chegar ao nosso arquivo.
2. Por se tratar de um arquivo chamado ‘index.js’ dentro da pasta de
ambos os componentes, não precisamos inserir o seu nome, ou seja,
 ./componentes/Header/index.js. Como não foi passado o nome
do arquivo, o JavaScript vai chamar o arquivo principal da pasta que
será o que possui o nome index.js.

Podemos perceber uma ligeira diferença de sintaxe nos códigos de

importação - veja:

import React from 'react';

import Header from './componentes/Header/';

Observe que na primeira linha não indicamos nenhum diretório. Na segunda linha,

indicamos o diretório ./componentes/.

Essa diferença existe pois na primeira linha estamos importando um componente de uma

dependência (react). Na segunda linha estamos importando o componente do diretório da

aplicação.

Não se preocupe: quanto mais você programar em React, mais natural para você será essa

mecânica.
Linhas 10 e 11:

<Header />

<Footer />

Agora que já importamos nossos componentes (linhas 4 e 5), basta inseri-los dentro do
código JSX.

Repare que eles são codificados como se fossem uma tag comum, ou seja, iniciando com <
e finalizando com />.

Devemos seguir o padrão de escrita case sensitive utilizado no arquivo do

componente. Ou seja, usamos nesse exemplo a primeira letra maiúscula,

seguindo o padrão utilizado. A convenção é criar componentes com a

primeira letra em maiúsculo.

Tudo pronto agora basta abrir o seu navegador com a aplicação em execução e veja o
resultado, como mostrado na Figura 1 . Caso já tenha encerrado a sua aplicação execute
novamente o comando yarn start no terminal.

Figura 1. Aplicação em execução

Nossa aplicação está quase pronta, agora só falta o corpo que será o componente
HomePage, mas antes disso note que dentro dele possui um outro componente menor, o
Card.

Nesta aula vamos criar o componente Card apresentado na Figura 1.

Figura 1. Componente Card

Criando o Card

Crie uma nova pasta com o nome Card e dentro dela o arquivo index.js no mesmo
diretório que estamos salvando nossos componentes (src/componentes/), como vemos
na Figura 2.
Figura 2. Estrutura de pastas

Abra o arquivo e digite o Código 1.

import React from 'react';

export default

function Card() {

return (

<div>

<p>Componentes:</p>

<p>Facilita em manter partes menores funcionando

corretamente</p>

<p>Você pode reutilizá-los, ou seja, menos código para se

escrever</p>
</div>

);

Código 1. Arquivo index.js do componente card

Vamos analisar as partes do código que ainda não conhecemos:

Linhas 5 a 9:

<div>

<p>Componentes:</p>

<p>Facilita em manter partes menores funcionando

corretamente</p>

<p>Você pode reutilizá-los, ou seja, menos código para se

escrever</p>

</div>

Na linha 5 utilizamos a tag <div>. Nas linhas 6, 7 e 8 utilizamos a tag <p>, um texto e em
seguida fechamos essa tag </p>. Assim como no HTML essa tag representa um parágrafo.

Nosso componente Card está criado, na próxima aula vamos criar nosso último
componente HomePage.
Chegamos à criação do nosso último componente HomePage. Este
componente é responsável pelo corpo da nossa aplicação que neste caso é
composto por três componentes Card, como vemos na Figura 1.

Figura 1. Componente HomePage

Criando o HomePage

Crie uma pasta com o nome HomePage e dentro um arquivo chamado

index.js e insira o seguinte código no arquivo que acabamos de criar,
como vemos no Código 1.

import React from 'react';

import Card from '../Card/';

export default function HomePage()

return (
<div>

<Card /> <Card /> <Card />

</div>

);

Código 1.Código de index.js de homepage

Mais uma vez temos aqui um código padrão de criação de componente.

Vamos analisar e reforçar apenas algumas partes:

Linha 2:

import Card from '../Card/';

Vejamos: Basicamente, estamos importando o componente Card que

criamos na aula anterior.

Por se tratar de um arquivo em um diretório acima, utilizamos ../ e em

seguida o caminho do componente (no caso é a pasta Card/).

Linhas 7,8 e 9:

<Card /> <Card /> <Card />

Importamos o componente Card da mesma forma que fizemos com os

componentes Header e Footer. Note que estamos repetindo <Card />, com
isso teremos três componentes Card na nossa HomePage.

Agora que nosso componente HomePage está criado, só precisamos importar

ele dentro do nosso componente principal App, porém esse é o assunto para
a próxima aula.
Com nosso último componente criado só precisamos importá-lo no
componente principal e dessa forma teremos o seguinte resultado
apresentado na Figura 1.

Figura 1. Resultado final da aplicação

O código final do nosso arquivo App.js ficará como o apresentado no

Código 1.

import React from 'react';

import './App.css';

import Header from './componentes/Header/';

import Footer from './componentes/Footer/';

import HomePage from './componentes/HomePage/';

function App() {
return (

<div className="App">

<Header />

<HomePage />

<Footer />

</div>

);

export default App;

Código 1. Arquivo final

Note os seguintes pontos:

Linha 6:

import HomePage from './componentes/HomePage/';

Importamos o componente HomePage.

Linha 12:

<HomePage />

Inserimos o componente HomePage na estrutura do nosso componente App.

Posicionamos ele entre o Header e o Footer para que fique entre os dois.
Veja a aparência atual da nossa aplicação já apresentada na Figura 1.

Figura 1. Resultado final da aplicação

Veja na Figura 2 como queremos que ela fique.

Figura 2. Resultado que queremos da aplicação