A classic tic-tac-toe game built with React 19 and modern React patterns. This project demonstrates the latest React features including the new createRoot API, functional components with hooks, and modern development practices.
- React 19 - Latest React version with new features and optimizations
- Modern React Patterns - Functional components with hooks instead of class components
- New React DOM API - Uses
createRootinstead of deprecatedReactDOM.render - Hot Reloading - Development server with instant updates
- Production Ready - Optimized build with code splitting and minification
- Responsive Design - Clean, modern UI that works on all devices
- The game starts with player X
- Click on any empty square to make your move
- Players alternate between X and O
- First player to get 3 in a row (horizontally, vertically, or diagonally) wins!
- The game will show the winner or indicate it's a draw
- React 19.0.0 - Latest React with new features
- React DOM 19.0.0 - Updated DOM rendering
- Create React App - Modern build tooling
- Webpack 4 - Module bundling
- Babel - JavaScript compilation
- CSS3 - Styling with modern CSS features
This project was bootstrapped with Create React App.
-
Clone the repository
git clone <repository-url> cd tic-tac-toe-react
-
Install dependencies
npm install
-
Start development server
npm start
-
Open your browser Navigate to http://localhost:3000
In the project directory, you can run:
Runs the app in development mode with React 19's new features.
Open http://localhost:3000 to view it in the browser.
- Hot Reloading - Changes are reflected instantly
- React 19 DevTools - Enhanced debugging experience
- Modern Error Overlay - Better error reporting
- Fast Refresh - Preserves component state during updates
Launches the test runner in interactive watch mode.
See the section about running tests for more information.
Builds the app for production with React 19 optimizations.
It correctly bundles React in production mode and optimizes the build for the best performance.
Build Features:
- Code Splitting - Automatic chunk optimization
- Tree Shaking - Removes unused code
- Minification - Compressed JavaScript and CSS
- Asset Hashing - Cache-busting for deployments
- Source Maps - Easy debugging in production
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
This project has been upgraded to React 19 with modern patterns:
- React 19.0.0 - Latest React version with performance improvements
- New
createRootAPI - Replaced deprecatedReactDOM.render - Functional Components - Converted from class components to modern hooks
- Modern State Management - Using
useStatehook for state - Enhanced DevTools - Better debugging experience
- Improved Performance - Faster rendering and updates
// Old React 16 pattern (deprecated)
ReactDOM.render(<App />, document.getElementById('root'));
// New React 19 pattern
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);- Converted class components to functional components
- Replaced
this.statewithuseStatehook - Simplified component lifecycle with hooks
- Improved code readability and maintainability
tic-tac-toe-react/
├── public/ # Static assets
│ ├── index.html # HTML template
│ └── favicon.ico # App icon
├── src/ # Source code
│ ├── index.js # App entry point with React 19 createRoot
│ └── index.css # Game styles
├── config/ # Webpack configuration
├── scripts/ # Build scripts
├── package.json # Dependencies and scripts
└── README.md # This file
- Requires Node.js 16+ for optimal performance
- Uses legacy OpenSSL provider for webpack compatibility
- Tested with Node.js 24.7.0
- Modern browsers with ES6+ support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Mobile browsers supported
- Bundle Size: ~60KB gzipped
- First Load: Optimized with code splitting
- Hot Reload: Sub-second update times
- Memory Usage: Efficient with React 19 optimizations
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
- Use functional components with hooks
- Follow React 19 best practices
- Maintain clean, readable code
- Add comments for complex logic
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify