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.