ReactJS is one of the most popular frontend frameworks in use. A framework is a library or piece of software which provides a base structure for you to build upon. A framework is usually created with a generic approach so that the developer can mold it to his/her liking.
In layman’s terms, a framework is like a lego block, with all the basic functionality already built in. You just have to build upon that. We are now standing on the shoulders of giants — the giants are the facebook developers who created React.
In this tutorial, we’re going to build an interactive tic-tac-toe game.
If you like, you can check out the final result here: Final Result. Don’t worry if the code doesn’t make sense to you yet, or if it uses an unfamiliar syntax. We will be learning how to build this game step by step throughout this tutorial.
Try playing the game. You can also click on a button in the move list to go “back in time” and see what the board looked like just after that move was made.
Once you get a little familiar with the game, feel free to close that tab, as we’ll start from a simpler template in the next sections.
Here are the steps to follow:
- Make sure you have a recent version of Node.js installed.
- Follow the installation instructions to create a new project.
npm install -g create-react-appcreate-react-app my-app
3. Delete all files in the src/ folder of the new project (don’t delete the folder, just its contents).
cd my-apprm -f src/*
4. Add a file named index.css in the src/ folder with this CSS code.
5. Add a file named index.js in the src/ folder with this JS code.
6. Add these three lines to the top of index.js in the src/ folder:
import React from 'react';import ReactDOM from 'react-dom';import './index.css';
Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.
We recommend following these instructions to configure syntax highlighting for your editor.
With this out of the way, let’s get started!