React

Componentes da Equipe

Carlos Daniel e João Eduardo

Resumo

Esta página contem o resultado da pesquisa realizada pelos estudantes do curso de Bacharelado em Engenharia de Software, na Universidade Católica do Salvador (Carlos Daniel e João Eduardo), a respeito da linguagem de programação React.
Esta pesquisa, realizada para a matéria de Compiladores, tem como objetivo confeccionar um material capaz de ser entendido por um estudante que esteja iniciando no curso sobre a linguagem de programação React. Para isto, usou-se uma linguagem simples, objetiva e explicativa.
Ao longo dos próximos capítulos, encontram-se explicados temas como o que é a linguagem, um pouco de sua história, conceitos da linguagem, conceitos gerais, e por fim, uma relação entre os aspectos da linguagem abordada e a disciplina de Compiladores.


Sumário

O que é

React, de acordo com o site oficial, trata-se de uma biblioteca JavaScript para a construção de interfaces de usuário (UI)[1]. Já o conceito de Interfaces de Usuário, por sua vez, engloba quaisquer meios que possibilitem a interação entre o usuário e um sistema, desde dispositivos físicos (por exemplo, teclados, mouses, monitores, displays sensíveis ao toque), até à maneira como as informações disponibilizadas pelo sistema são organizadas e apresentadas ao usuário (por exemplo, a aparência de um site ou aplicativo), e como este mesmo usuário pode interagir com essas informações (por exemplo, menus, linhas de comando, gráficos, botões, etc)[2][3].
JavaScript, por sua vez, é uma Linguagem de Programação (vocabulário, regras gramaticais e sintaxe com o objetivo de instruir um dispositivo computacional (laptop, celular, televisão, calculadora, etc) a executar tarefas específicas) geralmente utilizada no desenvolvimento de sites e aplicações web, uma vez que ela proporciona mais dinamicidade e interação aos elementos da Interface do Usuário.[4][5]
Apesar de ser baseado em JavaScript, o React não está limitado a ser visualizado apenas em navegadores web, uma vez que ele pode ser executado tanto em servidores ou celulares, devido a outras tecnologias as quais viabilizam sua execução.


História

A concepção do react deu no início do ano de 2011 produzido pelos engenheiros de softwares do facebook.
O seu primeiro uso foi na página de feed do Facebook e posteriormente no Instagram,
O React, foi feito para ter uma interface mais interessante com o usuário. o framework se preocupa com a parte da View.O React trabalha com o conceito de estado do componente que utiliza as propriedades para atualizar o estado e retorna a sua representação virtual ao DOM.
Hoje a linguagem é open source sendo liberada para toda a comunidade , e outras grandes empresas também utilizam, como Netlix, Airbnb, Twitter entre outros, no brasil o maior portal de notícias também utiliza o globo.com.


Características

Uma característica importante do ReactJS é o formado do seu processamento, ele trabalha com os estados do seus elementos, assim podendo analisar o estado para que possa atualizar unicamente a parte necessária do DOM.Assim não fazendo necessário ser gasto nem a mémoria do lado do cliente e isso também se estende por parte do servidor, com a popularização do conceito de carregamento por partes que mais adiante iremos explicar, o uso dos componentes.
Ainda falando da suas vantagens o usuário ganhou mais iteratividade por este controle do estado dos itens das telas.
Ele tem um processamento realtime, ou seja possa ser que certos erros possa existir em tempo de execução.
Um outro ponto importante é o Virtual DOM, que possibilita o ReactJS a fazer tudo isso,sem isso o processamento poderia demandar muito mais memória e trabalho por parte do programador, ele ganha muito com o virtual, cria uma representação do dom na linguagem do DOM, o virtual que gerencia o DOM da página,quando o estado é modificado do item ele manda somente a atualização do parâmetro do DOM, ou seja isso possibilita o ganho de processamento, ele faz a comparação do virtual DOM e o DOM real ele de forma automática já faz a atualização através do mecanismo do patch para atualizar o DOM real conforme as diferenças observadas.


Component

Como já foi dito anteriormente, a característica que mais se destaca no ReactJS é auxiliar na criação da UI. Com isso a forma de abordagem do React é de utilizar componentes para que tenha o máximo de reaproveitamento.
Basicamente falando, a estrutura do React trata-se de uma lista de componentes maiores, que por sua vez, se comunicam e interagem com componentes menores, e assim sucessivamente.
Um componente, em um conceito mais genérico, trata-se de uma parte identificável de um programa maior. Geralmente, um componente provê uma função, ou um conjunto de funções relacionadas a sua execução. No design de um sistema, ele é dividido em componentes, que por sua vez são divididos em pequenos módulos. Exemplos de componentes podem ser desde um botão na parte gráfica de um programa, até a interface com uma base de dados.
Com relação à execução do React em navegadores, etc, um componente React é um objeto, que não exporta apenas a parte gráfica, mas também todo o código necessário para a sua manipulação.

