React: o que é, como funciona e um Guia da biblioteca JS

Se você está começando a aprender sobre desenvolvimento de software, provavelmente já ouviu falar sobre React.

Mas o que é esse framework e por que é tão popular entre pessoas desenvolvedoras?

Por que o React é popular no mundo da programação?

Se você é uma pessoa usuária de redes sociais, principalmente do ecossistema do Facebook, já deve ter percebido que determinadas partes da tela têm comportamentos especiais ou independentes do restante da aplicação. Por exemplo, os anúncios que são exibidos.

Pensando na melhor forma de lidar com esse tipo de funcionalidade, a equipe de desenvolvedores do Facebook desenvolveu uma forma muito específica de lidar com os dados exibidos e a atualização dessas pequenas porções da aplicação: o React.

Muitas empresas de tecnologia, incluindo o Instagram, a Netflix, o Airbnb e o Twitter, usam o React em suas aplicações web e móveis.

Isso significa que há uma grande variedade de oportunidades de emprego em diferentes tipos de empresas que usam React.

Além disso, o React é uma biblioteca de código aberto, o que significa que há uma comunidade ativa e vibrante de desenvolvedores e desenvolvedoras que contribuem com códigos e recursos para ajudar a melhorar a tecnologia.

Isso pode ser uma ótima maneira de se conectar com outras pessoas desenvolvedoras e aprender sobre as últimas tendências e melhores práticas no mundo do React.

Resumo do porquê React JS

Em resumo, o mercado de trabalho para desenvolvedores(as) React é muito bom, com muitas empresas de tecnologia que usam esse framework em suas aplicações.

Além disso, a comunidade de código aberto do React é bastante ativa e oferece muitas oportunidades de aprendizado e networking.

Neste artigo, você descobrirá tudo sobre o React, o que é, para que serve e como mergulhar mais fundo nesse universo do Front-End.

Do Front End ao React – Hipsters Ponto Tech #258

O que é React JS?

React é um framework JavaScript criado pelo Facebook (atual Meta) que é usado para criar interfaces de usuário (UI) em aplicativos web.

Ele é popular por ser fácil de usar, altamente flexível e escalável, e é usado por muitas empresas de tecnologia, incluindo o Facebook, Instagram e Airbnb.

O que é React JS? #HipstersPontoTube

O que é um Framework? - Entendendo melhor o React

Um framework é um conjunto de ferramentas e bibliotecas que fornecem um conjunto de recursos e funcionalidades prontas para desenvolvedores e desenvolvedoras de software.

Isso permite construir aplicativos mais rapidamente, com menos esforço e código, e com menores chances de erros.

Existem diferentes frameworks disponíveis para diferentes linguagens de programação, incluindo:

JavaScript;
Python;
Java e muitas outras.

Alguns dos frameworks mais populares incluem o React para JavaScript, o Django para Python e o Spring para Java.

React vs Angular

Nesse episódio do podcast Hipters, é possível entender a diferença entre React e Angular, de maneira simples e rápida:

Angular vs React – Hipsters #142

O React é uma linguagem de programação?

A resposta é simples: não! Não existe uma linguagem React, pois ele não pode ser considerado uma linguagem de programação como JavaScript, Java e .net, por exemplo.

Como vimos, o React é um framework, ou seja, uma estrutura ou conjunto de ferramentas que fornece uma base para auxiliar no desenvolvimento de softwares.

Principais casos de uso do React

Um dos principais casos de uso do React é criar aplicações web complexas que precisam ser atualizadas em tempo real.

Por exemplo, o Facebook usa o React para criar sua interface de usuário, que precisa ser atualizada constantemente com novas informações de amigos, mensagens, e notificações.

O React é ideal para esse tipo de aplicação porque ele permite que você atualize a interface de usuário de forma rápida e eficiente.

Outro caso de uso comum do React é criar aplicações web que precisam ser escaláveis e mantidas por equipes grandes.

