Um “To Do” Fullstack Javascript, do Node ao React + Webpack (Parte 3)

Estamos de volta!

Agora que temos nosso micro serviço para persistir os dados da nossa lista de tarefas, vamos construir o interface desta API, que vai ter os seguintes recursos: adicionar uma nova tarefa, alterar o status dela, remover a tarefa, e filtra as tarefas da lista.

Vamos criar um projeto React bem do principio e nesse artigo vamos aprender a configurar o webpack com o mínimo para um desenvolvimentos sem stress. Além de fazer um hello world em React.

Vamos iniciar nossa aplicação em um novo diretório:

// entra na pasta do projeto
cd fullstack_javascript
// cria uma pasta para a API
mkdir front 
// entra na pasta da API
cd front
// inicia a API como um módulo NPM
npm init -y

Vamos instalar os primeiros pacotes do webpack:

npm i -D webpack webpack-cli
// i = instalar
// -D = pacotes apenas para desenvolvimento

Como instalamos o pacote do webpack local, para executar precisamos utilizar o npm scripts que é configurado no arquivo package.json:

Capturar

Agora configure o Webpack!

Escrever o tal javascript “moderno” te coloca um uma sinuca de bico, ja que os navegadores não sabem ler o código modernoso, então nós precisamos de “tradutores”, ou transpiladores. O transpilador mais utilizado é o Babel esse cara transforma código como o do React em um emaranhado de javascript, que o navegador entende.

Mas e o Webpack? Bom a função dele não traduzir o código, mas gerenciar esta tradução, otimizar o código, carregar imagens, traduzir código CSS e outras coisas a mais, basta ver a lista de Plugins.

Show me the code!

Capturar

Vamos rodar nosso primeiro build:

Crie um arquivos chamado ./src/index.js apenas com console.log('hello') e execute o seguinte comando:

npm run build

Na pasta raiz do projeto crie um arquivos chamado index.html como este conteúdo:

Capturar

Abra o index.html em um navegador e abra o devtools (opt + cmd + i), e na aba console veja a mensagem “hello” que colocamos no src/index.js.

Mas vamos além e mostrar alguma coisa no navegador assim como esperamos.

Precisamos instalar mais algumas coisas:

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

No webpack.config.js acrescentamos as configurações em module:

Capturar

Agora vamos escrever um código em React, que vai virar um código legível para navegador.

Instale os pacotes:

npm i -S react react-dom
// -S para salvar no package.json

Agora no arquivo ./src/index.js escreva o seguinte código:

Capturar

Novamente execute:

npm run build

E quando acabar abra o index.js em um navegador, e espera-se que apareça um maravilhoso:

Agora em nossa aplicação temos dois pacotes: um com nosso micro serviço, outro com nosso front, e já contamos com um webpack para executar a transpilação no nosso código em React.

Vimos aqui como configurar o webpack no mínimo, para que gere um javascript legível para os navegadores, e como configurar este webpack para interpretar códigos do React.

No próximo artigo vamos criar nosso primeiro componente e ja fazer a primeira requisição à API.

Abraço.

Fonte: Ariel Pchara – Medium

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s