export default function Button() {
 return (
   <button
     onClick={() => alert('Clicked')}
   >Click me</button>
 );
}

obs: Exemplo

A função acima mesmo utilizando nada mais do que JS puro, ele pode ser feito com o React.
O que pode ser abordado nesse exemplo, é que se for necessário um novo Botão com o Alert, terá que ser feito novamente, ou seja podemos através desse exemplo generalizar, também temos que pensar no caso de quanto mais o retrabalho maior a quantidade de possíveis erros, poderão ser encontrados em erros unitários.
Então vemos cada vez mais a necessidade de criar cada vez mais em componentes, isso se adere bastante ao conceito dos processos ágeis e evitar a re criação desnecessária de novas funções que já existem.


Functional components

Considerando o trecho de código abaixo:
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

\Pode-se dizer que a função escrita, mesmo sendo literalmente uma função JavaScript, é um componente funcional do React,. Isto por que, de acordo com o site oficial, a função aceita como parâmetro um Prop (ainda que seja um objeto JavaScript) contendo informações, e retorna um elemento do React.

JSX

Como exemplificado nos trechos de código dos capítulos anteriores, a sintaxe de escrita de código em React implica no fato de códigos Html (linguagem de marcação de hipertexto, utilizada por navegadores para exibir a interface gráfica de um site), e códigos JavaScript ficarem juntos dentro do mesmo arquivo.
Para realizar isto, o React utiliza uma outra linguagem, chamada JSX.
Um aspecto negativo dessa abordagem do React é a junção das duas linguagens, o que pode deixar o código um pouco mais confuso. Por outro lado, esse mesmo aspecto pode facilitar e melhorar a produtividade do desenvolvimento da camada de FrontEnd (camada mais externa da aplicação, geralmente a interface gráfica).
class MyComponent extends React.Component {
  render() {
    return <p>Today is: {new Date()}</p>;
  }
}


Props e State

Em React, os atributos dos componentes são chamados de Props. é através das Props que os componentes se comunicam entre si.
class ComponentePai extends React.Component {
  render() {
    return <ComponenteFilho message="Hello World"/>;
  }
}
class ComponenteFilho extends React.Component {
  render() {
    return <p>Meu pai disse: “{this.props.message}”</p>;
  }
}

Devido À essa abordagem, a comunicação entre os componentes é unidirecional. Dados podem fluir apenas de componentes “pai” para seus “filhos”, sendo a comunicação inversa a princípio inviável.
No entanto, alguns componentes precisam de dados que não vem de seus “pais”, como entradas do usuário, etc. Nesse caso, o React possui uma outra propiedade, chamada State.
Na prática, a maior parte dos componentes em React vão conter apenas Props. O State será utilizado quando o componente depender de alguma entrada fornecida pelo usuário, com o objetivo de controlar as mudanças no componente.
class MyComponent extends React.Component {
  handleClick = (e) => {
    this.setState({clicked: true});
  }
  render() {
    return <a href="#" onClick={this.handleClick}>Click me</a>;
  }
}


Type

O conseito de Type (ou Types) no React pode ser associado a diferentes ferramentas. Basicamente, os Types vão se referir aos tipos das propriedades de um componente (Props), cabendo às ferramentas o papel de garantir esses tipos (strings, inteiros, pontos flutuantes, valores booleanos, dentre outros).
Como dito no início do primeiro capítulo, o React foi construído a partir do JavaScript. O JavaScript, por sua vez, é uma linguagem de programação fracamente tipada (ou seja, suas variáveis adquirem seus tipos durante a execução do programa. “[…]O programa pode alterar o tipo de dado contido na variável;[…]”, e uma mesma variável pode assumir tipos diferentes ao longo da execução do programa).
Isto implicaria no React não possuir tipos para suas variáveis, o que devido à natureza do React de seus componentes serem bastante reutilizados em diferentes aplicações, ocasionaria diversos cenários problemáticos para um desenvolvedor que fosse reutilizar um componente escrito por outro desenvolvedor. No entanto, não é isso o que acontece. O React possue algumas soluções para contornar esse aspecto. Dentre elas, estão os prop-types, o Flow e o TypeScript.
Os prop-types atuam como validadores sobre as propriedades de um componente. Esta validação é utilizada para garantir que o tipo de uma variável é o que se espera que ela seja.
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Já o Flow, de acordo com o site oficial, “IS A STATIC TYPE CHECKER FOR JAVASCRIPT”. Ou seja, apesar de não ser exclusivamente para React, faz o mesmo processo de validação descrito acima.
Já o TypeScript, é uma linguagem de programação desenvolvida pela Microsoft. Trata-se de uma versão mais tipada do JavaScript. Por possuir uma tipagem, é possível detectar erros no processo de construção da aplicação.