O React é uma biblioteca modular, o que significa que os componentes podem ser facilmente reutilizados e compartilhados entre diferentes partes da aplicação.

Isso torna mais fácil manter e expandir uma aplicação à medida que ela cresce, e permite que equipes de desenvolvimento trabalhem de forma mais eficiente juntas.

Além disso, o React é frequentemente usado em conjunto com o React Native para criar aplicações móveis nativas para iOS e Android.

Isso permite que você crie aplicações móveis de alta qualidade que se sentem e se comportam como aplicações nativas, mas são construídas usando tecnologias web, como JavaScript e CSS.

React e React Native são a mesma coisa?

Não, o React e o React Native não são a mesma coisa, embora estejam associados. A principal diferença entre o React e o React Native é o tipo de aplicação que eles criam.

O React é usado para criar aplicações web, enquanto o React Native é usado para criar aplicações *móveis.

No entanto, ambos compartilham muitos conceitos e sintaxe, então se você é familiarizado com o React, será mais fácil aprender o React Native. Em resumo, React e React Native são ferramentas diferentes, mas *relacionadas.

Diferenças entre React e React Native | #AluraMais

React e React Native na Novatics – Hipsters On The Road #23

Como aprender React JS?

Aqui estão alguns critérios para melhorar a forma de aprender React JS:

Quais são os pré-requisitos para que eu possa ter uma boa curva de aprendizado em React?

Antes de começar a aprender React usando componentes funcionais, é importante ter algum conhecimento básico de JavaScript (JS).

React é uma biblioteca de JavaScript, então é fundamental entender como essa linguagem funciona para poder usar o React de forma eficiente. Isso inclui saber coisas como variáveis, funções, loops, e condicionais.

Além disso, é importante ter alguma familiaridade com o HTML e o CSS. React é usado principalmente para criar interfaces de usuário, então é preciso saber como estruturar e estilizar um documento HTML para poder criar componentes visuais interessantes.

Outra coisa que pode ser útil antes de começar a aprender React usando componentes funcionais é ter algum conhecimento de programação funcional.

Os componentes funcionais se baseiam em funções, então é importante entender como elas funcionam e como elas podem ser usadas para construir aplicações.

Isso inclui coisas como closures e higher-order functions.

Em resumo, antes de começar a aprender React usando componentes funcionais, é importante ter algum conhecimento básico de JavaScript, HTML e CSS, e programação funcional. Isso vai tornar o aprendizado do React mais fácil e mais eficiente.

Guia do iniciante em React – Hipsters #209

Preciso aprender JavaScript antes de aprender React?

Sim, se você quiser usar o React para criar aplicativos, é fundamental que você entenda os conceitos básicos e as sintaxes do JavaScript.

Isso porque o React é um framework JavaScript, o que significa que ele é construído em cima da linguagem JavaScript e depende dela para funcionar.

Inclusive, aqui na Alura, existe essa formação focada em JavaScript. Onde o foco é a criação de páginas web de maneira que você tenha a base necessária para estudar os frameworks mais famosos do mercado, incluindo o React.

Além disso, o React é baseado em alguns conceitos avançados do JavaScript, como a manipulação de eventos, a criação de funções de callback e a manipulação do DOM (Document Object Model).

Se você não entender esses conceitos, pode ser difícil acompanhar o código do React e usá-lo de forma eficiente.

Portanto, se você tem interesse em aprender React, é importante primeiro aprender e compreender os conceitos básicos do JavaScript. Isso lhe dará as bases para usar o React de forma inteligente e criar aplicativos incríveis.

Como desenvolver boas práticas de programação? com Fabio Akita | #HipstersPontoTube

Por que utilizar React?

Aqui estão algumas razões pelas quais aprender React pode ser valioso para sua carreira como desenvolvedor ou desenvolvedora.

É popular e amplamente utilizado

