lucas-da-silva/project-solar-system

Bem vindo ao repositório do projeto Solar System!

Comentários

Primeiro projeto utilizando React! Foi um projeto simples de fazer, basicamente, criar um site utilizando diversos componentes React. Creio que ficou bonito, conseguir aplicar um pouco de CSS.

---

Instalação do projeto localmente

1. No terminal, em um diretório de sua escolha, clonar o repositório:

git clone git@github.com:lucas-da-silva/solar-system.git

2. Dentro do repositório do projeto, instalar as dependências:

npm install

3. Após isso, rodar o comando que vai abrir no navegador uma aba com projeto:

npm start

---

Requisitos

1. Crie um componente chamado Header

Crie um componente chamado Header dentro da pasta src/components. Este componente irá renderizar o título principal da página.

• Ele deve conter uma tag header e, dentro dela, uma tag h1. O texto da tag h1 deve ser "Sistema Solar";

• Renderize o componente Header dentro do componente principal App.

---

2. Crie um componente chamado SolarSystem

Crie um componente chamado SolarSystem dentro da pasta src/components.

• O componente SolarSystem deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="solar-system";

• Renderize o componente SolarSystem abaixo do Header, dentro do componente principal App.

---

3. Crie um componente chamado Title

Crie um componente chamado Title dentro da pasta src/components.

• O componente Title deve receber uma prop headline;

• Ele deve conter uma tag h2, que deve renderizar o texto recebido pela prop headline.

---

4. Renderize o componente Title dentro do componente SolarSystem

Renderize o componente Title dentro do componente SolarSystem.

• O componente Title deve ser renderizado recebendo a prop headline com o valor "Planetas".

---

5. Crie um componente chamado PlanetCard

Crie um componente chamado PlanetCard dentro da pasta src/components.

• O componente PlanetCard deve receber duas props: uma chamada planetName e outra chamada planetImage;

• O componente PlanetCard deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="planet-card";

• O componente PlanetCard deve renderizar o texto recebido pela prop planetName. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="planet-name";

• O componente PlanetCard deve renderizar uma imagem que tenha o atributo src com o valor recebido pela prop planetImage;

• Além do atributo src, a imagem renderizada deve ter o atributo alt com o texto Planeta {planetName}, onde {planetName} é o valor recebido pela prop planetName.

---

6. Renderize uma lista com os planetas do Sistema Solar

Renderize uma lista com os planetas do Sistema Solar dentro do componente 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 planeta",
  image: "caminho-para-imagem-do-planeta"
}

• Para cada planeta da lista, você deverá renderizar um componente PlanetCard, passando o atributo name para a prop planetName e o atributo image para a prop planetImage.

💡 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 como key.

---

7. Crie um componente chamado Missions.

Crie um componente chamado Missions dentro da pasta src/components.

• Este componente deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="missions";

• Renderize o componente Missions abaixo do SolarSystem, dentro do componente principal App.

---

8. Renderize o componente Title dentro do componente Missions.

Renderize o componente Title dentro do componente Missions.

• O componente Title deve ser renderizado recebendo a prop headline com o valor "Missões".

---

9. Crie um componente chamado MissionCard.

Crie um componente chamado MissionCard dentro da pasta src/components.

• O componente MissionCard deve receber quatro props:

  • name
  • year
  • country
  • destination

• O componente MissionCard deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="mission-card";

• O componente MissionCard deve renderizar o texto recebido pela prop name. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-name";

• O componente MissionCard deve renderizar o texto recebido pela prop year. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-year";

• O componente MissionCard deve renderizar o texto recebido pela prop country. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-country";

• O componente MissionCard deve renderizar o texto recebido pela prop destination. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-destination".

---

10. Renderize uma lista com as missões espaciais

Renderize uma lista com as missões espaciais dentro do 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 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 como key.

---