React

Introdução

React é uma biblioteca JavaScript desenvolvida pelo Facebook em 2013, que fornece uma estrutura para a saída de componentes de interface de usuário de páginas da Web (estrutura da web). Os componentes são estruturados hierarquicamente no React e podem ser representados na sintaxe como tags HTML. O modelo de React promete a estrutura simples, mas de alto desempenho, até mesmo de aplicações complexas, devido aos conceitos do one-way data flow e do "Virtual DOM". O React normalmente forma a base para aplicativos da Web de página única ou aplicativos móveis, mas também pode ser renderizado no lado do servidor usando o Node.js.

React é uma biblioteca que gerencia apenas a interface do aplicativo, que é considerada a exibição no modelo MVC. Pode ser usado com outra biblioteca ou uma estrutura MVC como o AngularJS. A biblioteca se destaca dos concorrentes por sua flexibilidade e desempenho, atualizando a renderização do navegador somente quando necessário.

Ele visa principalmente fornecer velocidade, simplicidade e escalabilidade. Como uma biblioteca de interface de usuário, o React é frequentemente usado em conjunto com outras bibliotecas, como o Redux.

Dentre as aplicações que utilizam esta biblioteca estão: Netflix (lado do servidor somente a partir de 25 de outubro de 2017 para ganhar um performance), Yahoo, Airbnb, Sony e Atlassian. Além de equipes do Facebook, aplicando dogfooding na rede social de mesmo nome, Instagram e também WhatsApp. No final de 2015, o WordPress.com anuncia o Calypso, uma interface para administradores do WordPress, desenvolvida em JavaScript com node.js e React.

Iniciando com React

[https://reactjs.org/tutorial/tutorial.html ]

Conceitos Fundamentais

One-way data flow

One-way data flow significa que, ao criar um aplicativo React, os componentes filhos se aninham em componentes pai. Os componentes pai terão um container para o estado do seu aplicativo (normalmente, uma variável imutável chamada estado, a menos que você esteja usando o Redux ou o Flux, caso em que se encapsularia o estado do aplicativo em uma loja). O componente pai geralmente passa instantâneamente o seu estado para seus componentes filhos, em seguida, os componentes filhos podem se comunicar com o pai para atualizar o estado por meio de retornos de chamada vinculados a um botão ou formulário no componente filho.

Aqui está um exemplo genérico vagamente inspirado em um aplicativo de votação:

Aqui você verá uma essência que descreve o componente pai de um aplicativo. O componente pai é responsável por armazenar o estado (nesse caso, o número de votos). O componente pai passa essas informações de estado para seus componentes filhos CandidateList e Candidate. O componente pai também define uma função, handleVote, que é passada como um prop para seus filhos. Os componentes secundários definirão, então, um callback de função que será enviado ao pai para que ele saiba quando um usuário votou em um candidato.

import React, { Component } from 'react';
import CandidateList from './Views/CandidateList.js';
import Candidate from './Views/Candidate.js';
import fetch from 'isomorphic-fetch';
import { Route, Switch } from "react-router-dom";

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      votes: 0
    }
    this.handleVote = this.handleVote.bind(this);
  }

  handleVote(votes) {
      const nextVoteTotal = votes + 1;
      this.setState({ 
        votes: nextVoteTotal
      })
    }

  componentDidMount() {
    const url = `https://myelection.com`
    fetch(url, {
    method: 'GET',
    headers: {
        Accept: 'application/json',
    }
    }).then((resp) => resp.json())
    .then((json) => {
        this.setState({ votess: json[votes]})
    }).catch((error) =>
        console.log(error)
    )
  }

  render() {
    return (
      <div>
        <Switch>
        <Route 
          exact path = '/'
          render={() => 
          <CandidateList 
            votes={this.state.votes}
            onClick={this.handleVote}
            />}/>
        <Route 
          path='/voting_totals/:candidateId'
          render={() => <Candidate candidateTotal={this.state.votes} />}/>
        </Switch> 
      </div>
    );
  }
}

export default ParentComponent;

O componente CandidateList deve mostrar ao usuário uma lista de candidatos da eleição.

import React, { Component } from 'react';
import Candidate from './Candidate.js';
import Button from 'react-uikit-button';

