annabia95/project-solar-system

Este projeto contém os requisitos realizados por Anna Beatriz Garcia Trajano de Sá enquanto estudava na Trybe 🚀

Project Solar System

Neste projeto desenvolvi um modelo do sistema solar. Ao utilizar essa aplicação uma pessoa usuária é capaz de:

• Visualizar todos os planetas do sistema solar renderizados na tela;
• Visualizar todas as cartas com informações sobre missões espaciais;

Essa aplicação foi desenvolvida em React com criação de componentes de classe e passagem de props.

Veja o exemplo a seguir do layout do projeto!

Demo

Instalação do projeto localmente:

Após cada um dos passos, haverá um exemplo do comando a ser digitado para fazer o que está sendo pedido, caso tenha dificuldades e o exemplo não seja suficiente, não hesite em me contatar em annagarcia@id.uff.br

1. Abra o terminal e crie um diretório no local de sua preferência com o comando mkdir:

  mkdir projetos

2. Entre no diretório que acabou de criar e depois clone o projeto:

  cd projetos
  git clone git@github.com:annabia95/project-solar-system.git

3. Acesse o diretório do projeto e depois utilize o comando npm i para instalar todas as dependências necessárias:

  cd project-solar-system
  npm i

4. Por último, rode o comando npm start e acesse o projeto via browser, no caminho http://localhost:3000/project-solar-system.

  npm start

Habilidades Desenvolvidas

Neste projeto, desenvolvi as seguintes habilidades:

• 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

Escopo do Projeto

Requisitos do projeto

1. Crie um componente chamado Header
2. Crie um componente chamado SolarSystem
3. Crie um componente chamado Title
4. Renderize o componente Title dentro do componente SolarSystem
5. Crie um componente chamado PlanetCard
6. Renderize uma lista com os planetas do Sistema Solar
7. Crie um componente chamado Missions.
8. Renderize o componente Title dentro do componente Missions
9. Crie um componente chamado MissionCard
10. Renderize uma lista com as missões espaciais