Sejam bem-vindos ao espaço de trabalho com React no GitHub Codespaces! Tudo já está configurado para você explorar o React e aprender com facilidade.
Para esta aula, o objetivo é aprender React construindo o famoso Jogo da Velha. Siga o tutorial oficial do React:
Tutorial: Construindo o Jogo da Velha
O tutorial aborda:
- Componentes: Estruturação e reutilização de código.
- Estado e Props: Gerenciamento de dados e fluxo de informações entre componentes.
- Eventos: Captura e manipulação de interações do usuário.
- Imutabilidade: Por que manter os dados imutáveis é importante.
- Aprofundamento no React: Construção incremental de funcionalidades.
Hoje vamos criar um cantinho de desenvolvimento só nosso, fácil de fazer e online pra gente não gastar recurso de máquina. Vamos usar o CodeSpace do GitHub. Com ele vamos construir um pequeno jogo da velha. Não é necessário qualquer conhecimento prévio em React. As técnicas que você aprenderá no tutorial são fundamentais à construção de qualquer aplicativo React, e o entendimento destas lhe dará conhecimentos aprofundados sobre o React.
Para iniciar a atividade clique em Code -> Codepaces e inicie um CodeSpace a partir do seu repositório. Veja se está mesmo no seu repositório ou no repositório template da aula. Se você não está no seu próprio repositório, clique no link da atividade (assignment) no Github Classrom, que fará automaticamente um fork do repositório.
Em cada parte do tutorial, você precisará fazer um commit.
Aqui, nada! Só finalizar. No GitHub Classroom você deve commitar suas alterações e enviar para o repositório online usando:
git status
git add .
git status
git commit -m "nome do commit" -- use uma mensagem de commit amigável, legível e compreensível. 🙏
git push origin main
No diretório do projeto, você pode executar os seguintes comandos:
Já iniciamos esse comando para você no terminal Codespaces: server. Se precisar parar o servidor por algum motivo, execute npm start novamente para trazê-lo de volta.
Este comando roda o aplicativo no modo de desenvolvimento.
Abra http://localhost:3000/ no navegador embutido ("Cmd/Ctrl + Shift + P > Simple Browser: Show") para visualizar o aplicativo em execução.
A página recarrega automaticamente quando você faz alterações.
Você também verá erros de lint no console, se houver.
Inicia o executor de testes no modo interativo.
Consulte a seção sobre execução de testes para mais informações.
Compila o aplicativo para produção na pasta build.
Ele otimiza o React para o melhor desempenho.
Os arquivos são minificados e os nomes incluem hashes.
Seu aplicativo está pronto para ser implantado!
Consulte a seção sobre implantação para mais informações.
Explore, aprenda e divirta-se desenvolvendo com React!
Este projeto foi criado usando o Vite.