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

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.