What is so good about React JS? It is a design that separates the state of the application from the UI components.
The following image best describes such a key feature:
In this lab, you will go through steps in transforming an HTML page into an React JS application. Our target is to write a web-based Othello game, which is already implemented in our course repo.
-
First, let us have a taste on a React JS project. You are going to set up a docker container that is able to compile JS files, and run the React project.
-
Given a HTML page representing the game layout, we identify and decompose it into small components. We will also identify what the game state is.
-
For each component, we package it into a React Component. We will construct our first React component, and we will introduce what the JSX code is, which is extensively used by React JS.
-
Further, we construct the entire game layout using the layout that we decomposed.
-
Next, we hard code the game state so as to see if the correct game layout is displayed accordingly.
-
Last, we introduce the change of the game state through mouse click event.
-
By the way, we did not talk about the game logic. Well, it depends on the time in the lab. Probably, we will skip the implementation of the game logic.
For more details, you are always welcome to read the official documentation of React JS by Facebook.