Conhecendo a biblioteca React

Estou apaixonado(React) e cada dia que passa meu amor aumenta, esse relacionamento está ficando muito sério. Será que vai da casamento ? duvida não!

É isso mesmo galera, a cada dia que passa fico com os quatro pneus arriados por essa biblioteca fantástica.

Afinal quem é ela React ?

React é uma biblioteca JavaScript de código aberto para criar interfaces de usuário, desenvolvida por Jordan Walke um engenheiro do Facebook. Hoje é mantida pelo Facebook, pela comunidade de desenvolvedores individuais e outras empresas. De acordo com o serviço de análise de JavaScript Libsore, está sendo usado nos sites da Netflix, Imgur, Relatório do Bleacher, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros.

Características!

  • Fluxo de dados unidirecional: É um conjunto de valores imutáveis que são passados para o renderizador de um componente como propriedades sem sua tag HTML. É um componente que não pode modificar diretamente as propriedades passadas para ele, mas podem ser passadas funções de retorno de chamada que modificam valores.
  • Virtual DOM: É o uso de um “Virtual Document Object Model”. React cria um cache de estrutura de dados na memória, calcula as diferencas resultantes e em seguida atualiza eficientemente o DOM exibido pelo navegador. Isso permite que o programador escreva o código como se a página inteira fosse renderizada em cada alteração, enquanto o React somente representa subComponents que realmente mudam.
  • JSX Os components são escritos em JSX, uma sintaxe de extensão de JavaScript que permite citar HTML para redenrizar os subComponents, esta é uma extensão para o JavaScript como o E4X(ECMAScript para xml), a sintaxe HTML é processada em chamadas JavaScript da estrutura do React. Os desenvolvedores também podem escrever em JavaScript puro. app.js
import React, { Component } from 'react'  
class App extends component {   
    render() {  
        return (  
            <div>  
                <p>Hello World</p>
            </div>
        )  
    }  
}  
export default App 

Ouvi falar que o React precisa de uma baita configuração!

Depende. Isso mesmo, existe o create-react-app que já faz esse processo todo para você em segundos, inclusive já com uma App funcionando. Só você começar a coda acrescentando seus componentes. Eu prefiro configurar o meu webpack.config.js para entender o funcionamento.

“Afinal é uma biblioteca e não um framework…”

Porque usar o React ?

Por ser uma biblioteca JavaScript de mecanismo dinâmico e também uma forma de reaproveitar Components, além da rapidez na renderização. E todos já sabem do meu amor por JavaScript.

Hora da diversão

Antes de começar é necessário certificar que o Nodejs e o NPM estão instalados.

$ node -v 
$ npm5 -v

Criei um diretório com nome app-react.

$ mkdir app-react 
$ cd app-react

Utilizei o npm init para inicializar o projeto (irá criar o package.json)

$ npm init -y

Criei dois diretórios com nome public e src.

$ mkdir public src

E um arquivo index.html dentro do diretório app-react/public/

<!DOCTYPE html>  
 <html>  
      <head>  
           <meta charset="utf-8">  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <title>Welcome to React</title>  
           <link rel="stylesheet" href="app.css">  
      </head>  
      <body>  
           <div id="app" class="container"></div>  
           <script src="app.js"></script>  
      </body>  
 </html>

Instalando todas as dependências:

Instalei todas as dependências para configuração do webpack.config.js incluíndo o react e react-dom.

$ npm5 i --save-dev babel-core@6.22.1 babel-loader@6.10.2 babel-plugin-html-attrs@2.0.0 babel-plugin-transform-object-rest-spread@6.22.0 babel-preset-es2015@6.22.0 babel-preset-react@6.22.0 extract-text-webpack-plugin@1.0.1 file-loader@0.9.0 style-loader@0.13.0 webpack@1.14.0 webpack-dev-server@1.16.2 react@15.4.2 react-dom@15.4.2

webpack é usado para compilar módulos de JavaScript.

Configurando o package.json

"scripts": {  
   "dev": "webpack-dev-server --progress --colors --inline --hot",  
   "production": "webpack --progress -p"  
}

Criei o arquivo webpack.config.js dentro do diretório raíz app-react/

const webpack = require('webpack')  
const ExtractTextPlugin = require('extract-text-webpack-plugin')  
module.exports = {  
      entry: './src/index.js',  
      output: {  
           path: __dirname + '/public',  
           filename: './app.js'  
      },  
      devServer: {  
           port: 3000,  
           contentBase: './public'  
      },  
      resolve: {  
           extensions: ['', '.js', '.jsx'],  
           alias: {  
                     modules: __dirname + '/node_modules'  
           }  
      },       
      plugins: [  
           new ExtractTextPlugin('app.css')  
      ],  
      module: {  
           loaders: [{  
                test: /.js[x]?$/,  
                loader: 'babel-loader',  
                exclude: /node_modules/,  
                query: {  
                     presets: ['es2015', 'react'],  
                     plugins: ['transform-object-rest-spread']  
                }  
           }, {  
                test: /\.css$/,  
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')  
           }, {  
                test: /\.woff|.woff2|.ttf|.eot|.svg*.*$/,  
                loader: 'file'  
           }]  
      }  
 }

Criei o diretório app-react/src/main/

$ mkdir main 
$ cd main

Adicionei o arquivo app.js

import React from 'react'  
export default props => (  
    <div>  
       <h1>My first Component</h1>
    </div>
)

O que é props ?

Conceitualmente, os componentes são como funções de JavaScript. Eles aceitam entradas arbitrárias(Chamadas de props) e retornam os elementos React descrevendo o que deve aparecer na tela.

Os componentes permitem que você divida a UI em peças independentes e reutilizáveis, pense em cada peça isoladamente(quebra cabeça)

Criei um arquivo index.js dentro do diretório app-react/src/

import React from 'react'  
import ReactDOM from 'react-dom'  
import App from './main/app'  

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

Pronto!

Só rodar o comando abaixo:

$ npm5 run dev
Wharley Ornelas

Wharley Ornelas

Meu nome é Wharley Ornelas. Desenvolvedor Full-Stack, com mais de 15 anos de experiência de software. Membro ativo em comunidade de desenvolvimento..