Criando uma aplicação com React e Webpack

O mundo do desenvolvimento Front-End viu a ascensão e o declínio de inúmeras ferramentas e frameworks. Para aqueles que acompanham este mundo, é muito comum atualmente escutar três grandes nomes, sendo eles Angular, Vue e React.

Neste post vamos criar uma aplicação simples com React e Webpack, entretanto vale ressaltar que todos os frameworks citados são excelentes, desde que usados com sabedoria.

Mas antes de iniciarmos, você sabe o que é React?

O React é um framework JavaScript de código aberto desenvolvido pelo facebook, e hoje é mantido pelo próprio facebook, uma comunidade de desenvolvedores individuais e outras empresas. Em poucas palavras o React é uma biblioteca para criar interfaces, seu maior conceito é separar seu projeto em componentes, sendo assim, quando se trabalha com React deve-se quebrar os elementos ou problemas da sua aplicação em pequenas frações, que serão mais simples de se trabalhar, como também serão reutilizáveis por todo projeto.

Após essa breve explicação, vamos começar o projeto!

Primeiramente vamos inicializar o package.json, onde serão armazenadas informações essenciais de todo o projeto.

$ npm init -y

Após o arquivo package.json ser iniciado, vamos alterar o seguinte trecho:

"test": "echo "Error: no test specified" && exit 1"

Substituindo por:

 "dev": "webpack-dev-server"

Vamos instalar as dependências necessárias para utilização do React por meio do comando:

$ npm i --save-dev babel-core [email protected] babel-preset-es2015 babel-preset-react react react-dom webpack webpack-cli webpack-dev-server

Após instalar as dependências, que pode ser um processo um pouco demorado, será criado um diretório chamado node_modules em seu projeto, pelo seu tamanho é recomendável inclui-lo no gitignore de sua aplicação, caso você utilize git.

Outro ponto importante, é que este diretório pode ser refeito a qualquer momento pelo comando $ npm i.

Após isso, crie o arquivo webpack.config.js com o seguinte conteúdo:

const webpack = require('webpack')

module.exports = {
   mode: 'development',
   entry: './src/index.jsx',
   output: {
      path: __dirname + '/public',
      filename: './bundle.js'
   },
   devServer: {
      port: 8080,
      contentBase: './public',
   },
   resolve: {
      extensions: ['.js', '.jsx']
   },
   module: {
      rules: [{
         test: /.js[x]?$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
}

Crie um diretório chamado public e dentro dele um arquivo com o nome de index.html com o seguinte conteúdo:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Hello React!</title>
   </head>
   <body>
      <div id="app"><div>
      <script src="bundle.js"></script>
   </body>
</html>

Agora crie mais um diretório chamado src, será dentro deste diretório que grande parte do projeto será construído. Neste diretório crie um arquivo index.jsx, a extensão jsx é a extensão padrão para o React, e coloque o seguinte conteúdo:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Olá React</h1>, document.getElementById('app'))

Agora execute:

$ npm run dev

E acesse http://localhost:8080/.

Essa foi uma pequena demonstração da construção de uma aplicação React com Webpack, continue explorando e descobrindo este framework incrível!