Introdução ao React

O React do facebook mudou o jeito que nós pensamos sobre os aplicativos da web e o desenvolvimento da interface do usuário.Devido ao seu design,você pode usá-lo além da web.Um recurso conhecido como Virtual DOM permite isso.

O que é React?

                                                                             

React é uma biblioteca do javacript que força você a pensar em termos dos componentes. Esse modelo de pensamento se encaixa bem nas interfaces do usuário. Dependendo do seu plano de fundo, pode parecer estranho a princípio. Você terá que pensar com muito cuidado sobre o conceito de estado e onde ele pertence.

React é pragmático no sentido em que contém um conjunto de escotilhas de escape. Se o modelo React não funcionar para você, ainda é possível reverter para um nível inferior. Por exemplo, existem ganchos que podem ser usados ​​para envolver a lógica antiga que depende do DOM. Isso quebra a abstração e liga seu código a um ambiente específico, mas às vezes essa é a coisa pragmática a ser feita.

Virtual DOM

Um dos problemas fundamentais da programação é como lidar com o estado. Suponha que você esteja desenvolvendo uma interface de usuário e queira mostrar os mesmos dados em vários lugares. Como você se certifica de que os dados são consistentes?

Historicamente, misturamos as preocupações do DOM e do estado e tentamos administrá-lo lá. React resolve esse problema de uma maneira diferente. Introduziu o conceito do Virtual DOM ás massas.

Virtual DOM existe na parte superior do DOM real ou de algum outro destino de renderização. Ele resolve o problema de manipulação do estado à sua maneira. Sempre que são feitas alterações, descobre a melhor maneira de agrupar as alterações na estrutura DOM subjacente. É capaz de propagar mudanças através de sua árvore virtual.

Virtual DOM Performance

 Usar a manipulação DOM dessa maneira pode levar a um aumento no desempenho. Usar o DOM manualmente tende a ser ineficiente e é difícil de otimizar. Ao deixar o problema da manipulação do DOM para uma boa implementação, você pode economizar muito tempo e esforço.

O React permite ajustar ainda mais o desempenho implementando ganchos para ajustar a maneira como a árvore virtual é atualizada. Embora isso seja frequentemente um passo opcional.

O maior custo do Virtual DOM é que a implementação torna o React bastante grande. Você pode esperar que os tamanhos dos pacotes de aplicativos pequenos fiquem em torno de 150 a 200 kB minificados, incluindo o React. O gzipping ajudará, mas ainda é grande.

Soluções como  preact e react-lite permitem que você alcance tamanhos de pacotes muito menores enquanto sacrifica algumas funcionalidades. Se você é consciente do tamanho, considere verificar essas soluções..

Bibliotecas, como Matt-Esch/virtual-dom ou paldepind/snabbdom, focam inteiramente no Virtual DOM. Se você estiver interessado na teoria e quiser entendê-la ainda mais, verifique isso..

React Renderers

Como mencionado, a abordagem da React desacopla da web. Você pode usá-lo para implementar interfaces em várias plataformas. Neste caso, estaremos usando um renderizador conhecido como react-dom.Ele suporta a renderização do lado do cliente e do servidor.

Renderização Universal

Poderíamos usar react-dom para implementar a chamada renderização universal. A ideia é que o servidor processe a marcação inicial e passe os dados iniciais para o cliente. Isso melhora o desempenho evitando viagens de ida e volta desnecessárias, pois cada solicitação vem com uma sobrecarga. Também é útil para fins de otimização de mecanismo de busca (SEO).

Mesmo que a técnica pareça simples, pode ser difícil implementá-la em aplicações de maior escala. Mas ainda é algo que vale a pena conhecer.

Às vezes, usar a parte do lado do servidor do react-dom é suficiente. Você pode usá-lo para gerar faturas por exemplo. Essa é uma maneira de usar o React de maneira flexível. Gerar relatórios é uma necessidade comum, afinal.

Renderizadores de React disponíveis

Mesmo que o react-dom seja o renderizador mais usado, existem alguns outros que você pode querer conhecer. Eu listei algumas das alternativas bem conhecidas abaixo:

• React Native - O React Native é uma estrutura e renderizador para plataformas móveis, incluindo iOS e Android. Você também pode executar a React Native na web.
• react-blessed - react-blessed permite escrever aplicações de terminal usando React. É até possível animá-los.
• gl-react - gl-react fornece ligações WebGL para o React. Você pode escrever shaders dessa maneira, por exemplo.
• react-canvas -  react-canvas fornece ligações React para o elemento Canvas.

React.createElement e JSX

 Dado que estamos operando com DOM virtual, existe uma  API de alto nível para lidar com isso. Um componente React ingênuo escrito usando a API JavaScript poderia ter esta aparência:

const Names = () => {
    const names = ['John', 'Jerry', 'Jack'];
    return React.createElement(
        'div',
        null,
        React.createElement('h2', null, 'Names'),
        React.createElement(
            'ul', {
                className: 'names'
            },
            names.map(name => {
                return React.createElement('li', {
                    className: 'name'
                }, name 
); }) ) ); };

Como é detalhado escrever componentes dessa maneira e o código é muito difícil de ler, geralmente as pessoas preferem usar uma linguagem conhecida como JSX. Considere o mesmo componente escrito usando o JSX abaixo:

const Names = () => { const names = ['John', 'Jerry', 'Jack']; return ( < div > < h2 > Names < /h2> { /* Isso é uma lista de nomes */ } < ul className = "names" > { names.map(name => < li className = "name" > { name } < /li> ) } < /ul> < /div> ); } ;

Agora podemos ver que o componente renderiza um conjunto de nomes dentro da lista HTML. Pode não ser o componente mais útil, mas é suficiente para ilustrar a ideia básica do JSX. Ele nos fornece uma sintaxe que lembra o HTML. Ele também fornece uma maneira de escrever JavaScript dentro dele usando chaves ({}).

Comparado ao vanilla HTML, nós usamos className ao invés de class.  Isso ocorre porque a API foi modelada após a nomenclatura do DOM. Demora algum tempo para se acostumar e você pode experimentar JSX shock até começar a apreciar a abordagem.