O React.JS é um dos frameworks JavaScript mais populares e amplamente utilizados em todo o mundo. Ele é usado por muitas empresas de tecnologia, incluindo o Facebook, Instagram e Airbnb, e é adotado por desenvolvedores e desenvolvedoras em todos os tipos de projetos. Isso significa que o React é uma opção confiável e bem suportada para o seu projeto.

Oferece muitos recursos e ferramentas úteis

O React.JS oferece muitos recursos e ferramentas úteis que tornam o desenvolvimento de aplicativos web mais fácil e eficiente. Isso inclui bibliotecas de componentes prontos para uso.

React e prevenção de fraudes na Escale – Hipsters On The Road #50

Dev em T: programação, carreira e tipos de perfil | #HipstersPontoTube

Como funciona o React?

Já sabemos que o React usa a linguagem JavaScript para criar componentes, que são pequenos pedaços de código que representam uma parte específica da interface do usuário (UI) de um aplicativo.

Cada componente tem um estado, que é uma variável que armazena as informações que mudam dentro do componente, como os dados de um formulário ou a cor de um botão.

Quando o usuário interage com o aplicativo, realizando ações como clicar em um botão ou preencher um formulário, o estado dos componentes é atualizado e reflete as mudanças na UI. Isso é feito com o uso de funções de callback, que são funções chamadas quando uma ação é executada pelo usuário ou usuária.

O React também usa o que é chamado de Virtual DOM (Document Object Model Virtual), uma representação em memória da UI do aplicativo.

Quando o estado dos componentes muda, o Virtual DOM é atualizado e comparado com o DOM real para determinar quais mudanças precisam ser feitas na UI.

Isso é muito mais rápido do que atualizar o DOM diretamente, o que torna o React.JS muito rápido e eficiente.

Quais as melhores práticas com React? | #HipstersPontoTube

DOM e Virtual DOM

O DOM, ou Document Object Model, é uma representação em árvore de um documento HTML ou XML. Ele é usado pelo navegador para entender o conteúdo de uma página web e permitir que o usuário interaja com ela.

Por exemplo, quando você clica em um botão em uma página web, o navegador usa o DOM para entender o que deve acontecer. Ele procura o elemento HTML correspondente ao botão no DOM, e depois executa a ação especificada pelo desenvolvedor.

O problema é que o DOM pode ser lento para atualizar e manipular. Ele é uma representação direta da página web, então qualquer alteração nos dados da página requer uma atualização completa do DOM.

Isso pode ser muito lento para aplicações web mais complexas, que podem ter milhares ou até milhões de elementos HTML.

Para resolver esse problema, o React introduziu o Virtual DOM, que é uma representação em memória do DOM, atualizada muito mais rapidamente do que o DOM real.

Quando um componente do React é atualizado, o Virtual DOM é atualizado primeiro, e depois, as alterações são sincronizadas com o DOM real. Isso torna a atualização da interface de usuário muito mais rápida e eficiente.

Em resumo, o DOM é a representação de um documento HTML ou XML no navegador, enquanto o Virtual DOM é uma representação em memória do DOM, que é usada pelo React para atualizar a interface de usuário de forma mais rápida e eficiente.

Preparando o ambiente para usar React JS

Aqui estão os passos básicos que você deve seguir para preparar o ambiente antes de começar a trabalhar com React.

01) Instale o Node.JS

O React.JS é construído em cima do Node.JS, um ambiente de tempo de execução JavaScript que permite a execução de código JavaScript fora do navegador.

O que é Node JS? #HipstersPontoTube

Portanto, antes de começar a trabalhar com React, é necessário instalar o Node.JS em sua máquina. Isso pode ser feito facilmente através do site do Node.JS:

Site oficial do Node.JS

Siga o passo a passo de instalação para Windowns, Linux e MacOs da Alura:

Como instalar o Node.js no Windows, Linux e macOS

02) Instale o npm (gerenciador de pacotes do Node.JS)

Junto com o Node.JS, você também receberá o npm, que é o gerenciador de pacotes do Node.JS.

