Catálogo de carros

Sobre

Repositório GitHub - jocile/catalogo-de-carros:

Este projeto é desenvolvido com o objetivo de desenvolver um Frontend de catálogo de carros, como desafio do Bootcamp de ReactJS DevSuperior.

Caracteristicas

• Layout e navegação de produtos

Tecnologias

• ReactJS
  • Criação de projeto
  • Estrutura do projeto
  • Componentes
  • Importações
  • Uso de imagens
• Layout
  • HTML
  • CSS
    • Estilização manual
    • Flexbox
    • Bootstrap
    • Responsividade
  • Execução de projeto Figma
• Rotas
  • React Router DOM
  • Rotas e links

Requerimentos

Antes de Iniciar é necessário ter o ambiente NodeJS 20, Git e Yarn instalados.

Preparando o ambiente para o App React

Alternativas para instalação do NodeJS:

1. Utilizar o Container Docker do NodeJS.

   • O Container já tem todo o ambiente para executar o App usando o Docker

2. Utilizar o NVM - gerenciador de versões do NodeJS

   • Instruções para instalar no Linux e Mac, ou no Window.
   • Instalar e usar a última versão lts versão do NodeJS:

nvm install lts

• Para usar a versão do NodeJS, liste e use a versão desejada, por exemplo para a versão 20:

nvm list
nvm use 20

• Instalar e usar o gerenciador de pacotes Yarn

npm install -g yarn

Começando um projeto com Create React App

Este projeto foi inicializado com Criando um React App.

Iniciando

Execute os comandos no terminal:

• Clone o projeto

git clone https://github.com/jocile/catalogo-de-carros.git

• No diretório do projeto, você pode executar

yarn
yarn start

Isto irá Executar o aplicativo no modo de desenvolvimento.

• Abra http://localhost:3000 para visualizá-lo no navegador.

A página será recarregada se você fizer edições.
Você também verá quaisquer erros de lint no console.

:heavy_check_mark: O comando `test``

• Para inicia o executor de testes no modo de observação interativo digite:

yarn test

Veja a seção sobre executando testes para mais informações.

:heavy_plus_sign: O comando `build``

• Para construir o aplicativo para produção na pasta build digite:

yarn build

Ele agrupa corretamente o React no modo de produção e otimiza a construção para o melhor desempenho.
A construção é minificada e os nomes dos arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!
Veja a seção sobre implantação para mais informações.

:package: Comando eject (OPCIONAL)

O comando eject é um comando que permite personalizar a configuração de um projeto criado com create-react-app.

yarn eject

Nota: esta é uma operação única. Uma vez que você eject, você não pode voltar!

Se você não está satisfeito com a ferramenta de construção e as escolhas de configuração, você pode usar eject a qualquer momento. Este comando removerá a única dependência de construção do seu projeto.

Ele copiará todos os arquivos de configuração e as dependências transitivas (webpack, Babel, ESLint, etc) diretamente para o seu projeto para que você tenha controle total sobre eles. Todos os comandos, exceto eject, ainda funcionarão, mas eles apontarão para os scripts copiados para que você possa ajustá-los. Neste ponto, você está por sua conta.

Você não precisa usar eject. O conjunto de recursos é adequado para pequenas e médias implantações, e você não deve se sentir obrigado a usar este recurso. No entanto, esta ferramenta não seria útil se você não pudesse personalizá-la quando estiver pronto para isso.

Referências

• Recursos para o Frontend
• Protótipos de tela para o Frontend no Figma
• TreinaWeb - Instalando e gerenciando várias versões do NodeJS
• Criando um Container de Desenvolvimento no Visual Studio Code
• Você pode aprender mais na documentação do Create React App.
• Para aprender React, confira a documentação do React.
• W3Schools Flexbox
• Flexbox
• CSS Flexbox