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!

 

ES6 e o suporte dos navegadores

A Web teve um início, mas não terá um fim.

ES6 não é suportado por navegadores mais antigos, que foram desenvolvidos antes do seu lançamento. Esses navegadores mais antigos foram desenvolvidos para se adaptar à versão do JavaScript naquela época (que era a ES5.1). Se você tentar rodar seu código ES6 em um navegador antigo, ele não funcionará.

Uma função arrow é executada e causa erro de sintaxe no Safari 9. Fechar
Uma função arrow é executada e causa erro de sintaxe no Safari 9.

Faz sentido que um código que não funcione em navegadores antigos, desenvolvidos em uma época anterior ao ES6, mas existem navegadores desenvolvidos após essa melhoria do JavaScript que também não suportam essa nova sintaxe e funcionalidade ainda.

Continuar lendo ES6 e o suporte dos navegadores

Javascript Transpiling

Você provavelmente já ouviu o termo “compilador”. Um compilador pega um programa escrito numa linguagem de código-fonte, por exemplo C++ e converte para outra linguagem, como código de máquina. Passar um código pelo compilador muda o nível de abstração dele. Ele aproxima um código lido por humanos a um lido por máquinas. Isto é compilar: pegar uma linguagem fonte e convertê-la a uma de nível mais baixo.

Transpiling é um subconjunto da compilação. O código fonte é convertido em código-alvo. É como o compilador, mas o código-fonte e código-alvo são do mesmo nível de abastração. Se o código-fonte for lido por humanos, a linguagem de saída também será lida por humanos.

Mas por que iríamos querer isso?

Navegadores antigos não têm suporte total ao ES6, mas suportam ES5. Assim podemos escrever o Javascript usando a sintaxe e as funcionalidades do ES6 e depois usar um Transpiling para convertê-lo de ES6 para ES5.

Programamos o que há de melhor e mais novo e convertemos para rodar em toda parte.

O transpiler JavaScript mais popular é chamado Babel.

Continuar lendo Javascript Transpiling

O que é um Polyfill?

Um polyfill é um arquivo de Javascript que preenche um buraco replicando atributos nativos para navegadores que não os possuem.

Criado por Remy Sharp (https://remysharp.com/2010/10/08/what-is-a-polyfill), um polyfill, ou polyfiller, é um pedaço de código (ou plugin) que fornece a tecnologia que o desenvolvedor espera que o navegador implemente.

Um exemplo de polyfill

O código abaixo é um polyfill para o novo método de string do ES6, startsWith():

if (!String.prototype.startsWith) {
 String.prototype.startsWith = function (searchString, position) {
   position = position || 0;
   return this.substr(position, searchString.length) === searchString;
 };
}

Continuar lendo O que é um Polyfill?

Aplicações somente com JavaScript – MEAN Stack

Recentemente decidi conhecer mais do mundo JavaScript (EcmaScript), pois está se tornando a hype do momento e o que eu conhecia da linguagem era muito pouco (chato e nunca funcionava como eu queria) comparado com a quantidade de informação que obtive nessas semanas de estudo.

Percebi que existem diversos frameworks e bibliotecas da comunidade apoiadas por grandes empresas como por exemplo Facebook (ReactJs) e Google (AngularJs) entre outros.

Continuar lendo Aplicações somente com JavaScript – MEAN Stack