O npm é usado para gerenciar as dependências e bibliotecas externas que o seu projeto React pode precisar. Portanto, certifique-se de que o npm está instalado e funcionando corretamente em sua máquina.

03) Crie um novo projeto React com o comando create-react-app

Depois de instalar o Node.JS e o npm, você pode usar o comando create-react-app do npm para criar facilmente um novo projeto React. Isso criará uma estrutura de arquivos básica para o seu projeto, incluindo os arquivos de configuração e as dependências necessárias.

Para usar o comando create-react-app, basta abrir o terminal e digitar o seguinte: npm create-react-app nome-do-seu-projeto

04) Inicie o projeto React com o comando npm start

Depois de criar o projeto React, você pode iniciá-lo com o comando npm start. Isso iniciará o servidor de desenvolvimento do React, que permitirá que você visualize o projeto em seu navegador.

Para iniciar o projeto, basta navegar até a pasta onde ele está localizado no terminal e digitar o seguinte: npm start

Isso é tudo o que você precisa fazer para preparar o ambiente antes de começar a trabalhar com React.JS. Agora, você já pode começar a desenvolver seus próprios aplicativos incríveis com o React.

Anatomia de um componente React

Um componente funcional é um tipo de componente no React que é definido como uma função JavaScript. Em vez de usar uma classe, como nos componentes de classe, um componente funcional é apenas uma função que recebe as propriedades como argumento e retorna o elemento React que deseja renderizar.

Isso torna os componentes funcionais mais leves e mais fáceis de entender e manter do que os componentes de classe.

Exemplo de componente funcional

Aqui está um exemplo básico de um componente funcional que exibe um cabeçalho simples:

function Titulo(props) {
  return <h1>{props.texto}</h1>;
}

Como você pode ver, um componente funcional é um tipo simples e eficiente de componente no React.JS. Ele é definido como uma função que recebe as propriedades como argumento e retorna o elemento React que deseja renderizar.

Isso torna os componentes funcionais fáceis de entender e manter, e é uma ótima opção para a maioria dos casos de uso.

O que são Props no React?

Em React, os componentes são como pequenas “peças de lego” que podem ser combinadas para criar a interface de usuário de uma aplicação. Cada componente é um pedaço de código que segue um determinado padrão, e que pode ser reutilizado várias vezes ao longo de sua aplicação.

As props, ou “propriedades”, são um tipo de dados que podem ser passados para um componente React.

Esses dados podem incluir coisas como texto, números, imagens, ou até mesmo outros componentes. Ao passar os props para um componente, você pode personalizá-lo de acordo com suas necessidades.

Exemplo de código com Props no React

Imagine que você tem um componente chamado “Post” que mostra um título, uma imagem e um texto, por exemplo. Usando props, você poderia passar diferentes títulos, imagens e textos para cada instância desse componente, sem precisar criar uma nova versão para cada postagem.

Veja como isso funcionaria no código:

// O componente Post
function Post(props) {
  return (
    <div>
      <h1>{props.titulo}</h1>
      <img loading="lazy" src={props.urlImagem} />
      <p>{props.texto}</p>
    </div>
  );
}

// Usando o componente Post
function App() {
  return (
    <div>
      <Post
        titulo="Primeiro post"
        urlImagem="https://example.com/image1.jpg"
        texto="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      />
      <Post
        titulo="Segundo post"
        urlImagem="https://example.com/image2.jpg"
        texto="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      />
    </div>
  );
}

O que é JSX?

JSX é uma extensão da linguagem JavaScript que é usada pelo React para criar interfaces de usuário. Ele permite que você misture código JavaScript com sintaxe de HTML, o que torna mais fácil escrever componentes de interface de usuário em um único arquivo de código.

Exemplo de código com JSX no React.

Por exemplo, imagine que você tem um componente de botão no React. Com JSX, você poderia escrever esse componente da seguinte maneira:

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      {props.texto}
    </button>
  );
}

