React

In this directory are located sone dedicated ReactJS exercises.

Setup the environment

1. Make sure you have a recent version of Node.js installed. Here is how to install and update it at Ubuntu.

    sudo apt update
    sudo apt install -y nodejs npm
   

    sudo npm cache clean -f
    sudo npm install -g n
    sudo n stable
    # sudo n latest
   

2. Follow the installation instructions for Create React App to make a new project.

    npx create-react-app tic-tac-toe-game
   

3. Delete all files in the src/ folder of the new project.

    rm -f tic-tac-toe-game/src/*
   

4. Add a file named index.css in the src/ folder with this CSS code.

    touch tic-tac-toe-game/src/index.css
   

5. Add a file named index.js in the src/ folder with this JS code.

    touch tic-tac-toe-game/src/index.js
   

6. Add these three lines to the top of index.js in the src/ folder:

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    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. Also take a look at this tutorial: How to Set Up VSCode for Your React Projects. And setup React Developer Tools extension for your browser.

Function components vs Class components

In React, function components are a simpler way to write components that only contain a render method and don’t have their own state.

Instead of defining a class which extends React.Component, we can write a function that takes props as input and returns what should be rendered.

Function components are less tedious to write than classes, and many components can be expressed this way.

// Class component
import React from 'react';

class Square extends React.Component {
    render() {
        return (
            <button className="square" onClick={(e) => this.props.onClick()}>
                {this.props.value}
            </button>
        );
    }
}

export { Square };

// Function component
function Square(props) {
    return (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    );
}
export { Square };

Note. When we modified the Square to be a function component, we also changed onClick={() => this.props.onClick()} to a shorter onClick={props.onClick} (note the lack of parentheses on both sides).

Tutorial: Intro to React (Tic-tac-toe)

We will build a small game during this tutorial. You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React.

Source:

• Tutorial: Intro to React @React

Steps to improve Tic-tac-toe

• Display the location for each move in the format (col, row) in the move history list.

• Bold the currently selected item in the move list.

• Rewrite Board to use two loops to make the squares instead of hard-coding them.

• Add a toggle button that lets you sort the moves in either ascending or descending order.

• When someone wins, highlight the three squares that caused the win.

• When no one wins, display a message about the result being a draw.