Dicas de React

0006 Dicas de React

Crie seu Projeto de React (web) usando create-react-app

# Resumo do Vídeo: Como Usar o Create React App para Gerar um Projeto de React

Neste vídeo, é apresentado um guia sobre como utilizar o **Create React App** para iniciar rapidamente um projeto em React, evitando a configuração manual de pacotes e arquivos.

## Principais Pontos Abordados

1. **Introdução ao Create React App**:
   - Antes do Create React App, a configuração de um projeto React envolvia instalar diversos pacotes manualmente, configurar o Webpack, e gerenciar o package.json.
   - Com o Create React App, todo esse processo se torna muito mais simples e rápido.

2. **Instalação do Create React App**:
   - Para começar, é necessário instalar o Create React App globalmente via NPM:
     ```bash
     npm install -g create-react-app
     ```

3. **Criação de um novo projeto**:
   - Após a instalação, você pode criar um novo projeto com o comando:
     ```bash
     npx create-react-app meu-projeto
     ```

4. **Estrutura do Projeto**:
   - O projeto gera uma estrutura inicial de pastas e arquivos, incluindo:
     - `node_modules`: Pacotes do projeto.
     - `package.json`: Configurações do projeto.
     - `src`: Contém o código fonte.
     - `public`: Onde o arquivo HTML principal (`index.html`) é mantido.
   - A injeção do aplicativo React ocorre na `div` com `id="root"` dentro do `index.html`.

5. **Rodando o Aplicativo**:
   - Para iniciar o servidor de desenvolvimento:
     ```bash
     npm start
     ```
   - As modificações no código são atualizadas automaticamente (hot reload).

6. **Scripts Disponíveis**:
   - Vários scripts já são configurados por padrão:
     - `npm start`: Iniciar o servidor de desenvolvimento.
     - `npm run build`: Criar uma versão otimizada do projeto para produção.
     - `npm test`: Executar testes.
     - `npm run eject`: Ejetar a configuração para personalização.

7. **Testes e Configurações Adicionais**:
   - O Create React App já inclui suporte para Babel, ESLint e, possivelmente, Jest para testes, evitando a necessidade de configurações manuais.

8. **Resultado da Compilação**:
   - Ao executar `npm run build`, é gerada uma pasta `build` com todos os arquivos otimizados para produção.

## Conclusão
O Create React App proporciona uma maneira prática e eficiente de iniciar projetos React, configurando automaticamente todas as dependências e a estrutura básica do projeto. O vídeo encoraja os desenvolvedores a utilizarem essa ferramenta em seus futuros projetos.

Agradecimentos e convite para interações finais da apresentação.

