Projeto Solar System

planejamento-solar-system-.md

Projeto Solar System 🌌

⚠️ ATENÇÃO: Esse checklist é apenas um template. Para replicar realize o fork deste gist! ⚠️

1. O que preciso saber para fazer o projeto? 🤔

• Criar componentes de classe em React;
• Utilizar JSX no React;
• Utilizar o método render() para renderizar seus componentes;
• Fazer uso de props corretamente;
• Fazer uso de PropTypes para tipagem;

2. Que conteúdos revisar? 📚

2.1 - Aulas do Course

1. FE2.1 - Hello World no React
2. FE2.2 - Componentes no React

2.2 - Mentorias/Materiais complementares

• Mentoria Invertida - Pokédex Components
• Mentoria Academia Front - Revisando React

2.3 - Conteúdos de soft skills

• Você tem priorizado os projetos na sua rotina? Ainda tem dúvidas sobre como definir prioridades e metas na Trybe? Relembre aqui as categorias da gestão do tempo e como se organizar.
• Que tal planejar o desenvolvimento do seu projeto utilizando o conceito de pensamento visual? Relembre aqui como organizar suas ideias e tarefas de forma criativa e objetiva.
• Quanto maior o nosso repertório na área de desenvolvimento web, mais inspirações e ideias diferentes temos para os nossos projetos e resolução de problemas. Relembre as dicas que a equipe preparou para você, Tribo A e Tribo B.
• Como você tem trazido seus feedbacks para o time de Front-end sobre os dias de projeto? Relembre aqui os tipos de feedback e as características de um feedback bem construído.

2.4 - Dicas da Turma / Instrução (Em constante atualização)

• Documentação do React e React Dev Tools - Marlon Couto
• Star Emoji - Lívio Lopes, Rafael Estrioli e Eliton da Rosa
• Compartilhamento de tela no Zoom - Bárbara Zaidan

3. Checklist ✅

3.1 - Planejamento

• Abrir o PR para esse projeto
• Criar seu cronograma de planejamento, use como base a seção 2 de Frontend

3.2 - Requisitos obrigatórios

• 01 - Crie um componente chamado Header
• 02 - Crie um componente chamado SolarSystem
• 03 - Crie um componente chamado Title
• 04 - Renderize o componente Title dentro do componente SolarSystem
• 05 - Crie um componente chamado PlanetCard
• 06 - Renderize uma lista com os planetas do Sistema Solar
• 07 - Crie um componente chamado Missions
• 08 - Renderize o componente Title dentro do componente Missions
• 09 - Crie um componente chamado MissionCard
• 10 - Renderize uma lista com as missões espaciais

*Dica 1 : Os requisitos foram montados seguindo uma linha racional de desenvolvimento, é recomendável seguir ordem proposta pelo ReadMe.

4. Planejamento 📆

O projeto possui 10 requisitos obrigatórios, para ser aprovado dentro do prazo regular vai ser necessário fazer no mínimo 8 dos 10 requisitos obrigatórios.

Como sair do zero no Solar System ?

• O primeiro passo é:

  • Fazer a leitura do README, pois ele é muito importante para que você possa entender/desenvolver o projeto (principalmente a parte das dicas)
  • Clonar o projeto para sua maquina e criar uma branch para você desenvolver seu projeto

• Segundo Passo:

  • Cuidado com pequenos erros. São pequenos, mas fazem toda a diferença! Por exemplo, aqui vai uma dica fundamental:*

    • Rodar o npm install antes de iniciar o projeto e sempre dentro da pasta do projeto
    • Lembrar sempre que o nome da prop que eu definir no componente é o nome que eu vou usar dentro do componente.

    <ComponentX souUmaProp='xablau' />
    
    ...
    
    class ComponentX extends React.Component {
      render () {
        const { souUmaProp } = this.props
        return (
          <h1> { souUmaProp } </h1>
        )
      }
    }
    
    // No navegador vai aparecer o h1 com o texto que está dentro da prop, ou seja, **xablau**.

• Terceiro Passo:

  • Fazer o commit para cada requisito e dar o push para o GitHub. Tá com dúvida? Pode contar com a gente nas mentorias/monitorias e aqui no Slack também!
  • Lembrando também que teremos mentoria com os nossos Summers para auxiliar nos projetos.

• Dúvidas comuns - Se outras pessoas tiveram, é possível que você também tenha!

  • Ao rodar o npm install, npm start, npm test, ter certeza que entrou na pasta correta do projeto;
  • Lembrar de definir os propTypes em cada componente que estiver recebendo props;
  • Colocar a key sempre que estiver renderizando uma lista de elementos HTML no React;

5. Comemorar 🍾

Ao final desse projeto, você vai ter uma aplicação muito estruturada usando boas práticas de desenvolvimento e que pode (e deve) ser compartilhado com muito orgulho no seu Linkedin. Portanto, vamos com tudo para esse projeto!