Configuração do ambiente de desenvolvimento
Para começar a desenvolver com React.js, precisamos configurar nosso ambiente de desenvolvimento. Vamos seguir alguns passos simples para instalar as ferramentas necessárias.
Passo 1: Instale o Node.js e npm
Node.js é um ambiente de execução JavaScript, e npm (Node Package Manager) é o gerenciador de pacotes. Primeiro, acesse o site oficial do Node.js nodejs.org. Baixe e instale a versão LTS (Long Term Support).
Para verificar a instalação, abra o terminal e digite:
node -v
npm -v
Isso deve exibir as versões do Node.js e npm instaladas.
Passo 2: Instale o Create React App
Create React App é uma ferramenta oficial da equipe do React que configura um novo projeto React com todas as dependências necessárias.
No terminal, execute o comando:
npx create-react-app my-app
Substitua “my-app” pelo nome do seu projeto.
Passo 3: Navegue até o Diretório do Projeto
Após a criação do projeto, navegue até o diretório do projeto recém-criado:
cd my-app
Passo 4: Inicie o Servidor de Desenvolvimento
Para iniciar o servidor de desenvolvimento e ver seu aplicativo React no navegador, use o comando:
npm start
Isso abrirá uma nova janela no navegador em http://localhost:3000
onde você verá a aplicação React em execução.
Passo 5: Configuração do Editor de Código
Escolha um editor de código de sua preferência. O Visual Studio Code (VS Code) é uma excelente escolha por ser leve e oferecer ótimos plugins.
Baixe e instale o VS Code a partir do site oficial code.visualstudio.com.
Passo 6: Instale Extensões Úteis
No VS Code, você pode instalar extensões que facilitam o desenvolvimento com React. Algumas sugestões:
- ESLint: Ajuda a encontrar e corrigir problemas no seu código.
- Prettier: Formata seu código de forma consistente.
- VS Code React Snippets: Fornece snippets de código para React.
Para instalar extensões, abra o VS Code, vá até a aba de extensões (ícone de quadrado no lado esquerdo) e procure pelo nome da extensão desejada.
Passo 7: Estrutura do Projeto
Após a configuração, seu projeto terá a seguinte estrutura básica:
my-app/
├── node_modules/
├── public/
│ ├── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
Os arquivos principais que você modificará estão na pasta src/
.
Agora, você está pronto para começar a desenvolver com React. No próximo tópico, exploraremos o conceito de componentes em React.