Introdução ao React

HTML e CSS são tecnologias bem simples no geral. Porém, qualquer aspirante a desenvolvedor frontend tem aspirações maiores do que um arquivo de texto pode oferecer. Tudo isso é possível utilizando Javascript, mas o quão válido, escalável e realmente produtivo é implementar tarefas ultra-complexas utilizando apenas JS? Nem um pouco. Nessa sessão, abordaremos algumas noções básicas de React, framework que facilita o desenvolvimento de páginas web complexas.

O que é o React?

A resposta curta: uma biblioteca que permite a você criar de forma fácil a interface do usuário de dentro do Javascript. Sim, isso quer dizer que na maior parte do tempo, você estará utilizando apenas Javascript para construir a interface. Claro, estilos ainda são feitos usando CSS, mas até isso é um pouco diferente aqui. A ideia é poder utilizar todo o poder de uma linguagem de programação para construir uma interface, não apenas o de uma linguagem de marcação como HTML.

O que podemos fazer utilizando uma linguagem de programação que não podemos utilizando apenas o HTML? Muita coisa na verdade. Se eu quiser que um elemento apareça mil vezes em HTML, temos duas opções: realmente escrever o HTML desse elemento mil vezes ou usar Javascript. Mas os scripts para Javascript são horrendos, tendem a ficar enormes e não são nem um pouco fáceis de lidar. E se eu quiser que os elementos ímpares sejam de cores alternadas? Escrevo todos eles? Render-se ao Javascript é a única opção, mas ele não precisa ser tão difícil assim de lidar.

O React resolve esse problema de forma simples. Você cria pedacinhos da sua interface, que chamamos de componentes. Cada componente cuida da sua própria vida e dos seus estilos CSS. Além disso, cada componente é customizável, permitindo alterações. Isso é o que React é.

Instalação

Tenho o prazer de lhe dizer para não se preocupar com instação no momento: o React vai vir pré-instalado nas suas aplicações Next.JS! Se você não sabe o que é Next.JS, não se preocupe ainda: há uma sessão inteira para isso! Se é sua primeira vez aqui, recomendo começar brincando com um SandBox como o encontrado aqui.

Conceitos do React

Há três conceitos principais que você precisará aprender.

Iremos passar por cada uma delas nas sessões a seguir!