Como você pode ver no exemplo acima, o código JSX é escrito dentro de chaves {} e é interpretado pelo React como código JavaScript.

Isso permite que você escreva componentes de interface de usuário de forma mais clara e concisa, sem precisar alternar entre arquivos de JavaScript e HTML.

Além disso, o JSX permite que você use expressões JavaScript dentro da sintaxe de HTML. Por exemplo, você poderia usar uma condição if para mostrar ou esconder um botão, de acordo com o estado de sua aplicação:

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      {props.estaVisivel ? props.texto : null}
    </button>
  );
}

Como você pode ver, o JSX é uma ferramenta poderosa que torna mais fácil criar componentes de interface de usuário no React. Ele permite que você escreva um código mais conciso e organizado, e é uma parte fundamental do ecossistema do React.

Ciclo de vida React

O React implementa o conceito de “ciclo de vida” para gerenciar o comportamento e a renderização de componentes. O ciclo de vida de um componente React refere-se às fases pelas quais um componente passa desde sua inicialização até sua remoção do DOM. Entenda melhor como funciona.

O que é ciclo de vida em React?

O ciclo de vida de um componente é o conjunto de etapas que um componente passa ao ser criado, montado, atualizado e desmontado em uma aplicação React.JS.

Ciclo de vida de componentes React.js | #AluraMais

Quais as etapas de um componente React?

Essas etapas incluem:

a criação do componente;
a inicialização do estado;
a montagem do componente no DOM;
a atualização do componente quando o estado ou as propriedades mudam;
e a desmontagem do componente quando ele é removido da aplicação.

Ciclo de vida de componentes funcionais e de classe

Apesar de os componentes funcionais serem mais simples do que os componentes de classe, eles ainda possuem um ciclo de vida.

Eles são criados quando são invocados pela primeira vez, montados no DOM quando são renderizados, atualizados quando o estado ou as propriedades mudam, e desmontados quando são removidos da aplicação.

No entanto, os componentes funcionais não possuem métodos de ciclo de vida, como os componentes de classe, que permitem aos desenvolvedores e desenvolvedoras controlar e gerenciar cada etapa do ciclo de vida.

Em vez disso, eles usam hooks do React, como useState e useEffect, para gerenciar o estado e executar ações em resposta às mudanças no estado ou nas propriedades.

Os principais React Hooks

React Hooks são funções que permitem que você use o estado e outros recursos do React em componentes funcionais. Eles permitem que as pessoas desenvolvedoras usem funcionalidades de classe em componentes funcionais, sem a necessidade de criar classes.

Existem vários hooks disponíveis, cada um com um propósito específico. Confira a seguir, alguns dos principais React Hooks.

useEffect

Se você está aprendendo sobre React.JS, provavelmente já ouviu falar sobre o useEffect. Mas o que exatamente é esse recurso e como ele funciona?

O useEffect é uma função do React que permite que você execute código em resposta a mudanças no estado ou nas propriedades de um componente.

Isso é útil para executar ações assíncronas, como fazer requisições HTTP ou alterar o DOM, quando o estado ou as propriedades mudam.

O useEffect é chamado depois de cada atualização do componente, ou apenas uma vez, se desejar. Além desse, existem outros hooks que resolvem problemas específicos de aplicações React, como, por exemplo:

Guia de carreira Front-end | Tech Guide

Acesse para visualizar os capítulos e comentários: Guia de carreira Front-end | #HipstersPontoTube

Leia também: React, front end e o mercado

Aprender React: a curva de aprendizado

Como qualquer tecnologia complexa, o React tem uma curva de aprendizado que pode ser desafiadora para iniciantes. Já descobrimos que uma aplicação React é um conjunto de componentes.

É preciso entender como esses componentes se relacionam e como eles podem ser combinados para criar a interface desejada.

Outra coisa que pode ser difícil de entender é a forma como o React manipula os dados. Em vez de usar variáveis e funções tradicionais, o React usa uma abordagem chamada de “estado” e “efeitos colaterais” para controlar os dados em sua aplicação.

Isso pode ser um pouco difícil de entender no começo, mas é fundamental para o funcionamento do React.

Além disso, o React tem uma sintaxe específica que pode levar um tempo para se acostumar. Ele usa uma combinação de JavaScript e HTML para criar os componentes, o que pode ser confuso para quem não tem familiaridade com essa abordagem.

Em resumo, a curva de aprendizado do React pode ser um desafio para iniciantes, mas com tempo e prática, é possível dominar essa tecnologia e criar aplicações incríveis com ela.

É importante ter paciência e continuar aprendendo e experimentando para se tornar um(a) desenvolvedor(a) React experiente.

Será que eu faço uma faculdade de tecnologia? Com Mikaeri Ohana | #HipstersPontoTube

Os melhores livros de tecnologia para ler e se aprofundar

Existem muitos livros excelentes sobre tecnologia que podem te ajudar a aprofundar seus conhecimentos em diversas áreas.

Confira um vídeo com algumas indicações de títulos recomendados em diferentes campos da tecnologia.

Aprenda mais sobre React gratuitamente

Acesse gratuitamente as primeiras aulas da Formação React com JavaScript, feita pela Escola de Front-End da Alura e continue aprendendo sobre temas como:

Ou acesse, caso você já tenha mais conhecimentos em React, as primeiras aulas da Formação React com Typescript:

Apostilas — Você profissional em T

Com as Apostilas de tecnologia sobre Front-End, Programação, UX & Design e Ciências de Dados da Alura, avance nos estudos e no desenvolvimento da sua carreira em T.

Você poderá se aprofundar nos seguintes tópicos:

Desenvolvimento Web com HTML, CSS e JavaScript;
UX e Usabilidade aplicados em Mobile e Web;
Java para Desenvolvimento Web;
Java e Orientação a Objetos;
Python e Orientação a Objetos;
C# e Orientação a Objetos;
SQL e modelagem com banco de dados.

Baixe elas completas em: Apostilas da Alura — Conteúdo livre para o seu aprendizado

Portfólio e Carreira em Tecnologia

Desenvolver um portfólio sólido e saber gerenciar sua carreira é fundamental para ter sucesso na área de tecnologia. Listamos abaixo, alguns conteúdos com dicas para te ajudar a construir e promover sua carreira no mercado de TI.

Como fazer um bom portfólio?

Como fazer um bom portfólio em tecnologia com Diogo Pires | #HipstersPontoTube

5 projetos para sua Carreira em Tech

5 projetos pra quem está na carreira tech com Mario Souto | HipstersPontoTube

Conclusão

Neste artigo, pudemos ter visão geral do React e de todas as suas particularidades. Aprender essa ferramenta é uma ótima opção para começar a desenvolver aplicações para web.

É importante que você já tenha os conhecimentos de lógica de programação e manipulação do DOM para facilitar o entendimento.

01) Compartilhando o que você aprendeu

Vamos lançar um desafio! Se você gostou desse artigo, compartilhe nas redes sociais o que você aprendeu com ele com a hashtag #AprendinoBlogdaAlura.

02) Cursos de React da Alura

Se você quiser conhecer mais sobre React, pode acessar todo o conteúdo de React da Alura, em que você poderá entender os fundamentos e primeiros passos do framework, desenvolver um portfólio de projetos e, claro, aprender técnicas e habilidades intermediárias e avançadas com essa tecnologia.

Primeiro, recomendamos a formação React com JavaScript, que vai te dar a bagagem inicial necessária para construir aplicações e componentes React;
Depois, você pode fazer a formação React com TypeScript, onde você vai mergulhar mais fundo no universo do React, mas dessa vez, utilizando todo o poder do TypeScript.

E, além disso, você pode acompanhar as formações mais avançadas em tópicos específicos:

React: o que é, como funciona e um guia dessa popular ferramenta JS