Esse projeto contém uma série de informações sobre o que eu aprendi aqui na Trybe ao longo do curso de desenvolvimento web da Trybe.
As habilidades desenvolvidas nesse projeto são:
- Utilizar JSX no React
- Utilizar corretamente o método render() para renderizar seus componentes
- Utilizar import para trazer componentes em diferentes arquivos
- Criar componentes de classe em React
- Criar múltiplos componentes a partir de um array
- Fazer uso de props corretamente
- Fazer uso de PropTypes para validar as props de um componente
Esse projeto foi proposto pelo curso de desenvolvimento web da Trybe.
Essa página foi feita usando HTML, CSS e React-JavaScript.
Os commits foram feitos de acordo com os requisitos finalizados.
Todo o projeto foi feita na branch 'juliana-oliveira-project-solar-system', isso por conta da exigência do curso.
Antes de realizar o projeto, precisei instalar as dependências usando npm install.
O projeto poderá ser visualizado através da extensão do Visual Studio Code que permite criar um servidor HTTP para servir páginas HTML, chamada Live Server.
Os testes usando foram ESLint e Cypress, através dos comandos:
- npm run cypress:open
- npm run lint:styles
Esse foi um projeto individual,que desenvolvido somente por Juliana Oliveira.
Foi usado Visual Studio Code, além do Trello que auxiliou na organização das tarefas.
Nenhum.
No trabalho do desenvolvimento de software a gente sempre tem prazos, muitas vezes os prazos são apertados.
Por outro lado, eu não quero criar algo que não entendo perfeitamente, como também fazer códigos rápidos pode levar a erros que podem demorar muito pra corrigir.
Por isso, usei e sempre uso o método Baby Steps, que é uma estratégia de abordar o desafio passo à passo, defensivamente.
Baby steps é um termo em inglês que quer dizer passos de bebê. Refere-se a fazer as coisas, quaisquer que sejam, devagar, com calma, passo a passo.
- Crie um componente chamado
Header
dentro da pastasrc/components
. Este componente irá renderizar o título principal da página. - Ele deve conter uma tag
header
e, dentro dela, uma tagh1
. O texto da tagh1
deve ser "Sistema Solar". - Renderize o componente
Header
dentro do componente principalApp
.
- Crie um componente chamado
SolarSystem
dentro da pastasrc/components
. - Este componente deve ter uma
div
que envolva todo seu conteúdo e que tenha o atributodata-testid="solar-system"
. - Renderize o componente
SolarSystem
abaixo doHeader
, dentro do componente principalApp
.
- Crie um componente chamado
Title
dentro da pastasrc/components
. - O componente
Title
deve receber uma propheadline
. - Ele deve conter uma tag
h2
, que deve renderizar o texto recebido pela propheadline
.
- Renderize o componente
Title
dentro do componenteSolarSystem
. - O componente
Title
deve ser renderizado recebendo a propheadline
com o valor "Planetas".
- Crie um componente chamado
PlanetCard
dentro da pastasrc/components
. - O componente
PlanetCard
deve receber duas props: uma chamadaplanetName
e outra chamadaplanetImage
. - O componente
PlanetCard
deve ter umadiv
que envolva todo seu conteúdo e que tenha o atributodata-testid="planet-card"
. - O componente
PlanetCard
deve renderizar o texto recebido pela propplanetName
. Sugerimos a utilização de tags de Conteúdo de Fluxo, como<p>
, que deve conter o atributodata-testid="planet-name"
. - O componente
PlanetCard
deve renderizar uma imagem que tenha o atributosrc
com o valor recebido pela propplanetImage
. - Além do atributo
src
, a imagem renderizada deve ter o atributoalt
com o textoPlaneta {planetName}
, onde{planetName}
é o valor recebido pela propplanetName
.
- Renderize uma lista com os planetas do Sistema Solar dentro component
SolarSystem
. - Utilize o componente
PlanetCard
para renderizar cada item da lista de planetas. - Você encontrará a lista com os nomes e as imagens de cada planeta do Sistema Solar no arquivo
src/data/planets.js
. - Você deve importar a lista no componente
SolarSystem
usando o código:
import planets from '../data/planets';
- A lista de planetas é um array de objetos no seguinte formato:
{
name: "Nome do planet",
image: "caminho-para-imagem-do-planeta"
}
- Para cada planeta da lista, você deverá renderizar um componente
PlanetCard
, passando o atributoname
para a propplanetName
e o atributoimage
para a propplanetImage
.
💡 Dica: lembre-se do método que te permite criar vários componentes iguais a partir dos valores presentes em um array. Lembre-se que ao renderizar uma lista, você deve passar o atributo
key
para cada item. Você pode usar o nome do planeta comokey
.
- Crie um componente chamado
Missions
dentro da pastasrc/components
. - Este componente deve ter uma
div
que envolva todo seu conteúdo e que tenha o atributodata-testid="missions"
. - Renderize o componente
Missions
abaixo doSolarSystem
, dentro do componente principalApp
.
- Renderize o componente
Title
dentro do componenteMissions
. - O componente
Title
deve ser renderizado recebendo a propheadline
com o valor "Missões"
-
Crie um componente chamado
MissionCard
dentro da pastasrc/components
. -
O componente
MissionCard
deve receber quatro props:name
year
country
destination
-
O componente
MissionCard
deve ter umadiv
que envolva todo seu conteúdo e que tenha o atributodata-testid="mission-card"
. -
O componente
MissionCard
deve renderizar o texto recebido pela propname
. Sugerimos a utilização de tags de Conteúdo de Fluxo, como<p>
, que deve conter o atributodata-testid="mission-name"
. -
O componente
MissionCard
deve renderizar o texto recebido pela propyear
. Sugerimos a utilização de tags de Conteúdo de Fluxo, como<p>
, que deve conter o atributodata-testid="mission-year"
. -
O componente
MissionCard
deve renderizar o texto recebido pela propcountry
. Sugerimos a utilização de tags de Conteúdo de Fluxo, como<p>
, que deve conter o atributodata-testid="mission-country"
. -
O componente
MissionCard
deve renderizar o texto recebido pela propdestination
. Sugerimos a utilização de tags de Conteúdo de Fluxo, como<p>
, que deve conter o atributodata-testid="mission-destination"
.
- Renderize uma lista com as missões espaciais dentro componente
Missions
. - Utilize o componente
MissionCard
para renderizar cada item da lista de missões. - Você encontrará a lista com as informações de cada missão espacial no arquivo
src/data/missions.js
. - Você deve importar a lista no componente
Missions
usando o código:
import missions from '../data/missions';
- A lista de missões espaciais é um array de objetos no seguinte formato:
{
name: 'Nome da missão',
year: 'Ano de lançamento da missão',
country: 'País que lançou a missão',
destination: 'Destino da missão',
}
- Para cada missão espacial da lista, você deverá renderizar um componente
MissionCard
, passando o cada atributo para sua respectiva prop.
💡 Dica: lembre-se do método que te permite criar vários componentes iguais a partir dos valores presentes em um array. Lembre-se que ao renderizar uma lista, você deve passar o atributo
key
para cada item. Você pode usar o nome da missão comokey
.