React.js - Let's build a Tic Tac Toe game.

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js. This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc.

Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course.

Who this course is for:

  • React Developers looking to take on a reasonably sized project that isn't too complex
  • Developers who are keen on adding a project to their portfolio
  • Any developer that wants to know how to build a Tic Tac Toe game

Instructor

Full Stack Software Developer
  • 4.6 Instructor Rating
  • 524 Reviews
  • 58,903 Students
  • 3 Courses

I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years.

I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces.

Expected Outcomes

  1. How to build a Tic Tac Toe game How to build a React application from using a HTML / CSS template Proper way to structure components and state information in React A way of reducing loops in your code by using hash maps in Javascript How to use the useState React hook in a decently sized application Course content 8 sections • 27 lectures • 1h 56m total length Expand all sections Introduction 3 lectures • 10min Introduction Preview 05:07 Tools and Resources Preview 01:59 Creating our React application Preview 02:25 Converting our template into components 4 lectures • 19min Adding our game template 08:59 Creating the game component 03:42 Creating the board component 03:07 Creating the cell component 03:02 Component display logic 5 lectures • 25min Populating cell content 04:30 Setting cell dynamic classes 10:16 Creating cells from dynamic data 03:52 Highlighting winning cells dynamically 04:23 Lifting game state 02:03 Making the game interactive 4 lectures • 15min Configuring cell clicks 05:03 Populating cells on click 05:14 Changing turns 02:21 Prevent overwriting cells 02:24 Configuring the Game Over screen. 3 lectures • 12min Creating the result modal component 05:36 Controlling modal display from the game. 03:45 Setting up game over state 02:25 Determining the game result 3 lectures • 22min Setting up the calculate winner function 04:06 Calculating a winner 13:08 Calculating a tie 04:29 Adding the finishing touches 3 lectures • 12min Showing the game's result 05:01 Fixing the winning combinations 02:42 Starting a new game 03:48 Conclusion 2 lectures • 3min Conclusion 02:52 BONUS CONTENT: OTHER COURSES 00:21 Requirements A basic level of understand of React is preferred A reasonable understand of HTML, Javascript and CSS Node and NPM must be installed at a minimum Description In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js . This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc. Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course. Who this course is for: React Developers looking to take on a reasonably sized project that isn't too complex Developers who are keen on adding a project to their portfolio Any developer that wants to know how to build a Tic Tac Toe game Show more Show less Instructor Daryl Duckmanton Full Stack Software Developer 4.6 Instructor Rating 524 Reviews 58,903 Students 3 Courses I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years. I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677930ae5e1e06a2',m:'d8695c0b09757110bfcf7675bb44263a32bd2acd-1627759292-1800-AbpZYC0re+rNF/TJ17imiC4jhc1D28pCXNQGah9QjBlHolMEM6DI4evHCp32gZSu579afJNE4YsdFc8DCkNQDmBcOPmaZ3XFFs5oLMwJOqZNCN4s/plRKrVclTSrYJ34SOx8TV0qvriw7j9X1QK+cW0=',s:[0xeb90893371,0x7ef47216a3],}})();
  2. How to build a React application from using a HTML / CSS template Proper way to structure components and state information in React A way of reducing loops in your code by using hash maps in Javascript How to use the useState React hook in a decently sized application Course content 8 sections • 27 lectures • 1h 56m total length Expand all sections Introduction 3 lectures • 10min Introduction Preview 05:07 Tools and Resources Preview 01:59 Creating our React application Preview 02:25 Converting our template into components 4 lectures • 19min Adding our game template 08:59 Creating the game component 03:42 Creating the board component 03:07 Creating the cell component 03:02 Component display logic 5 lectures • 25min Populating cell content 04:30 Setting cell dynamic classes 10:16 Creating cells from dynamic data 03:52 Highlighting winning cells dynamically 04:23 Lifting game state 02:03 Making the game interactive 4 lectures • 15min Configuring cell clicks 05:03 Populating cells on click 05:14 Changing turns 02:21 Prevent overwriting cells 02:24 Configuring the Game Over screen. 3 lectures • 12min Creating the result modal component 05:36 Controlling modal display from the game. 03:45 Setting up game over state 02:25 Determining the game result 3 lectures • 22min Setting up the calculate winner function 04:06 Calculating a winner 13:08 Calculating a tie 04:29 Adding the finishing touches 3 lectures • 12min Showing the game's result 05:01 Fixing the winning combinations 02:42 Starting a new game 03:48 Conclusion 2 lectures • 3min Conclusion 02:52 BONUS CONTENT: OTHER COURSES 00:21 Requirements A basic level of understand of React is preferred A reasonable understand of HTML, Javascript and CSS Node and NPM must be installed at a minimum Description In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js . This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc. Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course. Who this course is for: React Developers looking to take on a reasonably sized project that isn't too complex Developers who are keen on adding a project to their portfolio Any developer that wants to know how to build a Tic Tac Toe game Show more Show less Instructor Daryl Duckmanton Full Stack Software Developer 4.6 Instructor Rating 524 Reviews 58,903 Students 3 Courses I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years. I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677930ae5e1e06a2',m:'d8695c0b09757110bfcf7675bb44263a32bd2acd-1627759292-1800-AbpZYC0re+rNF/TJ17imiC4jhc1D28pCXNQGah9QjBlHolMEM6DI4evHCp32gZSu579afJNE4YsdFc8DCkNQDmBcOPmaZ3XFFs5oLMwJOqZNCN4s/plRKrVclTSrYJ34SOx8TV0qvriw7j9X1QK+cW0=',s:[0xeb90893371,0x7ef47216a3],}})();
  3. Proper way to structure components and state information in React A way of reducing loops in your code by using hash maps in Javascript How to use the useState React hook in a decently sized application Course content 8 sections • 27 lectures • 1h 56m total length Expand all sections Introduction 3 lectures • 10min Introduction Preview 05:07 Tools and Resources Preview 01:59 Creating our React application Preview 02:25 Converting our template into components 4 lectures • 19min Adding our game template 08:59 Creating the game component 03:42 Creating the board component 03:07 Creating the cell component 03:02 Component display logic 5 lectures • 25min Populating cell content 04:30 Setting cell dynamic classes 10:16 Creating cells from dynamic data 03:52 Highlighting winning cells dynamically 04:23 Lifting game state 02:03 Making the game interactive 4 lectures • 15min Configuring cell clicks 05:03 Populating cells on click 05:14 Changing turns 02:21 Prevent overwriting cells 02:24 Configuring the Game Over screen. 3 lectures • 12min Creating the result modal component 05:36 Controlling modal display from the game. 03:45 Setting up game over state 02:25 Determining the game result 3 lectures • 22min Setting up the calculate winner function 04:06 Calculating a winner 13:08 Calculating a tie 04:29 Adding the finishing touches 3 lectures • 12min Showing the game's result 05:01 Fixing the winning combinations 02:42 Starting a new game 03:48 Conclusion 2 lectures • 3min Conclusion 02:52 BONUS CONTENT: OTHER COURSES 00:21 Requirements A basic level of understand of React is preferred A reasonable understand of HTML, Javascript and CSS Node and NPM must be installed at a minimum Description In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js . This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc. Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course. Who this course is for: React Developers looking to take on a reasonably sized project that isn't too complex Developers who are keen on adding a project to their portfolio Any developer that wants to know how to build a Tic Tac Toe game Show more Show less Instructor Daryl Duckmanton Full Stack Software Developer 4.6 Instructor Rating 524 Reviews 58,903 Students 3 Courses I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years. I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677930ae5e1e06a2',m:'d8695c0b09757110bfcf7675bb44263a32bd2acd-1627759292-1800-AbpZYC0re+rNF/TJ17imiC4jhc1D28pCXNQGah9QjBlHolMEM6DI4evHCp32gZSu579afJNE4YsdFc8DCkNQDmBcOPmaZ3XFFs5oLMwJOqZNCN4s/plRKrVclTSrYJ34SOx8TV0qvriw7j9X1QK+cW0=',s:[0xeb90893371,0x7ef47216a3],}})();
  4. A way of reducing loops in your code by using hash maps in Javascript How to use the useState React hook in a decently sized application Course content 8 sections • 27 lectures • 1h 56m total length Expand all sections Introduction 3 lectures • 10min Introduction Preview 05:07 Tools and Resources Preview 01:59 Creating our React application Preview 02:25 Converting our template into components 4 lectures • 19min Adding our game template 08:59 Creating the game component 03:42 Creating the board component 03:07 Creating the cell component 03:02 Component display logic 5 lectures • 25min Populating cell content 04:30 Setting cell dynamic classes 10:16 Creating cells from dynamic data 03:52 Highlighting winning cells dynamically 04:23 Lifting game state 02:03 Making the game interactive 4 lectures • 15min Configuring cell clicks 05:03 Populating cells on click 05:14 Changing turns 02:21 Prevent overwriting cells 02:24 Configuring the Game Over screen. 3 lectures • 12min Creating the result modal component 05:36 Controlling modal display from the game. 03:45 Setting up game over state 02:25 Determining the game result 3 lectures • 22min Setting up the calculate winner function 04:06 Calculating a winner 13:08 Calculating a tie 04:29 Adding the finishing touches 3 lectures • 12min Showing the game's result 05:01 Fixing the winning combinations 02:42 Starting a new game 03:48 Conclusion 2 lectures • 3min Conclusion 02:52 BONUS CONTENT: OTHER COURSES 00:21 Requirements A basic level of understand of React is preferred A reasonable understand of HTML, Javascript and CSS Node and NPM must be installed at a minimum Description In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js . This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc. Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course. Who this course is for: React Developers looking to take on a reasonably sized project that isn't too complex Developers who are keen on adding a project to their portfolio Any developer that wants to know how to build a Tic Tac Toe game Show more Show less Instructor Daryl Duckmanton Full Stack Software Developer 4.6 Instructor Rating 524 Reviews 58,903 Students 3 Courses I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years. I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677930ae5e1e06a2',m:'d8695c0b09757110bfcf7675bb44263a32bd2acd-1627759292-1800-AbpZYC0re+rNF/TJ17imiC4jhc1D28pCXNQGah9QjBlHolMEM6DI4evHCp32gZSu579afJNE4YsdFc8DCkNQDmBcOPmaZ3XFFs5oLMwJOqZNCN4s/plRKrVclTSrYJ34SOx8TV0qvriw7j9X1QK+cW0=',s:[0xeb90893371,0x7ef47216a3],}})();
  5. How to use the useState React hook in a decently sized application Course content 8 sections • 27 lectures • 1h 56m total length Expand all sections Introduction 3 lectures • 10min Introduction Preview 05:07 Tools and Resources Preview 01:59 Creating our React application Preview 02:25 Converting our template into components 4 lectures • 19min Adding our game template 08:59 Creating the game component 03:42 Creating the board component 03:07 Creating the cell component 03:02 Component display logic 5 lectures • 25min Populating cell content 04:30 Setting cell dynamic classes 10:16 Creating cells from dynamic data 03:52 Highlighting winning cells dynamically 04:23 Lifting game state 02:03 Making the game interactive 4 lectures • 15min Configuring cell clicks 05:03 Populating cells on click 05:14 Changing turns 02:21 Prevent overwriting cells 02:24 Configuring the Game Over screen. 3 lectures • 12min Creating the result modal component 05:36 Controlling modal display from the game. 03:45 Setting up game over state 02:25 Determining the game result 3 lectures • 22min Setting up the calculate winner function 04:06 Calculating a winner 13:08 Calculating a tie 04:29 Adding the finishing touches 3 lectures • 12min Showing the game's result 05:01 Fixing the winning combinations 02:42 Starting a new game 03:48 Conclusion 2 lectures • 3min Conclusion 02:52 BONUS CONTENT: OTHER COURSES 00:21 Requirements A basic level of understand of React is preferred A reasonable understand of HTML, Javascript and CSS Node and NPM must be installed at a minimum Description In this short 2 hour course you will build out a simple 2 player Tic Tac Toe game using React.js . This will be built from the ground up, starting with creating your own new React application. Then breaking a simple HTML / CSS template into reusable functional React components. Lastly you'll also create and maintaining the necessary state needed for the game as well as writing the logic for calculating a win etc. Please note: This course is not for beginners. And will not spend much time talking about the basics of React. So it is suggested that you have at least a little bit of knowledge before taking the course. Who this course is for: React Developers looking to take on a reasonably sized project that isn't too complex Developers who are keen on adding a project to their portfolio Any developer that wants to know how to build a Tic Tac Toe game Show more Show less Instructor Daryl Duckmanton Full Stack Software Developer 4.6 Instructor Rating 524 Reviews 58,903 Students 3 Courses I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years. I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677930ae5e1e06a2',m:'d8695c0b09757110bfcf7675bb44263a32bd2acd-1627759292-1800-AbpZYC0re+rNF/TJ17imiC4jhc1D28pCXNQGah9QjBlHolMEM6DI4evHCp32gZSu579afJNE4YsdFc8DCkNQDmBcOPmaZ3XFFs5oLMwJOqZNCN4s/plRKrVclTSrYJ34SOx8TV0qvriw7j9X1QK+cW0=',s:[0xeb90893371,0x7ef47216a3],}})();