React入门（一）

　　React入门

　　本文通过一个案例的学习，带领大家进入React的世界。

　　本文案例来源于React官网。

　　这里假设大家已经有JS的基础，并对Node.js有一定的了解。

　　一、搭建React开发环境

　　我们的React开发环境基于Node.js，使用的开发工具是Visual Studio Code。

　　1. 创建React项目

　　首先安装Node.js的插件create-react-app，在命令行中输入如下命令：

　　npm install -g create-react-app

　　安装完插件后，用它来创建一个React项目：

　　create-react-app react-demo

　　这个过程可能要花几分钟时间，过程如下图所示：

　　上面的提示告诉我们，主要安装了哪些模块，然后如果要运行项目，可以使用如下命令：

　　cd react-demo

　　npm start

　　2. React项目的目录结构

　　生成的目录结构如下：

　　node-modules目录主要存放相关的模块。

　　这里我们来详细谈谈Node.js中的模块。

　　大家都知道Node.js采用Google的V8引擎，所以在Node.js开发中使用的开发语言是JavaScript。一个实用功能通常封装为一个或多个“模块（module）”，模块之间存在相互引用的情况，这时称A模块“依赖于”B模块。Node.js会帮助我们管理模块之间的依赖关系，非常类似于Linux的yum install，安装一个模块时，会自动查找相关模块并安装。

　　在刚才创建React项目时，主要引入了react、react-dom、react-scripts等几个模块，并引入了另外一些依赖模块。这些模块都放在node_modules文件夹下。

　　在Node.js中，可以将一个模块安装到全局中（C:\Users\Administrator\AppData\Roaming\npm\node_modules），这时谁都可以使用，命令是：npm install -g [模块名]；也可以将一个模块安装到项目中，这时只有本项目可以使用，命令是：npm install --save-dev [模块名]。

　　除了node_modules外，生成的文件夹还有src和public。

　　public中，主要就是一个index.html，因为React主要用于构建单页应用，所以这里就放一个静态页面，作为首页。

　　src中，则是存放React开发中的一切资源，包括JS、CSS、图片等。

　　二、一个简单案例

　　现在我们进入Visual Studio Code，打开D:\react-demo文件夹，并删除src文件夹下的所有内容，我们另行编写：

　　编写两个文件，一个是index.js，另一个是index.css。

　　index.js文件是跟index.html对应的JS文件，是React项目的入口：

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

class Square extends React.Component {
    render() {
        return (
            <button className="square">
                {/* TODO */}
            </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是index.js文件的样式表：

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;
}

　　三、运行项目

　　在命令窗口中输入npm start，即可启动本地服务器：

　　同时会自动打开一个浏览器窗口：

　　以上就是本讲的主要内容，下一讲，将会说一说React代码中的细节。