Developers tools

O conceito de Developers Tools (ferramentas de desenvolvedor) se refere a qualquer software que possa ser utilizado por um programador afim de contribuir com o desenvolvimento de um novo software. São exemplos: compiladores, debugadores, programas para a programação visual, editores de interfaces gráficas, etc.
O React possui várias ferramentas, sejam elas ferramentas oficiais (feitas pelos mesmos desenvolvedores do React) ou ferramentas de terceiros.
São alguns exemplos: React Sight, react-wastage-monitor, React Monocle, react-component-benchmark, dentre outras.
A ferramenta oficial, no entanto, é a React Developer Tools, desenvolvida pelo Facebook. Trata-se de uma extensão para os navegadores Chrome e Firefox, que permite, dentre outras funcionalidades, a inspeção dos componentes, props, states, dentre outras.
Lançada em 2015, ela também oferece suporte para React-Native (uma derivação do React, mais voltada para dispositivos móveis).


Relação com Compilador

Ao longo dos capítulos anteriores, foram abordados vários conceitos referentes ao React. Todos eles, possuem relação com a base da conversão entre a linguagem de auto nível (mais próxima da linguagem humana) e a linguagem de máquina (conjunto de instruções que uma máquina entende e utiliza para desempenhar seu comportamento), os compiladores.
A princípio, os compiladores eram utilizados para gerar programas a serem executados diretamente pela máquina. Com o tempo, as necessidades e os usos das máquinas foram evoluíndo, e com elas, a necessidade de novas interfaces foram surgindo, e os compiladores, responsáveis por gerar tudo isso também foram evoluíndo. Então vieram os sistemas operacionais, as linguagens de programação também evoluiram, e atualmente, e chegou-se a um ponto, onde, em benefício da portabilidade, grande parte das interfaces dos sistemas mais utilizados são escritas em linguagens como o React, que por sua vez, são compilados para JavaScript, que são compilados pelos navegadores para linguagem de máquina, cuja a execução é gerenciada pelo sistema operacional do dispositivo em questão (computador, celular, televisão), tudo isto da maneira mais rápida que a tecnologia atual permitir.
Cada navegador possui seu compilador e seus processos de compilação, no entanto, todos entendem a mesma linguagem fonte (JavaScript), e falando na maneira mais simplista possível, o que todos fazem é um processo de tradução, o que importa é tornar a execução do código a mais rápida possível.
Algumas das etapas do processo de compilação e sua relação com o React seriam:

  • A análise léxica, onde o código é escaneado e convertido para tokens. Associada ao React, essa fase se assemelha com a verificação de tipos, sintaxe, estrutura do código, etc.
  • A análise sintática, onde os tokens gerados pela fase anterior são processados até que cheguem a uma regra sintática que, posteriormente será analisada semanticamente. Nessa fase se daria a conversão entre a sintaxe do React em código JavaScript.
  • A análise Semântica, onde as rotinas semânticas podem gerar código intermediário ou gerar diretamente código objeto. Dessa fase em diante, já seria todo o processo que o navegador executa para converter e executar código JavaScript.
A seguir, seguem dois exemplos de código, o primeiro em React, e o mesmo código convertido para JavaScript pelo compilador Babel.
class MyComponent extends React.Component {
  render() {
    return <p>Today is: {new Date()}</p>;
  }
}

"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable
= descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key,
descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps)
defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call
&& (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null
or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable:
false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var MyComponent = function (_React$Component) {
  _inherits(MyComponent, _React$Component);
  function MyComponent() {
    _classCallCheck(this, MyComponent);
    return _possibleConstructorReturn(this, (MyComponent.__proto__ || Object.getPrototypeOf(MyComponent)).apply(this, arguments));
  }
  _createClass(MyComponent, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "p",
        null,
        "Today is: ",
        new Date()
      );
    }
  }]);
  return MyComponent;
}(React.Component);


Referências Bibliográficas


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License