Bem-vindo ao mundo do desenvolvimento web moderno! Antes de escrevermos nossa primeira linha de código em React, precisamos preparar o nosso “canteiro de obras”. Neste tutorial, vamos entender as ferramentas fundamentais que todo desenvolvedor front-end utiliza hoje e deixar o seu ambiente pronto para o primeiro projeto.
1. O que é o Node.js e o NPM?
Para quem está começando, o JavaScript parece funcionar apenas dentro do navegador (Chrome, Edge, Firefox), dando vida e interatividade às páginas web. Mas e se pudéssemos rodar o JavaScript direto no nosso computador, como um programa comum? É aí que entra o Node.js.
Node.js: O Motor
O Node.js é um ambiente de execução que permite rodar JavaScript no computador (fora do navegador). No desenvolvimento React, nós não usamos o Node para criar o site em si, mas sim para rodar as ferramentas de desenvolvimento que compilam, otimizam e testam o nosso código.
NPM: A Central de Peças
Quando você instala o Node.js, ele vem acompanhado do NPM (Node Package Manager). Pense no NPM como uma gigantesca App Store para desenvolvedores.
- Se você precisa de um pacote para lidar com datas, um sistema de ícones ou o próprio React, você não precisa reescrever isso do zero.
- Você simplesmente usa o NPM para baixar esse “bloco de código” pronto para o seu projeto.
2. Passo a Passo: Instalação do Node.js
Para começarmos, precisamos instalar o Node.js na sua máquina.
- Acesse o site oficial: nodejs.org
- Você verá duas opções de download. Escolha sempre a versão LTS (Long Term Support), pois ela é a mais estável e segura para o desenvolvimento.
- Baixe o instalador e siga o processo padrão de instalação (“Avançar/Next” até o final).
- Para testar se deu certo: Abra o terminal do seu computador (Prompt de Comando no Windows ou Terminal no Mac/Linux) e digite os comandos abaixo:Bash
node -v npm -vSe aparecerem os números das versões instaladas (ex:v20.x.x), parabéns! O seu ambiente básico está configurado.
3. O que é o Vite e por que ele substituiu o Create React App?
Antigamente, para criar um projeto React, a própria equipe do React recomendava uma ferramenta chamada Create React App (CRA). O CRA resolvia o problema de configuração inicial, mas conforme o projeto crescia, ele se tornava extremamente pesado e lento para iniciar e atualizar as mudanças no navegador.
Por que o Vite mudou o jogo?
O Vite (uma palavra em francês que significa “rápido”, pronuncia-se “viti”) é uma ferramenta de nova geração para construção de projetos web.
- Velocidade absurda: Ele utiliza recursos modernos dos navegadores atuais (chamados ES Modules) para carregar o código instantaneamente, não importa o tamanho do projeto.
- Leveza: Ele cria um projeto limpo, sem arquivos desnecessários que o CRA costumava colocar.
- Hoje, o Vite é o padrão de mercado recomendado para criar aplicações React tradicionais (Single Page Applications).
Como criar um projeto React com Vite
Abra o seu terminal, navegue até a pasta onde deseja salvar seus projetos (ex: cd Documents) e digite o seguinte comando:
Bash
npm create vite@latest meu-primeiro-app -- --template react
O terminal fará algumas perguntas rápidas:
- Ele confirmará se deseja instalar o pacote do Vite (digite
ye dê Enter). - Em seguida, selecione a linguagem. Escolha JavaScript para este início.
Depois que o comando terminar, o Vite criará uma pasta chamada meu-primeiro-app. Entre nela e instale as dependências com os comandos:
Bash
cd meu-primeiro-app
npm install
npm run dev
O comando npm run dev vai iniciar um servidor local. O terminal mostrará um endereço como http://localhost:5173/. Abra esse link no seu navegador e você verá a tela inicial do React com Vite rodando!
4. Entendendo a Estrutura de Pastas
Ao abrir a pasta do projeto no VS Code, você se deparará com alguns arquivos e pastas. Vamos entender para que serve cada um:
Plaintext
meu-primeiro-app/
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
├── package.json
└── vite.config.js
📁 node_modules/
É aqui que o NPM guarda todos os códigos e bibliotecas que o seu projeto precisa para funcionar (incluindo o código do próprio React e do Vite). A regra de ouro é: nunca mexa nesta pasta manualmente. Ela é gerada e controlada automaticamente pelo Node.
📁 public/
Guarda arquivos estáticos que o navegador pode acessar diretamente pelo link, sem passar pelo processo de compilação do React. É o lugar ideal para colocar ícones do site (favicon.ico), imagens de fundo muito específicas ou arquivos de texto de configuração.
📁 src/ (Source / Código-Fonte)
Aqui é onde você passará 99% do seu tempo. É a pasta que contém o código do seu aplicativo.
main.jsx: É a porta de entrada do JavaScript. Ele pega o React e o “injeta” dentro da página HTML principal. Normalmente, mexemos muito pouco aqui.App.jsx: É o componente principal da sua aplicação. Tudo o que você construir ou colar de outros componentes começará a partir daqui. Pense dele como a “raiz” da sua árvore de código.index.csseApp.css: Arquivos de estilização visual globais e específicos do componente principal.
📄 package.json
Este é o “documento de identidade” do seu projeto. Ele lista o nome do projeto, a versão, os comandos úteis (como o npm run dev) e, o mais importante: a lista de todas as dependências (bibliotecas) que o seu projeto usa. Se você enviar seu projeto para outro computador sem a pasta node_modules, basta rodar npm install que o Node lê este arquivo e baixa tudo novamente.
📄 index.html
A única página HTML real do seu aplicativo. Diferente de projetos antigos onde criávamos várias páginas HTML, no React temos apenas este arquivo com uma <div> vazia (geralmente com o id="root"). O React se encarrega de preencher e mudar o conteúdo dessa <div> dinamicamente.