Como Começar com React: Guia Passo a Passo para Iniciantes

React é uma biblioteca JavaScript criada pelo Facebook para construir interfaces de usuário com componentes reutilizáveis. Para criar seu primeiro aplicativo, basta ter o Node.js instalado e executar um comando no terminal — este guia mostra cada passo, do ambiente ao build.

• O que é React?
• Pré-requisitos para aprender React
• Como criar seu primeiro aplicativo React?
• Create React App ainda vale a pena em 2026?
• npx, npm ou Yarn: qual usar para criar o projeto?
• Templates do Create React App
• Estrutura de arquivos do projeto React

O que é React?

React é uma biblioteca de código aberto para construir interfaces de usuário na web, mantida pela Meta (antigo Facebook) e usada em produção desde 2013. Em vez de manipular o DOM (Document Object Model) manualmente, o desenvolvedor descreve a interface em componentes declarativos, e o React atualiza a tela de forma eficiente por meio do Virtual DOM — uma representação em memória que minimiza operações custosas no navegador.

O React domina o desenvolvimento front-end: segundo a Stack Overflow Developer Survey 2025, 44,7% dos desenvolvedores trabalharam com React no último ano, o maior índice entre bibliotecas e frameworks de interface — na categoria de tecnologias web, apenas o Node.js aparece à frente, com 48,7%.

Os componentes React são escritos em JSX (JavaScript XML), uma sintaxe que combina marcação semelhante a HTML com lógica JavaScript no mesmo arquivo. Essa abordagem baseada em componentes simplifica a reutilização de código: um botão, um formulário ou um cartão de produto é definido uma vez e usado em qualquer parte da aplicação. É essa combinação de produtividade, desempenho e ecossistema maduro que faz do React o ponto de partida mais comum para quem entra no desenvolvimento web moderno.

Pré-requisitos para aprender React

Aprender React exige três bases: HTML, CSS e JavaScript. Como o JSX mistura marcação e lógica, conhecimento sólido de HTML semântico e de JavaScript é essencial para escrever componentes e diagnosticar problemas — aqui no CodeCrush você encontra uma seleção de sites para praticar JavaScript antes de dar esse passo.

Além disso, você precisa de:

1. Node.js 14 ou superior instalado na máquina de desenvolvimento (não é necessário no servidor de produção). O Node.js fornece o ambiente que executa as ferramentas de build.
2. Familiaridade básica com o terminal: navegar entre pastas e executar comandos é suficiente para este guia.
3. Um editor de código, como o VS Code, com suporte a JavaScript.

Para alternar entre versões do Node em projetos diferentes, use o nvm (macOS/Linux) ou o nvm-windows (Windows). Essa flexibilidade evita conflitos quando um projeto antigo exige uma versão específica do Node.js.

Como criar seu primeiro aplicativo React?

Siga estes passos para ter um aplicativo React rodando localmente em poucos minutos:

1. Instale o Node.js 14 ou superior e confirme a instalação com node -v no terminal.
2. Execute o comando de criação: npx create-react-app my-app gera o projeto completo na pasta my-app.
3. Entre no diretório do projeto com cd my-app.
4. Inicie o servidor de desenvolvimento com npm start.
5. Abra http://localhost:3000 no navegador para ver o aplicativo em execução, com recarga automática a cada alteração.
6. Gere o pacote de produção com npm run build quando estiver pronto para publicar: o resultado é minificado e otimizado.

Em resumo:

npx create-react-app my-app
cd my-app
npm start

Você não precisa instalar ou configurar ferramentas como webpack ou Babel: elas vêm pré-configuradas e ocultas, para que o foco fique no código. Se em algum momento você instalou o create-react-app globalmente via npm install -g create-react-app, desinstale-o com npm uninstall -g create-react-app — isso garante que o npx sempre baixe a versão mais recente do pacote.

Create React App ainda vale a pena em 2026?

