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!

 

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!

 

Nos bastidores do PHP

O manual do PHP diz que um array no PHP é um mapa ordenado que relaciona valores a chaves e é otimizado para vários usos diferentes: array, lista, hashtable (não só array mas basicamente tudo no PHP é uma hashtable – se quiser saber mais sobre o assunto acesse Understanding PHP’s internal array implementation), dicionário, coleção, pilha, fila e mais, possibilitando os valores do array serem outros arrays e arrays multidimensionais.

Graças ao hashtable escrito em C no código-fonte do PHP, os arrays são um diferencial em relação a outras linguagens de desenvolvimento web.

Você pode manipular um array PHP utilizando o foreach() para resolver qualquer tipo de controle de dados.

Continuar lendo Nos bastidores do PHP

Nos bastidores do PHP

O manual do PHP diz que um array no PHP é um mapa ordenado que relaciona valores a chaves e é otimizado para vários usos diferentes: array, lista, hashtable (não só array mas basicamente tudo no PHP é uma hashtable – se quiser saber mais sobre o assunto acesse Understanding PHP’s internal array implementation), dicionário, coleção, pilha, fila e mais, possibilitando os valores do array serem outros arrays e arrays multidimensionais.

Graças ao hashtable escrito em C no código-fonte do PHP, os arrays são um diferencial em relação a outras linguagens de desenvolvimento web.

Você pode manipular um array PHP utilizando o foreach() para resolver qualquer tipo de controle de dados.

Continuar lendo Nos bastidores do PHP

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

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

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?

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?