7 users have completed this project

Introduction

Welcome to React, the most popular front-end framework in the world. The hype isn’t unwarranted. React is truly a joy to work with. Building components and managing application state is made extremely easy by these guys and you’ll be building very cool apps in no time with this tool.

Right now (August 2022), I still consider a better idea to learn Angular first, since there are way too many React developers out there competing for jobs. And The C# Academy doesn’t have an opinion about which one is better. They’re both great, and ideally, we should learn both. And of course, if in your area there are more React jobs than Angular, go for it!

In this project, you’ll build a Tic-tac-toe game with the help of the React Docs tutorial. I know, one of my pet-peeves is the insistence in learning through a useless game, particularly Tic-tac-toe. That doesn’t resemble anything you’ll work with in real life.

However, I have to admit, it’s a great tutorial. Truly beginner friendly. And it does have an interesting feature that lets you back previous moves. With this tutorial, you’ll be ready to jump into more interesting stuff right away.

Requirements

This project has only one requirement. You’ll build a Tic-Tac-Toe game following React’s documentation. The objective at this stage isn’t to modify it or do anything fancy with it. Right now all you need to do is learn the basics. And there’s a lot to learn. So stick to the tutorial and take your time studying each line of code.

Resources

Since this is your first React project, make sure you look up everything you don’t know. Try not to let any keyword, method or concept left-behind. This is the moment to build your foundation. And don’t forget to reach out on our Discord community if you have questions! Here’s my github repository for this project, where you can find branches for each stage of the development of this game. To navigate through the branches, choose from the dropdown as per the picture below:

Tips

Take your time to study each word in the code. This isn't time to rush, but to learn at a slow pace, with patience.
Take notes, write diagrams. React has completely new concepts to us such as hooks and state management and drawing can be very helpful.
Once your app is complete, I strongly suggest you redo it and try to add some styling. If you're confused after your first go, it's crucial you go back and start from scratch.
If you want to take it a step further you could try to build another game. Sudoku? Checkers?

Review Repository

https://github.com/TheCSharpAcademy/CodeReviews.React.TicTacToe