O Create React App (CRA) não é mais recomendado para projetos novos. Em anúncio oficial de 14 de fevereiro de 2025, a equipe do React declarou: "Today, we're deprecating Create React App for new apps" — "hoje, estamos descontinuando o Create React App para novos aplicativos", em tradução livre. A recomendação oficial passou a ser um framework completo ou uma ferramenta de build moderna como o Vite.

Por que aprender os comandos do CRA, então? Porque milhares de projetos em manutenção ainda o utilizam, a maior parte dos tutoriais clássicos o referencia, e os conceitos — estrutura de pastas, scripts, servidor de desenvolvimento — são os mesmos nas ferramentas modernas. O motivo da descontinuação é prático: o CRA não oferece soluções nativas para roteamento, busca de dados e divisão de código, necessidades comuns de aplicações reais em produção. Aprenda o fluxo com este guia e, ao iniciar um projeto profissional novo, aplique exatamente os mesmos conceitos com Vite ou Next.js.

npx, npm ou Yarn: qual usar para criar o projeto?

Os três comandos produzem o mesmo resultado; a escolha depende do gerenciador de pacotes que você já usa no dia a dia. O executor npx baixa e roda o pacote sem instalação global, enquanto npm e Yarn são gerenciadores completos — as diferenças entre eles estão detalhadas no nosso guia de gerenciadores de pacotes npm, Yarn e pnpm. A CLI (Command Line Interface) do Create React App instala as dependências com npm ou Yarn conforme a ferramenta usada na criação.

npx

npx create-react-app my-app

O npx está disponível a partir do npm 5.2.

npm

npm init react-app my-app

O npm init <initializer> está disponível a partir do npm 6.

Yarn

yarn create react-app my-app

O yarn create está disponível a partir do Yarn 0.25.

Templates do Create React App

Templates permitem iniciar um aplicativo a partir de um modelo pronto, adicionando --template [nome-do-modelo] ao comando de criação:

npx create-react-app my-app --template [nome-do-modelo]

Sem um template explícito, o projeto é criado com o modelo base em JavaScript. Os pacotes de template seguem o formato cra-template-[nome-do-modelo], mas apenas o [nome-do-modelo] é informado no comando. A documentação de templates personalizados do Create React App descreve como construir e publicar o seu próprio modelo.

Como criar um aplicativo React com TypeScript?

Para iniciar um projeto com TypeScript, adicione --template typescript ao comando de criação:

npx create-react-app my-app --template typescript

O template TypeScript gera os arquivos com extensão .tsx e a configuração de tipos pronta, sem nenhum ajuste manual.

Estrutura de arquivos do projeto React

O comando de criação gera um diretório my-app com a estrutura inicial do projeto e todas as dependências instaladas:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

A pasta public guarda os arquivos estáticos servidos diretamente (como o index.html), e a pasta src concentra o código da aplicação — é nela que você passa a maior parte do tempo, começando pelo componente App.js. Sem configuração extra nem estruturas de pastas complicadas: apenas os arquivos necessários para construir o aplicativo.

Quais scripts vêm configurados?

O projeto recém-criado inclui comandos integrados no package.json:

npm start   # ou yarn start

O npm start executa o aplicativo em modo de desenvolvimento em http://localhost:3000, com recarga automática a cada alteração salva. O npm run build, citado nos passos anteriores, gera a versão minificada para produção na pasta build.

Conclusão

Criar o primeiro aplicativo React é a parte fácil — um comando no terminal resolve. O que separa iniciantes de profissionais é o que vem depois: entender componentes, props e estado, e saber escolher a ferramenta certa para cada contexto. Em 2026, isso significa usar este fluxo para aprender os fundamentos, mas iniciar projetos novos com Vite ou Next.js, como orienta a própria equipe do React. Pratique recriando interfaces que você usa todos os dias: a fluência em React vem da repetição, não da leitura.