export default class CandidateList extends Component {
constructor(props) {
  super(props);

  this.handleClick = this.handleClick.bind(this)
}

handleClick() {
  this.props.onClick(this.props.votes)
}
    render() {
    if (this.props.candidates !== null) {
      var candidateItems = this.props.candidates.map((candidate) => (
        <Candidate
        key={'candidate-' + candidate.id} 
        id={candidate.id}
        name={candidatecandidate[0]}
        />
      ));
      return (
        <div>
          {candidateItems}
          <Button 
          block body='Vote for me!' 
          context='primary'
          onClick={this.handleClick} />
        </div>
      )} else {
        return (
          null 
        )
      }
  }
}

Como você pode ver no exemplo acima, o componente pai gerencia o estado e mantém o controle de seus dados e também passa a capacidade de votar em um determinado candidato por meio de um prop associado a um manipulador onClick.

Virtual DOM e DOM-Diffing

O Virtual DOM (VDOM) é um conceito de programação em que uma representação ideal, ou “virtual”, de uma interface do usuário é mantida na memória e sincronizada com o DOM “real” por uma biblioteca como o ReactDOM. Esse processo é chamado de reconciliação (algoritmo de reconciliação).

Essa abordagem habilita a API declarativa de React: Pode-se dizer ao React em qual estado deseja que a UI esteja, e garante que o DOM corresponda a esse estado. Isso abstrai a manipulação de atributos, a manipulação de eventos e a atualização manual de DOM que, de outra forma, se teria que usar para criar uma aplicação.

Como Virtual DOM é mais um padrão do que uma tecnologia específica, as pessoas às vezes dizem que significam coisas diferentes. No mundo React, o termo “Virtual DOM” geralmente é associado aos elementos React, pois são os objetos que representam a interface do usuário.

JavaScript syntax extension (JSX)

Considerando a declaração de variável abaixo:

const element = <h1>Hello, world!</h1>;

Essa sintaxe de tag não é uma string e nem um HTML.

É chamado de JSX e é uma extensão de sintaxe para JavaScript. Recomenda-se usá-lo com o React para descrever como deve ser a interface do usuário. O JSX pode lembrá-lo de uma linguagem de modelo, mas ela vem com todo o poder do JavaScript.

Com a ajuda da linguagem de modelo JSX integrada (JavaScript XML), está disponível essa sintaxe opcional para a declaração de componentes React, que permite encapsular a lógica JavaScript, HTML e CSS em um componente React e modulá-lo em aplicativos da Web.

Elementos Aninhados

Vários elementos no mesmo nível podem ser agrupados em um único elemento de container, como o elemento

mostrado acima. Como se pode ver abaixo.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Expressões JavaScript

Expressões JavaScript podem ser declaradas entre chaves

<h1>{10+1}</h1>

Esse exemplo vai renderizar

<h1>11</h1>

Estrutura de Seleção

Pode-se incorporar quaisquer expressões no JSX agrupando-as em chaves. Isso inclui o operador lógico &&. Pode ser útil incluir condicionalmente um elemento:

Imagem

Isso funciona porque, em JavaScript, true && expression sempre é avaliado como true, e false && expression sempre é avaliado como false.

Portanto, se a condição for verdadeira, o elemento logo após “&&” aparecerá na saída. Se for falso, o React irá ignorá-lo.

Outro método para renderizar condicionalmente elementos inline é usar a condição do operador condicional “?” verdadeiro/falso (operador ternário).

No exemplo abaixo, usamos para renderizar condicionalmente um pequeno bloco de texto.

Imagem

React Native

Princípios

Os princípios de funcionamento do React Native são basicamente os mesmos do ReactJS, exceto pelo fato de ele não estar manipulando o DOM através do VirtualDom, mas de algumas visões nativas. Ele é executado em um processo em segundo plano (que interpreta o JavaScript) no dispositivo final e se comunica com a plataforma nativa por meio de um Bridge serializável, assíncrono e em lote.

O React Native não depende de HTML5, tudo é escrito em JavaScript e se baseia em SDKs nativos.

Hello World

Um programa Hello World teria essa representação em React Native:

Imagem

Críticas

Uma crítica ao ReactJS é que ele requer muita memória (RAM), pois usa o conceito de "DOM Virtual". Em vez de gerar o próprio DOM como uma linguagem de templates, ou seja, em vez de interagir com as APIs do navegador para construir o DOM, o React gera apenas uma árvore de objetos JavaScript na memória e a sincroniza com o DOM 'real' por uma biblioteca como o ReactDOM.

Ao contrário dos modelos MVC estritos, o React propõe um modelo centrado em componente que combina lógica para interação e representação dentro de um objeto. Isto é frequentemente criticado, em particular devido à separação estrita entre markup e lógica na forma de sistemas de templates.