O que fazer?
📌 Passo 1: Configuração do Ambiente de Desenvolvimento
Instale o Node.js e npm (gerenciador de pacotes do Node.js) se ainda não estiverem instalados no seu sistema.
Crie um novo diretório para o projeto da academia.
No terminal, navegue até o diretório recém-criado e execute o comando npm init -y
para inicializar um novo projeto npm.
📌 Passo 2: Instalação de Dependências do React
Instale o React e o ReactDOM executando o comando npm install react react-dom
.
Instale o Create React App (uma ferramenta para criar rapidamente projetos React) globalmente usando npm install -g create-react-app
.
Crie um novo projeto React executando npx create-react-app academia-stackx
.
📌 Passo 3: Estrutura de Arquivos e Componentes
Navegue até o diretório do projeto (academia-stackx
) e abra-o em um editor de código.
Dentro do diretório src
, você verá os arquivos App.js
, index.js
e App.css
. Você pode modificar ou excluir esses arquivos conforme necessário.
Crie componentes React para as diferentes partes da SPA, use sua criatividade para criar sua página.
📌 Passo 4: Estilização
Use CSS (ou pré-processadores como Sass ou Less) para estilizar os componentes e criar uma aparência atraente para a SPA. Organize seus estilos em arquivos separados ou diretórios para facilitar a manutenção.
📌 Passo 5: Testando
Teste a aplicação no localhost e certifique-se de que tudo está funcionando.
📌 Passo 6: Implantação
Faça o deploy do build para um serviço de hospedagem, como GitHub e Vercel.