Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part. 1

E ai pessoal como vocês estão?

Estão preparados para uma imersão em códigos para desenvolvermos nossa primeira aplicação web com ReactJS e NodeJS?

Então antes de começarmos preciso que você verifique se já tem o NodeJs instalado na sua máquina, para isso digite no terminal “node -v”. Caso ainda não tenha instalado, estou deixando um link aqui para seguir os processos de instalação.

Vamos lá!

Existem diversas formas de criar uma aplicação web e, em breve iremos iniciar a configuração de um projeto inteiro “na mão” ou seja, criando manualmente os arquivos do webpack, package.json entre outros, explicando os benefícios de criar dessa maneira.

No post de hoje vamos configurar um projeto utilizando o pacote create-react-app disponibilizado pelo facebook .

Bom, mas uma curiosidade: o que esse pacote faz de tão maǵico assim?

Ao criar um projeto com o create-react-app, ele gera toda uma estrutura inicial de arquivos de configuração e suas dependências, bem como um arquivo de exemplo de um componente com ReactJS.

A primeira etapa será abrir o terminal e digitarmos: “npx create-react-app [nome-do-projeto]” e o pacote irá executar uma série de comandos para criar toda essa estrutura.

Ao término da execução do comando, vamos abrir um editor de código de sua preferência, aqui no curso utilizaremos o VSCode e abrir nossa pasta onde salvamos o projeto.

Aqui podemos verificar a estrutura inicial do projeto. O pacote já cria um arquivo “package.json” e nele, já podemos verificar as dependências necessárias com um projeto totalmente limpo.

A principal informação é o pacote “react-scripts” que é um pacote destinado ao create-react-app, que realiza as configurações para gerar os arquivos de build para deploy e desenvolvimento local. Abaixo temos todas as dependências que esse script exige para executar todos esse comandos e, principalmente em relação a configuração necessária para desenvolvermos um projeto com ReactJS.

Ou seja, temos uma aplicação totalmente completa com suas dependências em apenas um pacote.

Se você simplesmente rodar o comando “npm start” do nosso script, já teremos uma aplicação web rodando.

Repare que o comando já compilou todos os seus arquivos e já sinaliza em qual url você deve acessar seu projeto.

E ai, está pronto para ver o código dessa página?

Então vamos lá. No seu editor de texto, abra a pasta “my-first-app/src” e veja que dentro dele temos diversos arquivos, entre eles:

1. serviceWorker.js ( é uma poderosa adição para a plataforma Web, tendo a habilidade de interceptar todas as requisições originadas de um site).

2. index.js (arquivo central do nosso projeto em ReactJS, é o principal arquivo nesse momento, pois é ele que irá referenciar toda nossa aplicação).

3. App.js (nosso componente ReactJs).

4. App.css (arquivo de estilo do nosso app).

5. App.test.js (arquivo de testes unitários, utilizando a biblioteca Jest).

Então se abrirmos o arquivo App.js e alteramos o nosso componente a tela irá sofrer alterações?

Sim, como no nosso arquivo index.js está referenciando o App.js como o componente de aplicação, significa que já podemos editar esse arquivo para começar a praticar o ReactJS.

Vamos lá?

Abra o arquivos src/App.js e fique livre para realizar a alteração. Nesse caso vou alterar apenas a linha do parágrafo.

Volte para o navegador e recarregue sua página e veja a sua alteração.

E sabe como essa alteração surgiu efeito no navegador?

Bom essa interação ocorre entre nosso arquivo src/index.js que é responsável por renderizar nosso componente App.js e, para isso ele cria um elemento html e referenciando um id “root”.

A partir daí, conseguimos correlacionar todo esse fluxo com nosso arquivo index.html dentro da pasta my-first-app/public/index.html.

Ou seja, o que o navegador esta mostrando para nós é o nosso arquivo index.html, porém com nosso App.js dentro dessa div root.

Gostou?

Nos vemos em breve com mais um post sobre “Desenvolvendo sua aplicação em ReactJS”, do zero ao deploy. Caso tenha qualquer dúvida ou precise de uma explicação mais detalhada, comente abaixo.

E aí, na sua máquina funciona?