Lançado · em melhoria
Framework · Desde 2013
React é uma biblioteca JavaScript para criar interfaces com componentes: você descreve como a UI deve ficar e o React atualiza só o que muda.
React é uma biblioteca de interfaces de usuário criada na Meta (na época, Facebook) e lançada como código aberto em 2013. A tela é dividida em pequenos componentes de função, e cada um descreve com JSX como deve aparecer de acordo com as props que recebe e o estado que guarda. Quando os dados mudam, o React compara o novo resultado com o anterior e aplica ao DOM apenas as diferenças reais.
O React se destaca em telas muito interativas, cheias de botões, formulários e listas. Ele é usado em aplicações de página única, dashboards, painéis administrativos e design systems, e o mesmo modelo mental vale para sites renderizados no servidor com frameworks como Next.js ou para apps móveis com React Native. O amplo ecossistema de roteadores, bibliotecas de busca de dados e ferramentas de teste permite escolher e combinar as peças necessárias.
Se você está começando, siga o Quick Start e o tutorial do jogo da velha em react.dev. A documentação oficial recomenda um framework como Next.js para novos produtos, mas para aprender é mais fácil entender um projeto simples criado com Vite. Dominar antes o JavaScript moderno, como métodos de array, desestruturação e módulos, deixa JSX e hooks bem mais claros.
Divida a interface em componentes de função independentes, passe dados com props e combine peças pequenas para formar telas completas.
Em vez de alterar o DOM manualmente, você descreve em JSX o resultado para o estado atual e o React atualiza apenas o que mudou.
Hooks como useState, useEffect, useRef e useContext cuidam de estado, efeitos colaterais, referências ao DOM e dados compartilhados dentro de funções comuns.
Com Next.js, React Router, TanStack Query, React Native e outras ferramentas consolidadas, você trabalha do mesmo jeito da web ao celular.
As ferramentas do React rodam sobre o Node.js. Instale a versão LTS em nodejs.org e confira se node e npm mostram suas versões.
node --version && npm --versionUse o template react-ts do Vite para criar um projeto React com TypeScript. Para JavaScript puro, use o template react.
npm create vite@latest my-app -- --template react-tsEntre na pasta do projeto, instale as dependências e inicie o servidor de desenvolvimento. Abra no navegador o endereço exibido no terminal (por padrão, http://localhost:5173).
cd my-app && npm install && npm run devA função App em src/App.tsx é um componente que retorna o JSX a ser exibido. Ela cria um estado count com o hook useState, e o clique no botão altera esse valor por meio de setCount. Quando o estado muda, o React chama App de novo e atualiza só o número na tela. Com o servidor de desenvolvimento ligado, o navegador se atualiza na hora sempre que você salva um arquivo.
src/App.tsx
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<main>
<h1>Hello, React!</h1>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</main>
);
}
npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run devSeis capítulos que levam você da instalação aos conceitos essenciais de React.
Tire dúvidas, compartilhe experiências e troque opiniões sobre React.
Ainda não há discussões. Comece a primeira.
0 comentários
Fazer login · Faça login para deixar um comentário.
Seja o primeiro a comentar.