👩‍💻 Project Solar System

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

🚀Começando

Esse projeto foi proposto pelo curso de desenvolvimento web da Trybe.

Desenvolvimento

Essa página foi feita usando HTML, CSS e React-JavaScript.

Commits

Os commits foram feitos de acordo com os requisitos finalizados.

Branch

Todo o projeto foi feita na branch 'juliana-oliveira-project-solar-system', isso por conta da exigência do curso.

Instalação

Antes de realizar o projeto, precisei instalar as dependências usando npm install.

Visualização do projeto

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.

Testes

Os testes usando foram ESLint e Cypress, através dos comandos:

• npm run cypress:open
  
• npm run lint:styles

Autores

Esse foi um projeto individual,que desenvolvido somente por Juliana Oliveira.

Ferramentas usadas

Foi usado Visual Studio Code, além do Trello que auxiliou na organização das tarefas.

Framework usado

Nenhum.

👣Requisitos

Metodologia usada

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.

👣Requisito 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.

👣Requisito 2. Crie um componente chamado SolarSystem

• Crie um componente chamado SolarSystem dentro da pasta src/components.
• Este componente 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.

👣Requisito 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.

👣Requisito 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".

👣Requisito 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.

👣Requisito 6. Renderize uma lista com os planetas do Sistema Solar

• 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 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.

👣Requisito 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.

👣Requisito 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"

👣Requisito 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".

👣Requisito 10. Renderize uma lista com as missões espaciais

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