javascript react

iniciando com com React js em 2017

Compartilhe os ensinamentos do mestre

Por que usar React JS?

O React vem ganhando mais e mais espaço no mundo do frontend e isso não é mero acaso. Além de ter sido criado pela equipe do facebook,ser extremamente rápido e eficiente, ele possui uma comunidade super ativa.

Se você nunca ouviu falar em React e está se perguntando “pra que diabos eu uso isso?” aqui vai uma introdução rápida. O React js foca em resolver um problema da forma mais eficiente o possível, a renderização do DOM. Historicamente os desenvolvedor frontend acoplam o estado da aplicação e a renderização do DOM e acabam fazendo manipulações manuais no HTML, o problema é que como sabemos manipular o DOM é uma tarefa pesada e que se não for feita com cuidado pode prejudicar o desempenho da aplicação. O React js vem para resolver esse problema e renderizar a UI da forma mais otimizado o possível.

Ou seja, ele é responsável pelas ‘views’ do seu MVC e utiliza um DOM virtual para detectar mudanças no estado da sua aplicação e renderiza-las na tela de forma ótima.

Um dos principais objetivos do React Js é minimizar a manipulação do DOM e é justamente daí que vem sua velocidade. Além disso ele é excelente para gerenciar os estados das várias partes do seu front end através do conceito de componentes. Assim você pode criar e combinar seus componentes de forma totalmente desacoplada e compor o seu frontend pela combinação desses componentes. O que resulta em uma código mais legível e mais fácil de manter.

Atualmente existem outros frameworks que se propõe a resolver o mesmo problema. Mas dentre as vantagens do React podemos citar:

  1. Curva de aprendizado suave, diferente do Angular por exemplo dominar o React é muito mais simples e rápido.
  2. O React é extremamente rápido e eficiente. Como ele foi criado exclusivamente para cuidar da renderização da UI ele acaba sendo mais eficiente nessa tarefa que outros frameworks que se propõem a fazer de tudo um pouco.
  3. Não afeta o SEO. Ele pode ser pré-renderizado no servidor assim o SEO não será afetado(falaremos mais disso adiante).
  4. Foi pensando e originalmente criado pela equipe do Facebook. O que significa que além da comunidade há uma equipe que está sendo paga apenas para pensar no melhor futuro possível para o React.
  5. E por ai vai. XD.

Como o react funciona

Um ponto importante sobre o React é o fato de que ele não é um framework MVC ele é uma lib focada em gerenciar os componentes da UI e renderizar o DOM da forma mais eficiente o possível.

Como já citado anteriormente o grande trunfo do react é o fato de ele trabalhar com o virtual DOM e evitar redesenhar todo o DOM(que como sabemos é extremamente lento) a cada alteração de estado da aplicação.

Quando algum componente precisa ser atualizado, o React não renderiza todo o DOM inteiro novamente. Ao invés disso ele descobre exatamente quais elementos precisam ser atualizados e faz a menor quantidade possível de mudanças no DOM

O React te permite obter ainda mais performance nesse processo implementando hooks para mudar a maneira como o virtual DOM se ajusta e é renderizado. O maior custo do Virtual DOM acaba sendo a sua implementação, que é consideravelmente grande. Uma aplicação pequena feita com React dificilmente vai ter menos que 200kb.

Ele é todo orientado a componentes o que faz com que o código escrito seja mais desacoplado e consequentemente mais fácil de manter.

Não afeta o SEO

 

Como já citado uma das vantagens do React é que você pode pré-renderizar ele no servidor e depois o javascript irá apenas atualizar o estado do DOM conforme o estado da aplicação mudar. Assim os mecanismos de busca conseguem fazer parse do seu HTML sem precisar renderizar a página inteira. Fica a critério do desenvolvedor enviar o html pré-renderizado ou renderizar tudo na máquina do cliente.

Hello World com React Js

 

Não existe maneira melhor de entender uma nova tecnologia do que vendo um exemplo de como ela funciona, então sem mais delongas vamos criar um hello world em React.

Antes de mais nada certifique-se que você tem o node instalado no seu computador, você pode rodar o comando:

node –version

Se você não tiver uma saída parecida com a da figura abaixo você vai precisar instalar o node antes de prosseguir.

Criando a estrutura do projeto

  1. Crie uma nova pasta –> mkdir hello-react
  2. Navegue para a nova pasta –> cd hello-react
  3. Inicie o projeto –> npm init -y

 

 

saída no npm init:

{
  "name": "hello-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

 

Na pasta raíz crie os seguintes arquivos

  • index.html
  • webpack.config.js
  • uma nova pasta chamada src

 

Edite o arquivo package.json para que fique similar a este:

{
  "name": "hello-react",
  "version": "1.0.0",
  "description": "Um aplicativo de exemplo com react",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --inline",
    "build": "webpack"
  },
  "keywords": [],
  "author": "victorrseloy@hotmail.com", //você pode mudar isso aqui pelo seu email
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.29.0",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

 

Basicamente você vai precisar alterar a parte “dependencies”, estamos adicionando as dependências necessárias para rodar o react.

Modifique os arquivos como o seguinte conteúdo.

Index.html

<html>
  <head>
  <!-- Bootstrap, versão mais atual compilada e com css minificado -->
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
          <div id="app"></div>
        </div>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

No nosso index.html estamos criando a base da página, nossos componentes serão renderizados na div com id “app”. Além disso estamos incluindo uma versão pré-compilada do bootstrap.

webpack.config.js

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: [ 'es2015', 'react' ] }
      }
    ]
  }
};

como estamos usando babel ao invés de vanila javascript, precisamos que o código seja transpilado e empacotado em um arquivo único de saída. É isso que estamos fazendo aqui, em breve escreverei um tutorial sobre webpack explicando melhor essa mágica.  Mas em resumo esse arquivo será usado para gerar o nosso arquivo js final, o bundle.js

vamos ao React JS

Agora que já criamos a estrutura básica do projeto, vamos ao que interessa. O código com ReactJs.

Vá para a pasta src e crie os seguintes arquivos:

  • app.js
  • HelloReact.js

O conteúdo dos arquivos será o seguinte:

App.js

import React from 'react';
import { render } from 'react-dom';
import HelloReact from './HelloReact';


render(
    <HelloReact />,
  document.getElementById('app')
);

Neste arquivo estamos sobrescrevendo o método render e dizendo para renderizar nosso componente <HelloReact /> na div com id “app”.

HelloReact.js

import React from 'react';
import { Button, Jumbotron } from 'react-bootstrap';

export default class HelloReact extends React.Component {
    render() {
    	return(
        <Jumbotron>
          <h1>Hello, world!</h1>
          <p><a className="btn btn-primary btn-lg" href="#" role="button">Saiba mais</a></p>
          <Button bsStyle="success">Um botão descolado</Button>
        </Jumbotron>
        )
    }
}

Novamente estamos sobrescrevendo o método render e compondo nosso componente, todo componente React precisa herdar direta ou indiretamente de React.Component.

Se você não quiser digitar tudo isso você pode fazer download do projeto diretamente nesse repositório do github:

https://github.com/victorrseloy/hello-react

Entretanto eu sugiro que você siga o passo a passo do projeto para ter uma melhor compreensão de como ele funciona.

testando o projeto

Pronto agora é só rodar o projeto para ver o resultado. Para fazer isto vá até a pasta raíz do seu projeto e rode os comandos:

  1. npm install
  2. npm start

você vai obter uma saída parecida com essa em seu console:

 

Agora em seu browser acesse http://localhost:8080 para ver sua aplicação: