Getting Started with React (1)

　　Getting Started with React

　　This article leads you into the world of React through a case study.

　　The case in this article comes from the React official website.

　　It is assumed here that you already have the foundation of JS and have a certain understanding of Node.js.

　　1. Build a React development environment

　　Our React development environment is based on Node.js and the development tool used is Visual Studio Code.

　　1. Create a React project

　　First, according to Node's plugin create-react-app, enter the following command on the command line:

　　npm install -g create-react-app

　　After installing the plugin, use it to create a React project:

　　create-react-app react-demo

　　This process may take a few minutes, and the process is shown in the following figure:

　　The resulting directory structure is as follows:

　　Here we talk about modules in Node in detail.

　　Everyone knows that Node uses Google's V8 engine, so Node development uses JS. In Node development, a function is encapsulated as a "module", and the module may reference other modules, which is called the "dependency" of the module.

　　When I created the React project just now, I mainly introduced several modules of react, react-dom, and react-scripts, and then introduced a bunch of dependent modules. These modules are placed in the node_modules directory under the project directory, which is convenient for the project code at any time. call these functions.

　　In Node, to install a module to the global (C:\Users\Administrator\AppData\Roaming\npm\node_modules), you can use: npm install -g [module name], if you install a module to the project, you can use: npm install --save-dev [module name].

　　In addition to the node_modules directory, there are two directories, src and public, in the generated directory. Src is used to store the source code, and public is used to store the generated build results for publishing.

　　2. A simple case

　　Now we go into Visual Studio Code, open the D:\react-demo folder, and delete the contents of the src directory:

　　Then write two files, one is index.js and the other is index.css.

　　index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
    render() {
        return (
            <button className="square">
                {/* EVERYTHING */}
            </button>
        );
    }
}

class Board extends React.Component {
    renderSquare(i) {
        return <Square />;
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

class Game extends React.Component {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);

　　index.css：

body {
  font: 14px 'Century Gothic', Futura, sans-serif;

  margin: 20px;
}

ol,
ul {
  padding-left: 30px;
}

.board-row:after {
  display: table;
  clear: both;

  content: '';
}

.status {
  margin-bottom: 10px;
}

.square {
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;

  float: left;

  width: 34px;
  height: 34px;
  margin-top: -1px;
  margin-right: -1px;
  padding: 0;

  text-align: center;

  border: 1px solid #999;
  background: #fff;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

　　3. Operation

　　Enter npm start in the command window to start the local server:

　　Also open a browser window: