{"id":18667701,"url":"https://github.com/beterrabaa/solar-system","last_synced_at":"2026-05-15T22:03:45.947Z","repository":{"id":116501839,"uuid":"585350976","full_name":"beterrabaA/solar-system","owner":"beterrabaA","description":"A React App to show the Solar system","archived":false,"fork":false,"pushed_at":"2023-01-10T03:22:01.000Z","size":10825,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-17T06:47:20.831Z","etag":null,"topics":["props","proptypes","react","reactjs"],"latest_commit_sha":null,"homepage":"https://beterrabaa.github.io/solar-system/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beterrabaA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-05T00:20:21.000Z","updated_at":"2023-03-27T19:47:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad8b0f76-ce38-40c3-8d04-d91d32e43885","html_url":"https://github.com/beterrabaA/solar-system","commit_stats":null,"previous_names":["beterrabaa/solar-system"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/beterrabaA/solar-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beterrabaA%2Fsolar-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beterrabaA%2Fsolar-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beterrabaA%2Fsolar-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beterrabaA%2Fsolar-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beterrabaA","download_url":"https://codeload.github.com/beterrabaA/solar-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beterrabaA%2Fsolar-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017237,"owners_count":26086015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["props","proptypes","react","reactjs"],"created_at":"2024-11-07T08:39:49.814Z","updated_at":"2025-10-13T23:32:52.033Z","avatar_url":"https://github.com/beterrabaA.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solar System\n\n![App Screenshot](./src/images/exampleApp.png)\n\n\nPara realizar o projeto, atente-se a cada passo descrito a seguir, e se tiver qualquer dúvida, nos envie por _Slack_! #vqv 🚀\n\nAqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um _Pull Request_ para colocar seus códigos.\n\n# Termos e acordos\n\nAo iniciar este projeto, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.\n\n# Entregáveis\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🤷🏽‍♀️ Como entregar\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Para entregar o seu projeto você deverá criar um *Pull Request* neste repositório.\n\n  Lembre-se que você pode consultar nosso conteúdo sobre [Git \u0026 GitHub](https://app.betrybe.com/course/4d67f5b4-34a6-489f-a205-b6c7dc50fc16/) e nosso [Blog - Git \u0026 GitHub](https://blog.betrybe.com/tecnologia/git-e-github/) sempre que precisar!\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e👨‍💻 O que deverá ser desenvolvido\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Neste projeto você desenvolverá um modelo do sistema solar! Ao utilizar essa aplicação, uma pessoa usuária deverá ser capaz de:\n\n    * Visualizar todos os planetas do sistema solar renderizados na tela;\n\n    * Visualizar todas as cartas com informações sobre missões espaciais;\n\n  Ao final deste projeto, sua aplicação deverá ser algo semelhante a essa [imagem](https://www.figma.com/file/vcire16CytAa1QWrriuunm/Sistema-Solar?node-id=0%3A1).\n\n  Caso queira utilizar a mesma imagem de fundo apresentada no figma, ela está sendo disponibilizada dentro da pasta `src/images`.\n\u003c/details\u003e\n\nLembre-se, todos os projetos que você desenvolve aqui na Trybe fazem parte do seu portfólio como pessoa desenvolvedora. Aproveite para testar suas habilidades aqui também!\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e:memo: Habilidades\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Neste projeto, verificaremos se você é capaz de:\n\n  * Utilizar JSX no React;\n\n  * Utilizar corretamente o método `render()` para renderizar seus componentes;\n\n  * Utilizar `import` para trazer componentes em diferentes arquivos;\n\n  * Criar componentes de classe em React;\n\n  * Criar múltiplos componentes a partir de um array;\n\n  * Fazer uso de `props` corretamente;\n\n  * Fazer uso de `PropTypes` para validar as `props de um componente`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🗓 Data de Entrega\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n  \n  * Este projeto é individual;\n  * Teremos `1` dia de projeto;\n  * Data para entrega final do projeto: `25/08/2022 14:00`.\n\n\u003c/details\u003e\n\n# Orientações\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e‼️ Antes de começar a desenvolver\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  1. Clone o repositório\n\n  - Use o comando: `git clone git@github.com:tryber/sd-024-a-project-solar-system.git`.\n  - Entre na pasta do repositório que você acabou de clonar:\n    - `cd sd-024-a-project-solar-system`\n\n  2. Instale as dependências\n\n  - `npm install`.\n  \n  3. Crie uma branch a partir da branch `master`\n\n  - Verifique que você está na branch `master`\n    - Exemplo: `git branch`\n  - Se não estiver, mude para a branch `master`\n    - Exemplo: `git checkout master`\n  - Agora crie uma branch à qual você vai submeter os `commits` do seu projeto\n    - Você deve criar uma branch no seguinte formato: `nome-de-usuario-nome-do-projeto`\n    - Exemplo: `git checkout -b joaozinho-sd-024-a-project-solar-system\u003e`\n\n  4. Adicione as mudanças ao _stage_ do Git e faça um `commit`\n\n  - Verifique que as mudanças ainda não estão no _stage_\n    - Exemplo: `git status` (deve aparecer listada a pasta _joaozinho_ em vermelho)\n  - Adicione o novo arquivo ao _stage_ do Git\n    - Exemplo:\n      - `git add .` (adicionando todas as mudanças - _que estavam em vermelho_ - ao stage do Git)\n      - `git status` (deve aparecer listado o arquivo _joaozinho/README.md_ em verde)\n  - Faça o `commit` inicial\n    - Exemplo:\n      - `git commit -m 'iniciando o projeto x'` (fazendo o primeiro commit)\n      - `git status` (deve aparecer uma mensagem tipo _nothing to commit_ )\n\n  5. Adicione a sua branch com o novo `commit` ao repositório remoto\n\n  - Usando o exemplo anterior: `git push -u origin joaozinho-sd-024-a-project-solar-system`\n\n  6. Crie um novo `Pull Request` _(PR)_\n\n  - Vá até a página de _Pull Requests_ do [repositório no GitHub](https://github.com/tryber/sd-024-a-project-solar-system/pulls)\n  - Clique no botão verde _\"New pull request\"_\n  - Clique na caixa de seleção _\"Compare\"_ e escolha a sua branch **com atenção**\n  - Coloque um título para a sua _Pull Request_\n    - Exemplo: _\"Cria tela de busca\"_\n  - Clique no botão verde _\"Create pull request\"_\n  - Adicione uma descrição para o _Pull Request_ e clique no botão verde _\"Create pull request\"_\n  - **Não se preocupe em preencher mais nada por enquanto!**\n  - Volte até a [página de _Pull Requests_ do repositório](https://github.com/tryber/sd-024-a-project-solar-system/pulls) e confira que o seu _Pull Request_ está criado\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e⌨️ Durante o desenvolvimento\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  - Faça `commits` das alterações que você fizer no código regularmente\n\n  - Lembre-se de sempre após um (ou alguns) `commits` atualizar o repositório remoto\n\n  - Os comandos que você utilizará com mais frequência são:\n    1. `git status` _(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)_\n    2. `git add` _(para adicionar arquivos ao stage do Git)_\n    3. `git commit` _(para criar um commit com os arquivos que estão no stage do Git)_\n    4. `git push -u origin nome-da-branch` _(para enviar o commit para o repositório remoto na primeira vez que fizer o `push` de uma nova branch)_\n    5. `git push` _(para enviar o commit para o repositório remoto após o passo anterior)_\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🤝 Depois de terminar o desenvolvimento (opcional)\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Para sinalizar que o seu projeto está pronto para o _\"Code Review\"_, faça o seguinte:\n\n  - Vá até a página **DO SEU** _Pull Request_, adicione a label de _\"code-review\"_ e marque seus colegas:\n\n    - No menu à direita, clique no _link_ **\"Labels\"** e escolha a _label_ **code-review**;\n\n    - No menu à direita, clique no _link_ **\"Assignees\"** e escolha **o seu usuário**;\n\n    - No menu à direita, clique no _link_ **\"Reviewers\"** e digite `students`, selecione o time `tryber/students-sd-024-a`.\n\n  Caso tenha alguma dúvida, [aqui tem um video explicativo](https://vimeo.com/362189205).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🕵🏿 Revisando um pull request\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Use o conteúdo sobre [Code Review](https://course.betrybe.com/real-life-engineer/code-review/) para te ajudar a revisar os _Pull Requests_.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🎛 Linter\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Usaremos o [ESLint](https://eslint.org/) e o [StyleLint](https://stylelint.io/) para fazer a análise estática do seu código.\n\n  Este projeto já vem com as dependências relacionadas ao _linter_ configuradas no arquivo `package.json`.\n\n  Para poder rodar o _linter_ em um projeto basta executar o comando `npm install` dentro do projeto e depois `npm run lint` para executar o `ESLint`, ou `npm run lint:styles` para executar o `StyleLint`. Se a análise do _linter_ encontrar problemas no seu código, tais problemas serão mostrados no seu terminal. Se não houver problema no seu código, nada será impresso no seu terminal.\n\n  Você pode também instalar o plugin do `ESLint` no `VSCode`. Para isso, basta fazer o download do [plugin `ESLint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) e instalá-lo.\n\n  Em caso de dúvidas, confira o material do course sobre [ESLint e Stylelint](https://app.betrybe.com/course/real-life-engineer/eslint).\n\n  ⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos **checks** dos **linters**.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🛠 Testes\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Vamos utilizar [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) para execução dos testes.\n\n  ### Executando todos os testes\n\n  Esse _framework_ de testes utiliza algumas marcações no código para verificar a solução proposta, uma dessas marcações é o atributo `data-testid` e faremos uso dele aqui.\n\n  Na descrição dos requisitos do projeto será pedido que seja feita a adição de atributos `data-testid` nos elementos _HTML_. Veja o exemplo abaixo para deixar mais nítido como usar esse requisito:\n\n  Se o requisito pedir \"crie um botão e adicione o id de teste (ou `data-testid`) com o valor `my-action`, você pode criar:\n\n  ```html\n  \u003cbutton data-testid=\"my-action\"\u003e\u003c/button\u003e\n  ```\n\n  ou\n\n  ```html\n  \u003ca data-testid=\"my-action\"\u003e\u003c/a\u003e\n  ```\n\n  Ou seja, o atributo `data-testid=\"my-action\"` servirá para o _React Testing Library_(RTL) identificar o elemento. Dessa forma, conseguiremos realizar testes focados no comportamento da aplicação.\n\n  Em alguns requisitos, utilizamos o `getByRole` para poder selecionar os elementos de forma semântica. Portanto, atente-se às instruções de cada requisito. Por exemplo, se o requisito pedir explicitamente um `button`, você deverá utilizar exatamente esse elemento.\n\n  Para verificar a solução proposta, você pode executar todos os testes localmente, basta executar:\n\n  ```bash\n  npm test\n  ```\n\n  ### Dica: desativando testes\n\n  Especialmente no início, quando a maioria dos testes está falhando, a saída após executar os testes é extensa. Você pode desabilitar temporariamente um teste utilizando a função `.skip` junto à função `it`. Como o nome indica, esta função \"pula\" um teste:\n\n  ```javascript\n  it.skip('Será validado se o componente `\u003cTitle /\u003e` contém uma tag `h2`', () =\u003e {\n    render(\u003cTitle headline={headlineText} /\u003e);\n    const headline = screen.getByRole('heading', { level: 2 });\n      \n    expect(headline).toBeInTheDocument();\n  });\n  ```\n\n  ![skip-test-image](skip-image.png)\n\n  Uma outra forma para contornar esse problema é a utilização da função `.only` após o `it`. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.\n\n  ```javascript\n  it.only('Será validado se o componente `\u003cTitle /\u003e` contém uma tag `h2`', () =\u003e {\n    render(\u003cTitle headline={headlineText} /\u003e);\n    const headline = screen.getByRole('heading', { level: 2 });\n      \n    expect(headline).toBeInTheDocument();\n  });\n  ```\n\n  ![only-test-image](only-image.png)\n\n  ### Executando um teste específico\n\n  Você também pode rodar apenas um arquivo de teste, por exemplo:\n\n  ```bash\n  npm test 03.Title.test.js\n  ```\n\n  ou\n\n  ```bash\n  npm test 03.Title\n  ```\n\n  ⚠️ **O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?**\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e:convenience_store: Desenvolvimento \u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Você deve desenvolver uma aplicação em React com criação de componentes de classe e passagem de props. Essa aplicação simulará uma visualização do Sistema Solar, bem como informações sobre diversas missões espacias que ocorreram ao longo da história.\n\n  As imagens dos planetas e as informações das missões são fornecidas no projeto. Você terá que desenvolver os componentes necessários para exibí-las na tela, conforme o descrito nos requisitos.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🗣 Nos dê feedbacks sobre o projeto!\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\nAo finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. \n**Leva menos de 3 minutos!**\n\n[FORMULÁRIO DE AVALIAÇÃO DE PROJETO](https://be-trybe.typeform.com/to/ZTeR4IbH)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e🗂 Compartilhe seu portfólio!\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse projeto no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.\n\n\u003c/details\u003e\n\n# Requisitos\n\n:warning: **PULL REQUESTS COM ISSUES DE LINTER NÃO SERÃO AVALIADAS.** :warning:\n\n:warning: **As imagens são meramente ilustrativas para visualizar o fluxo da aplicação, os nomes devem seguir os requisitos e não as imagens.** :warning:\n\n## 1. Crie um componente chamado `Header`\n\n\u003cdetails\u003e\n  \u003csummary\u003eCrie um componente chamado \u003ccode\u003eHeader\u003c/code\u003e dentro da pasta \u003ccode\u003esrc/components\u003c/code\u003e. Este componente irá renderizar o título principal da página.\u003c/summary\u003e\n\n  - Ele deve conter uma tag `header` e, dentro dela, uma tag `h1`. O texto da tag `h1` deve ser \"Sistema Solar\";\n    \n  - Renderize o componente `Header` dentro do componente principal `App`.\n\n  ![Screenshot](public/examples/req1.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o componente `\u003cHeader /\u003e` é renderizado;\n\n  * Será validado se o componente `\u003cHeader /\u003e` contém uma tag `header`;\n\n  * Será validado se o componente `\u003cHeader /\u003e` contém uma tag `h1`;\n\n  * Será validado se o componente `\u003cHeader /\u003e` renderiza corretamente o texto \"Sistema Solar\";\n\n  * Será validado se o componente `\u003cHeader /\u003e` está sendo renderizado no componente principal `App`.\n\u003c/details\u003e\n\n---\n\n## 2. Crie um componente chamado `SolarSystem`\n\n\u003cdetails\u003e\n  \u003csummary\u003eCrie um componente chamado \u003ccode\u003eSolarSystem\u003c/code\u003e dentro da pasta \u003ccode\u003esrc/components\u003c/code\u003e.\u003c/summary\u003e\n\n  - O componente `SolarSystem` deve ter uma `div` que envolva todo seu conteúdo e que tenha o atributo `data-testid=\"solar-system\"`;\n\n  - Renderize o componente `SolarSystem` abaixo do `Header`, dentro do componente principal `App`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o componente `\u003cSolarSystem /\u003e` é renderizado;\n\n  * Será validado se existe uma `div` que possui o `data-testid=\"solar-system\"`;\n\n  * Será validado se o componente `\u003cSolarSystem /\u003e` está sendo renderizado no componente principal `App`.\n\u003c/details\u003e\n\n---\n\n## 3. Crie um componente chamado `Title`\n\n\u003cdetails\u003e\n  \u003csummary\u003eCrie um componente chamado \u003ccode\u003eTitle\u003c/code\u003e dentro da pasta \u003ccode\u003esrc/components\u003c/code\u003e.\u003c/summary\u003e\n\n  - O componente `Title` deve receber uma prop `headline`;\n    \n  - Ele deve conter uma tag `h2`, que deve renderizar o texto recebido pela prop `headline`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o componente `\u003cTitle /\u003e` é renderizado;\n\n  * Será validado se o componente `\u003cTitle /\u003e` contém uma tag `h2`;\n\n  * Será validado se o componente `\u003cTitle /\u003e` renderiza o texto passado pela prop `headline` dentro de uma tag `h2`.\n\u003c/details\u003e\n\n---\n\n## 4. Renderize o componente `Title` dentro do componente `SolarSystem`\n\n\u003cdetails\u003e\n  \u003csummary\u003eRenderize o componente \u003ccode\u003eTitle\u003c/code\u003e dentro do componente \u003ccode\u003eSolarSystem\u003c/code\u003e.\u003c/summary\u003e\n\n  - O componente `Title` deve ser renderizado recebendo a prop `headline` com o valor \"Planetas\".\n\n  ![Screenshot](public/examples/req4.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o texto \"Planetas\" é renderizado usando o componente `Title` dentro do componente `SolarSystem`.\n\u003c/details\u003e\n\n---\n\n## 5. Crie um componente chamado `PlanetCard`\n\u003cdetails\u003e\n  \u003csummary\u003eCrie um componente chamado \u003ccode\u003ePlanetCard\u003c/code\u003e dentro da pasta \u003ccode\u003esrc/components\u003c/code\u003e.\u003c/summary\u003e\n\n  - O componente `PlanetCard` deve receber duas props: uma chamada `planetName` e outra chamada `planetImage`;\n    \n  - O componente `PlanetCard` deve ter uma `div` que envolva todo seu conteúdo e que tenha o atributo `data-testid=\"planet-card\"`;\n    \n  - O componente `PlanetCard` deve renderizar o texto recebido pela prop `planetName`. Sugerimos a utilização de tags de [Conteúdo de Fluxo](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Content_categories#conte%C3%BAdo_de_fluxo), como `\u003cp\u003e`, que deve conter o atributo `data-testid=\"planet-name\"`;\n    \n  - O componente `PlanetCard` deve renderizar uma imagem que tenha o atributo `src` com o valor recebido pela prop `planetImage`;\n\n  - 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`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o componente `\u003cPlanetCard /\u003e` é renderizado;\n\n  * Será validado se o componente `\u003cPlanetCard /\u003e` possui uma div com o atributo `data-testid=\"planet-card\"`;\n\n  * Será validado se é renderizado o texto recebido pela prop `planetName`;\n\n  * Será validado se é renderizada uma imagem com o atributo `src` com o mesmo valor recebido pela prop `planetImage`;\n\n  * Será validado se, além do atributo `src`, a imagem renderizada possui o atributo `alt` com o texto `Planeta {planetName}`, onde `{planetName}` é o valor recebido pela prop `planetName`.\n\u003c/details\u003e\n\n---\n\n## 6. Renderize uma lista com os planetas do Sistema Solar\n\n\u003cdetails\u003e\n  \u003csummary\u003eRenderize uma lista com os planetas do Sistema Solar dentro do componente \u003ccode\u003eSolarSystem\u003c/code\u003e.\u003c/summary\u003e\n\n  - Utilize o componente `PlanetCard` para renderizar cada item da lista de planetas;\n\n  - Você encontrará a lista com os nomes e as imagens de cada planeta do Sistema Solar no arquivo `src/data/planets.js`;\n    \n  - Você deve importar a lista no componente `SolarSystem` usando o código:\n  ```javascript\n  import planets from '../data/planets';\n  ```\n\n  - A lista de planetas é um _array_ de objetos no seguinte formato:\n  ```javascript\n  {\n    name: \"Nome do planeta\",\n    image: \"caminho-para-imagem-do-planeta\"\n  }\n  ```\n\n  - 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`.\n\n  ![Screenshot](public/examples/req6.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e:bulb: Dica: \u003c/summary\u003e \n\n  - 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`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será verificado se é renderizado um componente `\u003cPlanetCard /\u003e` para cada planeta da lista de planetas;\n\n  * Será verificado se todos os planetas do Sistema Solar estão sendo listados na tela.\n\u003c/details\u003e\n\n---\n\n## 7. Crie um componente chamado `Missions`.\n\n\u003cdetails\u003e\n  \u003csummary\u003eCrie um componente chamado \u003ccode\u003eMissions\u003c/code\u003e dentro da pasta \u003ccode\u003esrc/components\u003c/code\u003e.\u003c/summary\u003e\n\n  - Este componente deve ter uma `div` que envolva todo seu conteúdo e que tenha o atributo `data-testid=\"missions\"`;\n\n  - Renderize o componente `Missions` abaixo do `SolarSystem`, dentro do componente principal `App`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o componente `\u003cMissions /\u003e` é renderizado;\n\n  * Será validado se existe uma `div` que possui o `data-testid=\"missions\"`;\n\n  * Será validado se o componente `\u003cMissions /\u003e` está sendo renderizado no componente principal `App`.\n\u003c/details\u003e\n\n---\n\n## 8. Renderize o componente `Title` dentro do componente `Missions`.\n\n\u003cdetails\u003e\n  \u003csummary\u003eRenderize o componente \u003ccode\u003eTitle\u003c/code\u003e dentro do componente \u003ccode\u003eMissions\u003c/code\u003e.\u003c/summary\u003e\n\n  - O componente `Title` deve ser renderizado recebendo a prop `headline` com o valor \"Missões\".\n\n  ![Screenshot](public/examples/req8.png)\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o texto \"Missões\" é renderizado usando o componente `Title` dentro do componente `Missions`.\n\u003c/details\u003e\n\n---\n\n## 9. Crie um componente chamado `MissionCard`.\n\n\u003cdetails\u003e\n  \u003csummary\u003eCrie um componente chamado \u003ccode\u003eMissionCard\u003c/code\u003e dentro da pasta \u003ccode\u003esrc/components\u003c/code\u003e.\u003c/summary\u003e\n\n  - O componente `MissionCard` deve receber quatro props:\n    - `name`\n    - `year`\n    - `country`\n    - `destination`\n\n  - O componente `MissionCard` deve ter uma `div` que envolva todo seu conteúdo e que tenha o atributo `data-testid=\"mission-card\"`;\n  \n  - O componente `MissionCard` deve renderizar o texto recebido pela prop `name`. Sugerimos a utilização de tags de [Conteúdo de Fluxo](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Content_categories#conte%C3%BAdo_de_fluxo), como `\u003cp\u003e`, que deve conter o atributo `data-testid=\"mission-name\"`;\n  \n  - O componente `MissionCard` deve renderizar o texto recebido pela prop `year`. Sugerimos a utilização de tags de [Conteúdo de Fluxo](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Content_categories#conte%C3%BAdo_de_fluxo), como `\u003cp\u003e`, que deve conter o atributo `data-testid=\"mission-year\"`;\n  \n  - O componente `MissionCard` deve renderizar o texto recebido pela prop `country`. Sugerimos a utilização de tags de [Conteúdo de Fluxo](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Content_categories#conte%C3%BAdo_de_fluxo), como `\u003cp\u003e`, que deve conter o atributo `data-testid=\"mission-country\"`;\n  \n  - O componente `MissionCard` deve renderizar o texto recebido pela prop `destination`. Sugerimos a utilização de tags de [Conteúdo de Fluxo](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Content_categories#conte%C3%BAdo_de_fluxo), como `\u003cp\u003e`, que deve conter o atributo `data-testid=\"mission-destination\"`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será validado se o componente `\u003cMissionCard /\u003e` é renderizado;\n\n  * Será validado se o componente `\u003cMissionCard /\u003e` possui uma div com o atributo `data-testid=\"mission-card\"`;\n\n  * Será validado se é renderizado o texto recebido pela prop `name`;\n\n  * Será validado se é renderizado o texto recebido pela prop `year`;\n\n  * Será validado se é renderizado o texto recebido pela prop `country`;\n\n  * Será validado se é renderizado o texto recebido pela prop `destination`. \n\u003c/details\u003e\n\n---\n\n## 10. Renderize uma lista com as missões espaciais\n\n\u003cdetails\u003e\n  \u003csummary\u003eRenderize uma lista com as missões espaciais dentro do componente \u003ccode\u003eMissions\u003c/code\u003e.\u003c/summary\u003e\n\n  - Utilize o componente `MissionCard` para renderizar cada item da lista de missões;\n\n  - Você encontrará a lista com as informações de cada missão espacial no arquivo `src/data/missions.js`;\n\n  - Você deve importar a lista no componente `Missions` usando o código:\n  ```javascript\n  import missions from '../data/missions';\n  ```\n\n  - A lista de missões espaciais é um _array_ de objetos no seguinte formato:\n  ```javascript\n  {\n    name: 'Nome da missão',\n    year: 'Ano de lançamento da missão',\n    country: 'País que lançou a missão',\n    destination: 'Destino da missão',\n  }\n  ```\n\n  - Para cada missão espacial da lista, você deverá renderizar um componente `MissionCard`, passando cada atributo para sua respectiva prop.\n\n  ![Screenshot](public/examples/req10.png)\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e:bulb: Dica:\u003c/summary\u003e\n\n  - 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`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eO que será verificado\u003c/strong\u003e\u003c/summary\u003e\u003cbr /\u003e\n\n  * Será verificado se é renderizado um componente `\u003cMissionCard /\u003e` para cada missão espacial da lista de missões;\n\n  * Será verificado se todas as missões espaciais estão sendo listadas na tela.\n\u003c/details\u003e\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeterrabaa%2Fsolar-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeterrabaa%2Fsolar-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeterrabaa%2Fsolar-system/lists"}