React para Iniciantes: Guia Prático para Criar Seu Primeiro Projeto em 15 Minutos

Se você está começando na área de desenvolvimento front-end e quer aprender uma das bibliotecas JavaScript mais utilizadas no mundo, você está no lugar certo. Com este guia rápido e direto, você vai criar seu primeiro projeto em React em menos de 15 minutos — mesmo que nunca tenha usado a biblioteca antes.

Vamos do zero até a criação de um componente funcional, com um ambiente moderno e simples de usar.

Por que aprender React em 2025 é uma ótima escolha?

O React continua sendo a escolha preferida de empresas e desenvolvedores para a construção de interfaces modernas. Ele é mantido pelo Facebook (Meta), tem uma comunidade gigantesca, bibliotecas complementares e um ecossistema rico com ferramentas como Next.js, Redux, React Query e muito mais.

Além disso:

É usado por empresas como Netflix, Uber, Airbnb e Instagram.
Há uma enorme demanda por profissionais com conhecimento em React no mercado.
Ele se adapta a projetos pequenos, médios e grandes.

Aprender React pode ser o diferencial que você precisa para começar (ou impulsionar) sua carreira em front-end.

Instalando tudo que você precisa

Antes de começar, certifique-se de ter o básico instalado no seu computador:

🔧 Node.js e npm

Você pode baixar o Node.js diretamente pelo site oficial: https://nodejs.org

O npm (Node Package Manager) já vem junto com o Node.

⚡ Criando um projeto com Vite (mais rápido que CRA)

Vite é uma ferramenta leve e super rápida para iniciar projetos front-end modernos. Esqueça o create-react-app — o Vite é mais rápido, simples e atualizado.

Execute os comandos no terminal:

npm create vite@latest meu-primeiro-react

Escolha a opção React

Depois:

cd meu-primeiro-react
npm install
npm run dev

Pronto! Seu projeto já está rodando em http://localhost:5173

Estrutura inicial do projeto

Dentro da pasta do projeto, você verá algo como:

src/
├── App.jsx
├── main.jsx
├── assets/
├── index.css

Entendendo o JSX

JSX é uma sintaxe que permite escrever HTML dentro do JavaScript. Ele é o coração do React.

Exemplo simples de JSX:

function BemVindo() {
  return <h1>Bem-vindo ao meu primeiro projeto em React!</h1>;
}

Criando seu primeiro componente React

Agora vamos colocar a mão na massa!

🔘 Componente de botão com clique

Edite o arquivo App.jsx e coloque o seguinte código:

import { useState } from 'react';

function App() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <h1>Contador: {contador}</h1>
      <button onClick={() => setContador(contador + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

export default App;

🧠 State com

useState

O useState é um Hook do React que permite criar e atualizar estados nos componentes. Ele é essencial para interatividade.

Rodando seu projeto no navegador

Se você já executou npm run dev, acesse o endereço que o terminal mostra (geralmente http://localhost:5173).

Você verá seu contador funcionando! A cada clique, o número será atualizado.

Próximos passos para evoluir no React

Agora que você entendeu o básico e criou seu primeiro componente funcional, o próximo passo é aprofundar seus conhecimentos com:

⚙️ Hooks adicionais (useEffect, useContext, useReducer)
📦 React Router para navegação entre páginas
🔄 Consumo de APIs com fetch ou axios
💅 Estilização com Tailwind CSS, Styled Components ou CSS Modules
📁 Organização de pastas e componentes reutilizáveis

Conclusão

Criar seu primeiro projeto React não precisa ser complicado. Com as ferramentas certas, como o Vite, e conceitos bem explicados, você consegue ver resultado em poucos minutos.

E o melhor: agora você tem uma base sólida para seguir evoluindo e criando interfaces interativas de verdade.