React入门（一）

　　React入门

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

　　本文案例来源于React官网。

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

　　一、搭建React开发环境

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

　　1. 创建React工程

扫描二维码关注公众号，回复： 54730 查看本文章

　　首先按照Node的插件create-react-app，在命令行中输入如下命令：

　　npm install -g create-react-app

　　安装完插件后，使用它创建一个React工程：

　　create-react-app react-demo

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

　　生成的目录结构如下：

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

　　大家都知道Node采用Google的V8引擎，所以Node开发都使用JS。在Node开发中，一个功能封装为“模块（module）”，模块可能又引用了别的模块，称为模块的“依赖”。

　　在刚才创建React工程时，主要引入了react、react-dom、react-scripts几个模块，然后又引入了一堆依赖的模块，这些模块都放在工程目录下的node_modules目录中，方便工程代码随时调用这些功能。

　　在Node中，要安装一个模块到全局（C:\Users\Administrator\AppData\Roaming\npm\node_modules），可以使用：npm install -g [模块名]，如果安装一个模块到工程，可以使用：npm install --save-dev [模块名]。

　　除了node_modules目录外，生成的目录中还有src和public两个目录，src用于存放源代码，public则存放生成的构建结果，用于发布。

　　二、一个简单案例

　　现在我们进入Visual Studio Code，打开D:\react-demo文件夹，并删除src目录中的内容：

　　然后编写两个文件，一个是index.js，另一个是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">
                {/* 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：

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，即可启动本地服务器：

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

猜你喜欢