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..