Criando uma aplicação React do zero! Se você já criou um projeto react, você provavelmente usou o comando create-react-app que é uma ferramenta que facilita a nossa vida e por trás dessa facilidade existe muita coisa configurada. E por isso, que hoje eu vou mostrar como criar um projeto react estruturado do zero para que você possa entender o que é feito por trás do comando create-react-app , por tanto, vou mostrar fazer essas configurações que não são as tradicionais do javascript, como html e arquivos de imagens sendo executado dentro do javascript.

Mão na massa

Primeiro eu vou criar uma pasta chamada primeiro-projeto-react e dentro vou usar o comando yarn init -y, para criar o arquivo package.json que é o arquivo das nossas dependências, o mesmo usado no node.

Criando packege.json

Dentro do VS code, vamos criar uma pasta src e public e depois vamos instalar o react e o react-dom. Se você não sabe o que é cada um deles basta clicar aqui e ver o post sobre os conceitos do react.

Importando bibliotecas do react

Dentro da pasta public vamos criar o arquivo index.html, para facilitar a vida use a snippet html5 para criar o arquivo html e depois vamos criar uma div no corpo da aplicação com id app, veja abaixo.

Snippet html5 vscode

Para que o browser entenda o código feito no react será preciso usar o Babel que é o responsável por transpilar (converter) o código react para um que o browser entenda e o Webpack que é o responsável por converter que para cada código que utilize um tipo de arquivo (.js, .css, .png) de uma maneira diferente, para isso temos os loaders que auxiliam o webpack na tarefa de assimilar cada um desses arquivos.

Então precisamos adicionar as seguintes dependências com yarn.

yarn add @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli

Agora na raiz do projeto vamos criar um arquivo chamado babel.config.js, dentro desse arquivos nós vamos exportar algumas configurações que são chamados presets:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
}

O preset @babel/preset-env vai ser o responsável por converter o nosso código javascript moderno para um mais antigo.

O preset @babel/preset-react vai adicionar as funcionalidades do react dentro da conversão do javascript.No exemplo acima usaremos as configurações padrão de cada preset, mas você pode acessar a documentação oficial em https://babeljs.io/docs/en/ e ver tudo que é possível fazer com o babel.

Primeira transpilação

Feito isso, nós podemos fazer a nossa primeira transpilação, crie um arquivo chamado index.js na pasta src e adicionar o seguinte código.

const multiply = (a, b) => {
  return a * b;
}

console.log(multiply(2, 5));

Depois instale o CLI do babel com o comando yarn add @babel/cli, após terminar a instalação rode o comando yarn babel src/index.js –out-file public/bundle.js. Pronto, feito isso você pode ver que na pasta public foi criado um arquivo chamado bundle.js com o nosso código transpilado e verdade que é um código bem simples, mas isso é para demonstrar como o babel funciona, um pouco mais para frente vamos que esse arquivo vai ficar bem diferente.

Configurando WebPack

O que o webpack vai fazer que o babel não consegue fazer? O webpack vai automatizar a identificação do tipo de arquivo que está sendo requisitado pela nossa aplicação e vai ativar um loader, como por exemplo o babel loader, css loader.

Antes de seguir para a configuração do webpack, devemos instalar o babel-loader com o comando yarn add babel-loader.

Então agora vamos começar a configurar o webpack criando um arquivo na raiz chamado webpack.config.js e você pode adicionar o seguinte conteúdo nele.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  }
}

Abaixo a explicação sobre cada configuração feita.

entry: path.resolve(__dirname, ‘src’, ‘index.js’):

A primeira coisa que adicionamos na nossa configuração é o arquivo que deve ser carregado pela aplicação, esse arquivo e o index.js que fica dentro da pasta src. Por tanto o comando abaixo faz exatamente isso, dentro da raiz da aplicação (__dirname), acessa a pasta src e o arquivo index.js.

output: { path: path.resolve(__dirname, ‘public’), filename: ‘bundle.js’ }

O output informa qual o arquivo que será gerado depois de convertido, neste caso e bundle.js que fica dentro de public.

Agora vamos adicionar as regras para os loaders, então as linhas abaixo são para isso. Temos um loader para o babel, um loader para o css e um loader para imagem.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    }
  ]
}

O código acima basicamente fala para o webpack, que toda vez que a aplicação precisar de um arquivo javascript e esse arquivo não estiver dentro da pasta node_modules, converta eles usando o babel, basicamente é isso que é feito para os restantes dos arquivos do tipo css e de imagem.

Agora se executarmos o comando yarn webpack –mode development, ele já converteu o nosso código para o bundle.js e adicionou uma série de configurações para a nossa aplicação funcionar corretamente.

Agora só falta mais uma etapa para terminar a configuração do webpack, para isso vamos instalar o webpack-dev-server com o comando yarn add webpack-dev-server, ele e o servidor de desenvolvimento do webpack. Agora no nosso webpack.config.js, antes do module vamos colocar a seguinte configuração:

devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },

Isso basicamente diz qual é o diretório que contém os arquivos públicos da nossa aplicação, após salvar o arquivo digite no terminal:

yarn webpack serve –mode development

Agora a nossa aplicação está rodando em http://localhost:8080 e com a funcionalidade de live reload ativa, você deve ver algo como isso no seu terminal:

Bom, a nossa aplicação rodou, mas você deve ter se deparado com uma tela branca, para resolver isso vamos criar o nosso primeiro componente (se você não sabe o que é um componente no React clique aqui) e configurar a nossa aplicação para rodar de uma maneira mais fácil.

Na raiz da pasta src crie um arquivo chamado App.js (atenção todo componente do React começa com a primeira letra em maiúsculo) é o conteúdo será esse abaixo.

import React from 'react';

function App() {
  return <h1>Hello world.</h1>
}

export default App;

No arquivo index.js, nós iremos adicionar o seguinte código.

import React from 'react';
import { render } from 'react-dom';

import App from './App'

render(<App />, document.getElementById('app'));

O que fizemos é basicamente dizer que todo o conteúdo do componente App será renderizado dentro da tag <div id=”app”></div> que criamos no arquivo index.html dentro da pasta public.Feito isso basta acessar a página http://localhost:8080/ e você verá algo como isso:

Para finalizar vamos configurar um atalho para o comando yarn webpack serve –mode development, va no package.json e inclua a seguinte linha abaixo de licence e após isso basta digitar no terminal yarn dev para o projeto começar a ser executado.

"scripts": {
    "dev": "webpack serve --mode development"
  },

Pronto, agora estamos com o babel e o webpack configurado e funcionando junto com o live realod da aplicação. Este ambiente que é utilizado por aqueles “boilerplates” como react-create-app para automatizar a sua criação e a partir de agora você já sabe como tudo isso é feito e o mais importante o porquê.

Espero que esse post tenha sido útil para você.