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

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

2.2 - Mentorias/Materiais complementares

• Mentoria Academia Front - Revisando React
• Pílulas do Conhecimento: Extensão React Snippets e React PropTypes Generate - Tribo A | Tribo B - André Horman
• Academia de React: Lessons Learned in React - Tribo A | Tribo B - Pedro (Sincero)

2.3 - Conteúdos de soft skills

• Os sabotadores já começaram a aparecer nesse projeto? Relembre aqui os tipos de sabotadores e faça aqui o teste para acompanhar aqueles que mais estão te travando no dia a dia. Rotulá-los e interromper seus pensamentos repetitivos é uma das técnicas que podem minimizar seus efeitos.
• A rotinas de estudo parece muito puxada? Confira aqui as dicas da Forbes Carreira para evitar um burnout acadêmico.
• Quer deixar seu GitHub mais atraente? Confira aqui a dica do Cauê Peruque (Tribo B) sobre esse tema.

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

• Colinha para o React - Tribo A | Tribo B - Josiane de Lima (Tribo A)
• Extensão do VSCODE ***ES7+ React/Redux/React-Native snippets ***- Fernando Fachin (Tribo A) e Cauê Peruque (Tribo B)
• Trabalhando com key e Renderização de **Array no React **-  Tribo A Tribo B - Felipe Lima Coelho Tribo A | Tribo B
• Snippets/autocomplete de HTML em React - João Astolfi (Tribo A)
• Caso queira migrar seu bundle de create-react-app para Vite** - **Cauê Peruque (Tribo B)
• Atribuindo uma 'key' de forma dinâmica - Joatan Carlos Farias Feitosa (Tribo B)
• Como criar Keys únicas para seus componentes react - Paulo William (Tribo B)
• Compreendendo o atributo Key - Henrique Ribeiro (Tribo B)

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!