Um momento
Aula 03
Cursos / React - Code Splitting para Iniciantes (Divisão de Código, Lazy Loading)
Como Instalar e Gerar Projeto com o create-react-app - Aula de Code Splitting

Summary

# Resumo do Tutorial de Desenvolvimento com React

## Pré-requisitos
- Instalar o **Node.js** e **NPM**.

## Passos do Tutorial
1. **Criar um projeto React**:
   - Usar o comando `npm install -g create-react-app` para instalar o `create-react-app` globalmente.
   - Gerar o projeto com `create-react-app <nome_do_projeto>`. Exemplo: `create-react-app fazer-code-splitting`.

2. **Ejetar o projeto**:
   - Navegar até a pasta do projeto.
   - Rodar o comando `npm run eject` para acessar as configurações do webpack e permitir personalizações.

3. **Executar o projeto**:
   - Após ejetar, o próximo passo será executar `npm start` para iniciar a aplicação e visualizar as mensagens do webpack no console, que mostram o processo de compilação do bundle.

## Observações
- O instrutor utiliza a versão **Node 10.15.1** e **NPM 6.4.1**.
- Após os passos acima, será mostrado o resultado gerado pelo webpack na próxima aula.

Video Transcript

Então vamos continuar para poder, o que você vai precisar? Vai precisar do node instalado, tá? Com o NPM. E a gente vai, primeiro fazer o quê? A gente vai criar um projeto de React, tá? Nós vamos fazer desenvolvimento web, React na web. Depois de gerar o projeto, vamos agitar com o create React app. Vamos agitar o aplicativo para poder ver as configurações do webpack. Nós vamos fazer code splitting no React com o webpack, tá? Então vamos começar aqui no terminal. Eu estou usando, primeiramente, node versão 10.15.1 com o NPM versão 6.4.1. Primeira coisa que você deve fazer é instalar o create React app para poder criar um projeto, gerar um projeto de React de maneira bem simples e rápida. Você pode dar o NPM install, traço G para instalar o pacote globalmente, create React app, tá? Eu já instalei, então não vai demorar muito para mim. Certo, depois de instalar o create React app, você pode gerar o projeto. Dessa maneira aqui, eu já fiz aqui na outra aba, você vai digitar create React app. E o nome do projeto, eu dei nome como fazer code splitting. Porque demora, eu fiz, já fiz anteriormente, tá? Ele vai fazer tudo isso, não sei o que, vai dizer os comandos, tá? A gente vai agora, depois de gerar o projeto, que está aqui, como fazer code splitting. Tá? Vamos ceder o projeto, para a parte do projeto, e eu vou ejetar, usar o NPM Run and React para poder ejetar e ter as configurações todas explícitas no projeto, porque eu quero ver as mensagens do webpack para te mostrar o bundle compilado e todas as coisas. Então eu vou dar NPM Run and React para ejetar esse cara. Ele vai perguntar, você tem certeza? Vou botar Y, sim. Ah, o que aconteceu? Ah, eu tenho uma pasta ali que eu adicionei o projeto, deixa eu mover. Espera aí. Está, deixa eu tentar no NPM Run and React. Sim, pronto. Não, eu não vou demorar um pouco aqui. Pronto. Ejetou. Agora eu estou aqui na parte do projeto, deixa eu fechar esses caras aqui. E tem a pasta config, webpack.confc.js, tem várias configurações. Mas não importa muito, o que importa é o comando NPM Start. Eu vou rodar o NPM Start, já, já, na próxima aula, e a gente vai ver a webpack, a saída do webpack, que ele mostra no console, para você ver que ele está compilando o bundle. Tá bom, então, vamos parar aqui e te vejo na próxima aula.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: