O que é o React?

Grandes empresas que usam React

Por que o React é tão popular?

• Componentes reutilizáveis: No React, as interfaces podem ser divididas em pequenos componentes independentes que são reutilizáveis em diferentes partes da aplicação. Isso torna o desenvolvimento mais eficiente, pois componentes reutilizados reduzem a duplicação de código e facilitam a manutenção, permitindo que o projeto cresça de maneira escalável e organizada.

• Virtual DOM: O React utiliza uma abordagem inovadora chamada Virtual DOM, que melhora o desempenho das aplicações. Em vez de atualizar o DOM diretamente após cada mudança, o React cria uma versão virtual do DOM e compara as mudanças antes de aplicar apenas as diferenças ao DOM real. Isso minimiza as operações pesadas no navegador, resultando em interfaces mais rápidas e responsivas, principalmente em aplicações grandes e complexas.

• Comunidade ativa e ecossistema rico: Uma das grandes forças do React é sua enorme comunidade de desenvolvedores. Isso significa acesso a uma vasta quantidade de bibliotecas, ferramentas e suporte, além de uma documentação robusta e atualizada. Se você encontrar um problema ou precisar de uma solução específica, há grandes chances de que já exista uma biblioteca ou uma solução disponível na comunidade.

• Flexibilidade e integração: Diferente de frameworks que oferecem uma solução completa, o React foca apenas na camada de visualização, o que permite que ele seja integrado facilmente com outras ferramentas e bibliotecas. Isso dá aos desenvolvedores a liberdade de escolher as soluções mais adequadas para cada projeto, como gerenciamento de estado, roteamento e manipulação de dados.

• Alta demanda no mercado de trabalho: O mercado de React está sempre aquecido, com uma demanda crescente por desenvolvedores que dominam a tecnologia. Grandes empresas utilizam o React em suas aplicações, o que eleva ainda mais sua relevância no mercado. Isso faz com que aprender React seja uma escolha estratégica para quem quer se destacar na carreira de desenvolvimento.

• Eficiência e desempenho com SPA: Outro grande diferencial do React é sua eficiência no desenvolvimento de Single Page Applications (SPA). Em uma SPA, o React carrega uma única página HTML e, à medida que o usuário interage com a aplicação, ele atualiza dinamicamente apenas as partes da interface que sofreram mudanças, sem precisar recarregar a página inteira. Essa abordagem, combinada com o Virtual DOM, garante um desempenho elevado, oferecendo ao usuário uma experiência fluida e rápida. Ao reduzir a carga no servidor e otimizar o número de renderizações incrementais, o React se torna a escolha ideal para aplicações interativas em tempo real, como dashboards, redes sociais e plataformas de e-commerce. Além disso, essa eficiência ajuda a melhorar a performance de sistemas que precisam lidar com grandes volumes de dados ou interações frequentes.

Por onde começar?

• HTML: Entender a estrutura de uma página web é essencial para criar interfaces no React.

• CSS: Para aplicar estilos nas suas interfaces.

• JavaScript: Conhecimento sólido em JavaScript é fundamental, já que o React é baseado nessa linguagem. É importante saber como funciona o DOM e entender conceitos como funções, objetos, arrays e ES6+ (let, const, arrow functions).

JavaScript é a base do React, então ter um bom entendimento dessa linguagem é essencial. Se você ainda precisa fortalecer seus conhecimentos em JavaScript, confira o vídeo sobre o que é necessário dominar antes de começar com React.

Como funciona o React?

JSX: O que é?

function Saudacao() {
  return <h1>Olá, Mundo!</h1>;
}

Componentes

import './styled.css';

export function Button({ text, onClick }) {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
}

<Button text="Botão 1" onClick={() => handleClick('Botão 1')} />

Props

<Button text="Botão 1" onClick={() => handleClick('Botão 1')} />
<Button text="Botão 2" onClick={() => handleClick('Botão 2')} />

Definindo props

<Button text="Enviar" onClick={() => handleClick('Enviar')} />

Imutabilidade das props

function Button({ text }) {
  // Não podemos alterar diretamente 'text' aqui
  return <button>{text}</button>;

Desestruturação de props

export function Button({ text, onClick }) {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
}

Se você quer entender ainda mais sobre o conceito de componentes e propriedades no React, confira este vídeo incrível:

Hooks

Por que usar hooks?

useState

const [clicks, setClicks] = useState(0);
const [message, setMessage] = useState('');

const handleClick = (buttonText) => {
  setClicks(clicks + 1);
  setMessage(`Você clicou no botão: "${buttonText}"`);
};

useEffect

import { useState, useEffect } from 'react';
import './app.css';

function App() {
  const [segundos, setSegundos] = useState(0);

  useEffect(() => {
    const intervalo = setInterval(() => {
      setSegundos(prevSegundos => prevSegundos + 1);
    }, 1000);

    // Limpa o intervalo quando o componente é desmontado
    return () => clearInterval(intervalo);
  }, []); // Executa apenas uma vez, quando o componente é montado

  return (
    <div className="app-container">
      <h1>Cronômetro Simples com useEffect</h1>
      <p>Segundos: {segundos}</p>
      <button className="button" onClick={() => setSegundos(0)}>Reiniciar Cronômetro</button>
    </div>
  );
}

export default App;

Outros hooks poderosos

• useContext: Permite compartilhar dados (como temas ou configurações de usuário) entre componentes sem precisar passar props manualmente.

• useReducer: Útil para gerenciar estados mais complexos ou múltiplos estados que dependem de uma lógica específica.

Novidades com o React 19

Quer ficar por dentro das novidades e saber como esses novos hooks podem transformar suas aplicações? Confira nosso artigo React 19: utilizando o novo hook e descubra como o React continua evoluindo para facilitar ainda mais o desenvolvimento!

Certificações e mercado de trabalho

A relevância da certificação Rocketseat para recrutadores

Construindo seu portfólio

Como a Rocketseat pode ajudar

Comunidade

Conclusão