Introdução

Como vimos no post anterior, podemos importar o React dentro dos nossos projetos, basta fazer a importação dentro no arquivo index.html e então podemos utilizar todo o poder dessa biblioteca.

Porém, essa não é a melhor forma de trabalharmos com o React. Hoje vamos aprender uma forma melhor de utilizar o React, através do create-react-app.

Precisamos ter o Node e o npm instalado em nossa máquina.

Eu gosto de utilizar o yarn no lugar do npm, mas vai do seu gosto. Durante esse tutorial, vou utilizar o yarn. :D

Comando:

npx create-react-app meu-app

Esse comando irá instalar tudo que vamos precisar dentro da pasta "meu-app"

Aguardamos um pouco, esse processo pode levar uns minutos.

Quando finalizar, vamos rodar os comandos:

cd meu-app
yarn start

Nesse momento, ele irá abrir nosso browser com algo parecido com essa tela:

Vamos abrir nosso projeto no VS Code para entender melhor o que está acontecendo.

Beleza, mas onde nosso programa começa?

Sempre pelo o arquivo index.html, que nesse caso está em public/index.html

Note que temos uma div#root (div com id=root), que é exatamente o que fizemos nos posts passados, é nessa div que será inserido todo nosso código React.

Agora vamos abrir arquivo src/index.js:

Esse é o arquivo principal do React, ele que recupera a div#root no index.html.

Outro arquivo importante para entendermos é o App.js, ele é o componente principal da nossa aplicação.

Resumindo:

1. Escrevemos todos os nossos componentes em React
2. Importamos para o App.js
3. O index.js importa o App.js
4. O index.js "injeta" no index.html.

Hein?! Cadê? Que bagunça é essa?!

Criei essa imagem para ficar mais claro como fica essa "ordem" na prática:

Bom, agora que entendemos a estrutura base do nosso projeto, vamos o arquivo App.js e editar-lo da seguinte forma:

Podemos ver no nosso browser que ele fez o reload automaticamente e agora está exibindo nosso "Hello World".

esse reload automático da página com o Weback é simplesmente fantástico! Mas é assunto para um próximo post. :D

Conclusão

Hoje aprendemos a criar um projeto com o create-react-app, entendemos a estrutura básica e começamos a modificar o componente App. No próximo post, vamos ir mais afundo, entendemos os componentes e vamos criar nosso primeiro componente!

Grande abraço! Até a próxima.