React Practice Tic-Tac-Toe

Tic tac toe - React App


English

This project is a Tic-Tac-Toe game implemented in React as part of my learning journey following the "React - The Complete Guide 2024 (incl. React Router & Redux)" course on Udemy.


About This Project

This implementation was created for educational purposes to practice essential React concepts such as:

  • Components and Props
  • State Management with useState
  • Conditional Rendering
  • Event Handling
  • Lists and Keys
  • Lifting State Up
  • Derived State


Customizations

While following the course's guidance, I've added some personal customizations to enhance the project:


  • Custom Navbar with project information display
  • Fixed footer with project version and attribution
  • Responsive Google Ads integration
  • Improved layout adjustments for better viewport fitting
  • Background pattern modifications
  • Added "About Project" modal with README content

Disclaimer

The code structure and logic follow the course instructor's guidance. This is not an original project but rather a practical exercise to reinforce React fundamentals.


Technologies Used

  • React 19.0.0
  • Vite
  • CSS3
  • JavaScript (ES6+)


Português

Este projeto é um jogo da Velha implementado em React como parte do meu processo de aprendizagem seguindo o curso "React - The Complete Guide 2024 (incl. React Router & Redux)" na Udemy.


Sobre o Projeto

Esta implementação foi criada com propósitos educacionais para praticar conceitos essenciais do React como:


  • Componentes e Props
  • Gerenciamento de Estado com useState
  • Renderização Condicional
  • Manipulação de Eventos
  • Listas e Keys
  • Elevação de Estado
  • Estado Derivado

Personalizações

Embora seguindo a orientação do curso, adicionei algumas personalizações para aprimorar o projeto:


  • Barra de navegação personalizada com informações do projeto
  • Rodapé fixo com versão do projeto e atribuição
  • Integração responsiva com Google Ads
  • Ajustes de layout para melhor adequação à viewport
  • Modificações no padrão de fundo
  • Adição de modal "Sobre o Projeto" com conteúdo do README

Aviso

A estrutura e lógica do código seguem a orientação do instrutor do curso. Este não é um projeto original, mas sim um exercício prático para reforçar os fundamentos do React.


Tecnologias Utilizadas

  • React 19.0.0
  • Vite
  • CSS3
  • JavaScript (ES6+)