Para quem curte trabalhar com interfaces interativas o conhecimento de React é de grande ajuda para o desenvolvimento dessas interfaces. Se você utiliza redes sociais com frequência, principalmente do ecossistema do Facebook, já percebeu que partes determinadas da tela têm comportamentos especifícos e independentes do restante da aplicação. Um exemplo disso seriam os anúncios que são exibidos nas aplicações.

Tentando identificar a melhor forma de lidar com esse tipo de funcionalidade, a equipe de desenvolvedores do Facebook desenvolveu uma forma muito específica de lidar com as informações exibidas e a atualização dessas pequenas partes da aplicação: o React.

O que é o React?

O React é uma biblioteca de JavaScript focada na construção de interfaces altamente interativas, ou seja, se trata de um conjunto de linhas de código em JavaScript criados pela comunidade, que podem ser reutilizados em diversos projetos.

Indo um pouco além, várias empresas de tecnologia, como por exemplo o Instagram, a Netflix, o Airbnb e o Twitter, utilizam o React em suas aplicações web e mobile.

Isso indica que existe uma boa variedade de oportunidades de mercado em diferentes tipos de empresas que se utilizam do React. Fora isso, o React é uma biblioteca de código aberto, o que significa que ele tem uma comunidade ativa de desenvolvedores que contribuem constantemente com códigos e recursos para ajudar a melhorar a tecnologia.

React é um framework?

Não, o React não é um framework, ele é uma biblioteca utilizada para criação de de interfaces. Dito isso, ele é utilizado em vários frameworks como por exemplo o Remix, Next.js, RedwoodJS e Blitz.js.

SPA x SSR

SPA ou single page application é uma forma em que a aplicação web é carregada em uma única página, atualizada dinamicamente conforme o usuário interage com a aplicação.

SSR ou server side rendering é uma técnica de renderização em que o servidor processa a solicitação do usuário e envia uma página HTML completa de volta ao navegador. Ou seja, antes de a página ser exibida no navegador, todo o processamento necessário já foi feito no servidor.

A principal diferença entre SSR e SPA é aonde a página é renderizada. Enquanto no SSR, a página é renderizada no servidor antes de ser enviada para o navegador, já no SPA, a renderização ocorre no navegador, conforme o usuário interage com a aplicação. Um destaque importante é que o SPA é melhor para a experiência do usuário, pois evita um desgaste com o recarregamento de várias telas consecutivas.

Iniciando um projeto em React

Ferramentas:

• Node instalado no computador.
• Um gerenciador de pacotes chamado npm, ele vem incluído automaticamente na sua instalação do Node.
• Um bom editor de código para trabalhar nos arquivos do projeto.

Para criar um novo projeto em React, podemos usar a ferramenta npx. Ela nos possibilita na utilização do pacote create-react-app sem ter de instalá-lo primeiro no seu computador.

npx create-react-app meu-app-do-react

Após isso, o projeto será criado no seu computador e para iniciar ele basta utilizar o seguinte comando:

npm start

Componentes e Propriedades

# Componentes no React

Os componentes são blocos de construção fundamentais para qualquer aplicação React. Eles são a representação de partes isoladas da interface do usuário e variam em tamanho e complexidade.
A modularização de componentes no React nos permite criar e reutilizar eles de maneira eficiente.

function MeuComponente(props) {
return <div>Olá, {props.nome}!</div>;
}

# Propriedades no React

As propriedades, normalmente abreviadas como props, são um mecanismo fundamental para passar dados de um componente pai para um componente filho. Ou seja, permite que os componentes sejam preenchidas de maneiras dinamicas e sejam facilmente reutilizáveis dentro do código.

function MeuComponente(props) {
return <div>Olá, {props.nome}!</div>;
}