Neste projeto, você terá a oportunidade de aplicar seus conhecimentos em React, utilizando o Create React App com Material UI, para criar um site de blog. O projeto consiste em três partes principais: uma lista de publicações, uma página de visualização de publicação e um formulário de contato. Além disso, você encontrará desafios específicos para cada uma dessas partes.
Nesta parte do projeto, você irá criar uma rota para o endereço "/contato" que renderizará o componente Contact
, a rota deve ser adicionada logo após a rota que renderiza o componente Post
Nesta parte do projeto, você irá criar uma página que exibirá uma lista de publicações. Aqui estão os desafios que você deve cumprir:
-
Renderizar condicionalmente o componente "Loading" com base no estado
isLoading
. -
Criar um estado chamado
posts
e inicializá-lo com um array vazio[]
. -
Utilizar o hook
useEffect
para, assim que a página carregar, executar o métodogetPosts
. -
Renderizar uma lista de posts utilizando o método
map
, exibindo o título, a data de criação e um link para visualizar o post completo.
Nesta parte do projeto, você irá criar uma página que permitirá a visualização de uma única publicação. Aqui estão os desafios que você deve cumprir:
-
Renderizar condicionalmente o componente "Loading" com base no estado
isLoading
. -
Criar um estado chamado
post
e um estado chamadopostCreator
, ambos inicializados comnull
. -
Utilizar o hook
useEffect
para, assim que o ID do post estiver disponível, executar o métodogetPost
. -
Utilizar outro hook
useEffect
para, assim que o post estiver disponível, executar o métodogetPostCreator
. -
Renderizar os valores
title
,photo_url
econtent_html
nos locais apropriados da página. -
Renderizar os créditos do post chamando o método
getCredits
no local apropriado.
Nesta parte do projeto, você irá criar um formulário de contato. Aqui estão os desafios que você deve cumprir:
-
Renderizar condicionalmente o componente "Loading" com base no estado
isLoading
. -
Adicionar o atributo
name
e o eventoonChange
aos componentesTextField
para que funcionem com o métodohandleChange
. -
Desabilitar o componente
Button
condicionalmente com a propdisabled
quandoisLoading
for verdadeiro ou o formulário não estiver válido. -
Corrigir o método
getAlert
com renderização condicional baseada no valor deerrorMessage
. -
Executar o método
sendData
quando o botão "Enviar" for clicado.
-
Baixe este projeto para sua máquina local.
-
Navegue até a pasta do projeto usando o terminal.
-
Instale as dependências do projeto com o comando
npm install
. -
Execute o projeto com o comando
npm start
. -
Acesse o projeto no seu navegador em
http://localhost:3000
.