O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com Squads utilizando React. Normalmente quando temos times focados em partes do produto e comum a adoção da arquitetura de Micro FrontEnd.

• Account
• Home
• Chat

• client-collabchat
• client-collabchat-account
• client-collabchat-chat
• client-collabchat-home

...

• Layout Mobile First - Técnica muito utilizada no mercado!
  • Primeiro se faz o layout para o mobile e depois para o desktop
  • Porque a maioria dos acessos as aplicações web hoje são provenientes do Celular.
• Explicado o conceito de Squads e Micro FrondEnd. Exemplos: Gmail, Spotify.
• Explicado o que é React e as formas de se criar um projeto com React
  • Site do Vite Js 🚀 Iremos utilizar este
  • Site do Create React App - Foi o primeiro a ser desenvolvido
  • Site do Next JS - É um Framework para utilizar com o React
• Explicado porque algumas ferramentas precisam de build (bundle) e algumas ferramentas para build Web Pack, Gulp, RollupJS é a que o Vite JS utiliza.
• Explicado o que quem é responnsável compilação do JS do React JS Babel e que tem outros como o EsBuild e o Remix
• Comandos para se criar um novo projeto React
  • yarn create vite [Name Project] --template react-js (Para projetos JavaScript)
  • yarn create vite [Name Project] --template react-ts (Para projetos com TypeScript)
  • npx create-next-app@latest ou yarn create next-app (Para projetos JavaScript)
  • npx create-next-app@latest --typescript ou yarn create next-app --typescript (Para projetos com TypeScript)
  • npx create-react-app my-app ou yarn create react-app my-app (Para projetos JavaScript)
  • npx create-react-app my-app --template typescript ou yarn create react-app my-app --template typescript (Para projetos --template typescript)

yarn create vite chatcollab --template react-js

cd chatcollab

continua na próxima aula

#:sparkles: - Aula 2

#/home/rfpereira/github/live/chatcollab> git init #/home/rfpereira/github/live/chatcollab> git remote add origin [email protected]:phaelfp/chatcollab.git

Antes de continuar vamos fazer algumas configurações para padronização de código em projetos

• Instalar o eslint yarn create @eslint/config

Podemos utilizar para isso o eslint e junto com ele o Prettier

• Para utilizar o EsLint usamos o VS Code Eslint
• Para ajudar na formatação/padronização do código com o Prettier usamos o Prettier VS COde
• Styled Components

Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade Então utilizamos um recurso do Git chamada Hooks.

Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.

Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o Husky