Skip to content

[feat] Criar um app que mostre uma estrutura de arquivos #1

Description

@talDoFlemis

A ideia

A ideia aqui é vocês criarem um aplicativo em React que mostre uma estrutura de pastas com um arquivo chamado arquivos.js que eu irei fornecer a vcs com suas respectivas subpastas como no exemplo abaixo.

Esse aplicativo deve ser capaz de mostar as pastas contidas no arquivos.jscom identação e com a capacidade de esconder as subpastas.

image

Usem a criatividade de vocês para resolver esse problema tanto na lógica como no design.

Setup

Para fazer o setup inicial desse desafio confirme que na sua máquina existe Git.

Se não estiver instalado baixe no site do git
A CEOS possui um curso de Git na Udemy, pergunte no grupo o email e a senha

Depois disso rode o comando git clone https://github.com/ceos-jr/test-react.git para fazer um clone desse repositório nessa máquina.

Verifique se você também tem Node instalado para fazer o uso do React

A playlist do Matheus ensina a instalar isso

Verificando o progresso

Para saber se vocês estão no caminho correto usem o commando npm run test

Esse comando vai rodar 2 testes para verificar se o aplicativo de vocês consegue mostrar o mínimo necessário

  • O primeiro teste consiste em mostrar as duas primeiras pastas
  • O segundo teste consiste em mostrar todas as pastas e subpastas

Se algum dos testes falhar ele vai dar vermelho, se tudo estiver correto ele fica verde

Se o segundo teste estiver dando errado começem com o estado de cada pasta de vocês como aberto

Extensões Recomendadas para o VS Code

  • Prettier - Ela faz a formatação automática do código e te dá menos dor de cabeça
  • Eslint - Ele verifica erros no teu código e vai te livrar de muita dor de cabeça

Extensões Nvim

  • Se você usa VIM vc sabe se virar 👍

Submeter

Para submeter o progresso de vocês criem uma branch nesse repositorio com o nome de vcs e façam alteração lá.
Se estiverem em dúvida de como fazer isso há um curso de Git que a CEOS comprou só perguntar a mim ou ao Lucas sobre o login e a senha

Recursos

  • Canal do Matheus - Ele foi o cara que eu usei pra ter meus primeiros passos, se vocês forem até a aula 14 já conseguem ter uma base para resolver esse problema.
  • Docs React - Como devs vcs tem que aprender a ler documentação e não há documentação melhor de React que a do próprio React
  • Web Dev Simplified - Os vídeos desse cara podem ajudar vocês a pegar rápido o React
  • E o temido Google, pesquisem sobre como funciona a listagem de diretórios no linux e vocês vão ter uma dica de como resolver esse problema

Metadata

Metadata

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions