E o React? Parte 1

Essa série de posts é resumo sobre o que é React que fiz durante as aulas da TreinaWeb em 2020.

O React é uma biblioteca desenvolvida pelo time do Facebook com o intuito de se aplicar o conceito de componentização durante o desenvolvimento de uma aplicação web. Isso quer dizer que, com o auxílio do React e do JavaScript, você poderá desenvolver componentes reutilizáveis na interface de sua aplicação web. Isso certamente acelera e facilita o trabalho que o desenvolvedor teria normalmente para desenvolver a interface da aplicação web.

Essa ideia de componentização na verdade não é nova. Ela já era usada há muitos anos no desenvolvimento de aplicações Desktop. Porém, no começo da Internet, o desenvolvimento Web era totalmente voltado a sites simples, criados para exibir informações estáticas.

O próprio Facebook define o React como sendo "uma biblioteca declarativa, eficiente e flexível baseada em JavaScript para construção de interfaces".

Como você pode reparar, o React se baseia na ideia de criarmos componentes que podem ser reutilizados em toda a aplicação e até em outras aplicações.

Veja a imagem acima. Ela apresenta um menu de navegação. Imagine criar um componente que contenha todo o código necessário para esse menu e, quando quisermos utilizá-lo, bastaria chamá-lo por uma tag criada por nós mesmos como <MeuMenu />. Assim fica fácil reutilizá-lo onde quisermos, além da nossa View ficar mais limpa ao invés de várias <div> para todos os lados.

O React tem boa performance, pois evita acessar diretamente o DOM.

Como o objetivo do React é focar na criação de componentes, muitas funcionalidades ficam por conta dos desenvolvedores como: requisições, roteamento, internacionalização, etc.

Isso pode até parecer ruim, mas na verdade nos dá flexibilidade para integrar com qualquer biblioteca que quisermos.

Quem usa React?

Várias startups e gigantes do mundo todo usam React, pois sua versatilidade está revolucionando o modo como criamos nossas aplicações tanto web quanto mobile.

Isso mesmo! Com React também podemos desenvolver aplicações nativas para dispositivos móveis, como é o caso do Instagram. Isso nós veremos no curso de React Native.

O que é DOM e Virtual DOM?

O DOM (Document Object Model) é uma interface gerida pelos navegadores entre o HTML e o JavaScript. Quando você manipula um elemento HTML através de código JavaScript, ele acessa este elemento justamente através do DOM. É como se cada nó do DOM apontasse para o seu respectivo elemento HTML e o JavaScript, para evitar ficar realizando parse do HTML toda hora em que for necessária a manipulação de HTML, o representasse através desta estrutura virtual.

Repare no exemplo abaixo. Na ilustração, nós temos uma representação básica do que seria uma árvore DOM montada por um navegador qualquer.

Sendo assim, toda vez que um código JavaScript precisar acessar um elemento HTML, quer seja para realizar uma modificação ou mesmo somente verificar como está o estado atual do elemento, ele "navega" através da árvore DOM para encontrar o elemento e, após encontrá-lo na árvore DOM, ele consegue encontrar sua correspondência dentro do HTML.

Se quisermos deixar o HTML dinâmico, teremos que utilizar a árvore DOM para realizar as modificações necessárias nos elementos HTML. O problema é que o acesso e navegação dentro do DOM é muito lenta.

Para melhorar este aspecto, o React mantém uma cópia do DOM em memória, chamada de Virtual DOM. Quando algum dado é alterado e é necessária uma alteração na view (ou seja, no seu HTML), o React verifica pelo Virtual DOM quais as partes que devem ser alteradas. Com isso, ele acessa o DOM o menor número possível de vezes, alterando unicamente onde é necessário. Isso garante uma ótima velocidade às aplicações que utilizam a estratégia do Virtual DOM, como React e Vue.js.

Principais funções

Podemos criar elementos com "React.createElement()", onde passamos o nome do elemento, um objeto com propriedades e o conteúdo do elemento.

React.createElement('h1', {id: "meuTitulo"}, "Hello World!"),

Iniciamos o React executando "ReactDOM.render()", passando primeiro um elemento a ser renderizado e um elemento onde iremos inserir tal elemento.

ReactDOM.render(
    React.createElement('h1', {id: "meuTitulo"}, "Hello World!"),
    document.querySelector("#minhaDiv")
);

O que é JSX?

O JSX nos permite escrever algo como HTML (ou XML) no meio do nosso código JavaScript, que após transpilado produz elementos do React.

Sintaxe do JSX

Para dar um "escape" para executar JavaScript, basta usar chaves:

const myTitle = "TreinaWeb";
<div>{ myTitle }</div>

Condições precisam ser escritas com operadores ternários:

<button>
    {
        isOpen ? "Fechar" : "Abrir"
    }
</button>

Por ser JavaScript, comentários devem ser escritos como comentários de JavaScript, e não HTML.

{/* comentário */}

Outros pontos que não podemos esquecer:

• A palavra "class" e "for" são reservadas no JavaScript. Para se criar uma classe, em sua tag utilize a palavra "className", e para "for", "htmlFor".
• Style deve ser um objeto e o nome dos atributos, ao invés de serem separados por traço, devem estar em camelCase:

var meuEstilo = {"fontSize": "15px", "marginTop": "1em"};
<span style={meuEstilo} ></span>

• No HTML5 algumas tags não precisam ser fechadas. No JSX todas precisam
• Os atributos são escritos em camelCase, como o onclick:
• <button onClick={minhaFuncao} >Clique Aqui</button>

As ferramentas necessárias

Primeiro, precisamos ter o Node.js instalado em nossa máquina.

Para obter o Node.js, acessehttps://nodejs.org

As ferramentas mais comuns para se trabalhar com transpilação do JSX são Babel e WebPack.

Babel

A ferramenta mais comum para fazer transpilação de JavaScript hoje em dia é o Babel. Ele nasceu com o nome "6to5".

Sua principal função era permitir que a gente escrevesse JavaScript com as sintaxes inseridas no EcmaScript 6, posteriormente renomeado para ES2015. Como os navegadores da época não davam suporte ainda ao ES6, o 6to5 convertia nosso código em JavaScript que os navegadores entendiam, o EcmaScript 5.

Como foi anunciado que o JavaScript agora teria atualizações menores e com mais frequência, não fazia sentido manter o nome da ferramenta como 6to5. Então rebatizaram a ferramenta para Babel.

Hoje em dia ele não é apenas utilizado para transpilar ES2015, ES2018, etc, mas também é usado para transpilar JSX.

Para conhecer melhor, acesse:https://babeljs.io/

WebPack

O WebPack é um construtor de módulos. Isso significa que ao invés de ficarmos importando nossos scripts no HTML, podemos criar arquivos bem separados, como módulos, e importá-los, assim como faríamos no Back End.

Ok, isso o Browserify já fazia. O WebPack vai além. Ele também aceita que a gente importe HTML, CSS, Sass, Imagens, CoffeeScript, etc.

Em conjunto com o Babel nós podemos fazer com que o WebPack transpile o JSX antes dele arrumar as dependências do projeto para poder formar o pacote que será entregue ao usuário.

Além disso, o WebPack também é capaz de subir um servidor com LiveReload para podermos acessar nossas páginas.

Para conhecer melhor, acesse:https://webpack.js.org/

O que é Transpilação?

Na aula passada vimos sobre o JSX, mas ele não é suportado pelos navegadores. Temos que fazer uma transpilação do nosso código para JavaScript, permitindo que o navegador entenda nosso código.

Essa transpilação seria como uma "conversão". Lembre-se que foi mostrado um JSX e depois foi dito que ele será transformado em JavaScript.

Seria como uma compilação. Compilação é um termo genérico usado para indicar quando temos um código e transformamos ele em uma outra linguagem, como é o caso do C++ ser compilado para linguagem de máquina.

A Transpilação é um termo usado para indicar quando transformamos um código de uma linguagem para uma outra linguagem com um nível similar de abstração. No caso, estamos apenas transformando um "JavaScript com XML" para um JavaScript puro.

Outros exemplos de transpilação é o CoffeeScript para JavaScript, Sass para CSS ou até mesmo C++ para C.

Create React App

Instale o Create React App executando:

$ npm install -g create-react-app

Crie uma nova aplicação executando:

$ create-react-app nome-do-app

Inicie uma aplicação executando:

$ npm start

Ela será fornecida em "http://localhost:3000"

O que são Componentes?

Elementos de interface com aparência e comportamento próprios que podem ser reutilizados.

Criação de Componentes

Crie uma classe estendendo a classe Component do React.

import React, {Component} from 'react';
class MyDiv extends Component{
    render(){
        return(<div>TreinaWeb</div>);
    }
}
export default MyDiv;

Propriedades

Propriedades são valores que passamos para um componente e ficam dentro do objeto "props". O componente não pode modificá-las.

Estado

Estado indica as variáveis internas do componente, as quais podem ser modificadas. Essas variáveis ficam dentro do objeto "state" e são modificadas pela função "setState()".

Para se aprofundar na criação de componentes, veja nosso curso "React: Dominando Componentes".

Componentes Controlados

Elementos que possuem seu valor controlados pelo React.

Podemos executar o "setState()" para manter o estado do componente atualizado com o valor do elemento. Sem isso o elemento não permitirá alterações.

Componentes Não Controlados

Elementos que seu valor não é controlado pelo React.

Criando Referências

Para criar uma referência, execute "React.createRef()". Guarde o retorno em uma variável e passe-a para um elemento pela propriedade "ref".

A Saideira

Esses conteúdo é fruto de algumas aulas do curso de React da TreinaWeb, conteúdo muito interessante! E essa série continua!