Neste vídeo a gente vai aprender a usar o Create React App para gerar um projeto de React.
Uma das primeiras coisas que nós temos que fazer antes de iniciar o desenvolvimento de um projeto
é gerar e configurar a infraestrutura para o projeto.
No caso do React a gente tem que instalar vários pacotes, criar nossa infraestrutura,
estrutura dos arquivos e das pastas e essas coisas.
Então, antes do Create React App a gente tem que fazer isso quase tudo manualmente,
configurar o webpack, instalar os modos necessários e essas coisas de NPM,
criar o package de sangue, etc.
Normalmente eu copiava o boilerplate que já foram feitos por outras pessoas e assim por diante,
mas agora que a gente já tem esse módulo chamado Create React App,
ficamos muito mais fácil iniciar o desenvolvimento de um aplicativo de React.
Para começar eu estou aqui no website Create React App, é só um módulo de NPM,
se você ver aqui o TLDR para dar um quick start.
Então, inicialmente você tem que instalar o Create React App no NPM globalmente,
então NPM install, traço de Create React App.
Está certo?
Isso dá um tempo aí e depois que estivermos instalados a gente pode começar
a gerar o nosso projeto.
Tá bom? Então a gente vai dar Create React App e o nome do projeto.
Nesse caso eu vou falar meu projeto.
Vai dar um tempinho aqui.
A gente está lá o React, React DOM e React Scripts, esse Create React App,
esse módulo usa esse outro modo chamado React Scripts que facilita a configuração dos comandos
para iniciar o aplicativo, para dar um build, para criar o bundle,
para testar isso em por diante.
Demoramos um pouquinho, o que está instalando os pacotes.
Então React DOM é um pacote que é responsável por injetar o React no DOM,
o document object model que é o árvore do HTML.
Depois a gente está lá todos os pacotes e tal, e tal, e tal.
Ele dá aqui uma mensagem ensinando como usar o Create React App,
está dizendo que ele é o projeto, na parte da minha projeta,
e se a gente quiser iniciar o servidor de desenvolvimento,
a gente está na NPM Start, para criar o bundle, o arquivo,
com todo o código do frontend, dá um NPM run build, e é para a produção.
Se quiser testar NPM tests, vai rodar os testes.
E tem esse outro aqui, RunEject, removes these tools, para falar no seu quê.
Então vamos lá, e vou para o meu projeto, vou abrir meu editor de texto Atom aqui.
Está aqui o projeto, está aqui a estrutura, tem a NodeModules,
tem todos os nossos módulos, o package JSON já está aqui configurado,
e já tem cenote nos scripts, já tem os comandos feitos para você,
e na verdade todo o comando rodam os React scripts,
que está aqui como dependência de desenvolvimento.
React Script Start, Build, e assim por diante.
Tem o src, código source, código font lá.
Então na public vai ter o index do HTML, o font de partida,
não tem quase nada, tem aqui a head, e tem o body.
Dentro do body tem essa div, com o id root,
dentro dessa div que vai ser injetado o aplicativo do React, nesse caso.
A gente vai pegar essa div aqui, que tem o id root, e vai injetar o aplicativo aqui.
E esse aplicativo está dentro do app.js, esse componente.
Está bom? E aí, essa injeção feita aqui.
Se eu usar o reactdom, a gente vai pegar esse componente app
e vai injetar no elemento que tem id root, que é aquele que eu falei aqui, no index.
Então no momento que você run, vai dar o start, vamos ver o que acontece.
NPM start, para começar.
Se o node já abriu o navegador, no localhost 33000, tem aqui a página, esse aqui é o app.
Está bom? Componente app.
E se a gente modificar o app, vai dar um auto reload, que vai atualizar automaticamente.
Vamos só testar aqui, para diminuir a tela.
Meu projeto.
O node vai no app, vamos lá para o SRC.
Vamos mudar uma coisa aqui, vamos mudar esse welcome to react, esse aqui, esse aqui, esse texto aqui.
Vamos mudar.
Bem-vindo.
No node que não salvei ainda, no momento que eu salvar, já atualiza automaticamente.
Está bom? Já tem o hot reload.
Já veio tudo configurado, com hot reload e essas coisas.
Só dar uma olhada aqui na estrutura de novo, só para revisar.
Então create react app, vai criar essa estrutura aqui básica para o seu projeto.
No package de JSON, já define todos os comandos aqui,
iniciar, compilar, testar e agitar.
Tem a pasta SRC, que vai manter onde você vai deixar o seu código-fonte, o source code.
O ponto de partida do aplicativo do react é esse index.js aqui.
Vai nesse arquivo.
E aqui que ocorre a injetação do aplicativo, ao DOM, na div que tem o ID root.
O node que esse app, é o componente app aqui, que é esse componente aqui que está aparecendo.
E o node index, HTML, está dentro da pasta chamada public.
E quando vai para o body aqui, tem essa div com o ID root, que vai ser injetado o aplicativo.
Voltando aqui ao index.
Esses outras coisas são a CSS, que é o estilo, que dá para importar usando o comando import.
Em vez de ser injetado aqui, adicionado no head, você pode fazer da maneira assim.
Tá bom?
Que é esse aqui, app.css.
Esse aqui, o index.css é para o index, que está aqui.
Esse index tem um index.css.
E o app também tem o seu próprio CSS.css.
Aí tem também um arquivo de teste, chamado apptest.js.
Usa uma coisa parecida com o Jasmine, você já ouvi falar da Jasmine.
Eu acho que está usando o Jest aqui.
Não tenho certeza, porque não diz aqui, mas no React Script, se a gente dá uma olhada no documentação,
talvez ele use o Jest por padrão para testar.
Vamos ver.
O que está dentro.
Eu estou aqui dentro do create React app, não sei o que.
Então, está dizendo que create React app, inclui o apppack, já dá para usar ES6 automaticamente, já tem o Babel,
já tem ESLint e usa o Jest para testar.
Tá bom?
Então já configura tudo para você, a gente não precisa se preocupar de fazer isso manualmente.
Voltando aqui, eu vou só mostrar como ele cria o compilação, npm run build.
Está criando aqui o bundle, compilando tudo para a produção, production.
Você note aqui que ele compressou depois de dar o jazip.
Não sei o que.
Ele cria essa pasta chamada build.
Tá bom?
Então, vamos lá dar uma olhada.
Você note a pasta build for adicionada com index, os ícones.
O CSS já está aqui, você note que ele já bota CSS minificado dentro da pasta CSS no static.
O JS vai ter o JavaScript código.
Tem a media.
Tem o SVG do logo aqui.
JSON aqui.
E assim por diante, note o index em uma linha.
Já inclui, você dá um soft wrap aqui para você ver.
Já inclui o CSS, o JavaScript.
Está certo?
Esse cara e esse cara e assim por diante.
Então, esse é o create react app.
Create react app.
Você pode iniciar os seus projetos de react de maneira fácil e rápida.
Muito legal.
Espero que você tenha gostado do vídeo e de aprender e ter aprendido coisas novas.
Espero que você use create react app nos seus futuros projetos.
Vale a pena dar uma olhada.
Obrigado por assistir.
Vamos nos conectar.
Tchau.
