React: do básico ao avançado - Parte 1

React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.

Esta é a primeira parte de uma série de artigos que ensina a desenvolver e estruturar aplicações com JavaScript e React.

JavaScript vs. ECMAScript

ECMAScript é o nome da versão padronizada do JavaScript, ou seja, é a especificação utilizada para desenvolver implementações de JavaScript.

Podemos dizer que ECMAScript é a receita de bolo pra criar implementações JavaScript, como por exemplo, o SpiderMonkey da Mozilla, o V8 do Google e o Chakra da Microsoft. São essas implementações que tornam possível rodar JavaScript no seu browser.

ECMAScript possui várias versões, as mais conhecidas são a 5.1, 2015 (antes conhecida como 6), 2016 (antes conhecida como 7) e 2017 (antes conhecida como 8). Cada nova versão traz novas funcionalidades. Nenhuma nova versão quebra a anterior.

Nesta série, presumimos que você conheça ECMAScript até a versão 5.1. Sempre que utilizarmos uma funcionalidade que foi adicionada após a versão 5.1, vamos falar dela em detalhes.

Não se preocupe se utilizarmos uma funcionalidade que seu browser preferido ainda não implementou, ela vai funcionar mesmo assim sem nenhum esforço da sua parte. :-)

React vs. JavaScript

Imagem meramente ilustrativa, não se preocupe se você não entendeu.

JavaScript é uma linguagem e React é uma biblioteca.

É importante ter em mente que, ao desenvolver aplicações utilizando React, na maior parte do tempo, você estará escrevendo JavaScript "puro", por isso a importância de dominar JavaScript.

Isso não quer dizer que, para desenvolver aplicações com React, você precisa ser um mestre em JavaScript. Quer dizer que, quanto mais você souber JavaScript, melhor e mais simples seu código ficará.

Gosto de dizer, que só aprendi JavaScript de verdade quando conheci React, porém isso não aconteceu do dia para a noite, fui aprendendo ao longo do tempo.

React vs. AngularJS vs. Vue.js

Já usei diversos frameworks e bibliotecas JavaScript, como Sammy.js, Backbone.js, AngularJS 1, Vue.js, entre outros.

Não concordo muito com comparações que tentam buscar um ganhador entre tecnologias para desenvolvimento de apps.

A verdade é que cada biblioteca ou framework tem suas vantagens e desvantagens. Você precisa decidir qual a melhor, baseado na necessidade da sua aplicação e time de desenvolvimento, ou seja, cada caso é um caso, e não existe biblioteca ou framework perfeito para todos os casos.

Ao invés de comparar React com outras bibliotecas ou frameworks, nas próximas partes desta série, vou explicar porque React torna a estruturação e o desenvolvimento de apps mais fácil e divertido e quais suas melhores features.

React, Flux, Redux ou MobX?

Imagem meramente ilustrativa, não se preocupe se você não entendeu.

React fornece soluções nativas para comunicação entre componentes:

• Comunicação entre componentes que possuem relação de pai para filho ou de filho para pai;

• Comunicação entre componentes-irmãos.

Porém, para comunicação entre componentes distantes um do outro, você precisa criar seu próprio sistema de gerenciamento de estado ou utilizar uma solução pronta, como Flux, Redux ou MobX.

Já utilizei Flux, Redux, MobX e várias outras variantes do Flux em meus projetos. O veredicto é que, cada biblioteca traz vantagens e desvantagens, não existe uma solução definitiva para gerenciamento de estado. A escolha depende do tipo de aplicação que você está desenvolvendo e do seu time.

Infelizmente, percebo que vários desenvolvedores optam por Redux somente porque ela é a biblioteca mais famosa de gerenciamento de estado, sem nem parar para pensar se o projeto realmente precisa de uma biblioteca para gerenciamento de estado.

Toda biblioteca introduz um nível de complexidade adicional ao projeto, você deve avaliar se você realmente precisa dela e se já não há soluções dentro das bibliotecas que você já utiliza.

Para 90% dos projetos front-end que não precisavam funcionar offline, nem mesmo precisei utilizar uma biblioteca para gerenciamento de estado, React "puro" resolveu meu problema.

Nas próximas partes desta série, vou falar sobre cada biblioteca de gerenciamento de estado, inclusive como utilizar apenas React para gerenciamento de estado local e global.

Resumo

Nesta série, vamos ensinar como desenvolver apps utilizando JavaScript e React.

Presumimos que você conheça ECMAScript até a versão 5.1 e sempre que utilizarmos uma funcionalidade que foi adicionada após a versão 5.1, vamos falar dela em detalhes.

Não vamos fazer comparações com outras bibliotecas ou frameworks. Em vez disso, vamos focar em falar sobre as funcionalidades do React e como ele resolve os problemas que enfrentamos no dia a dia.

Também vamos falar sobre routing, gerenciamento de estado e quando utilizar uma solução pronta ou criar uma própria.

Na segunda parte desta série, vamos criar nossa primeira app com React.