重新认识React以及重新搭建React脚手架（0）

第一次开始学习React是今年的5月份，之前一直是直接写JS和CSS，也没有打包，直接加载，没什么复杂的东西。

后来开始使用React，使用以后就有点爱不释手

之前实现起来比较复杂的东西，现在也可以简单的实现

只不过动画是个弱项，不过我依赖了JQ库，这样就可以直接使用一些网站非常成熟的插件了

因为上一次是开始学习，虽然也是自己一点一点搭建的一个脚手架，但是现在看来毛病多多，所以现在重建一个，我会写的尽可能的细致，希望能帮助到一些人

希望即便你不会一点代码也能像白痴一样，搭建出来一个脚手架

...环境省略（node、npm）...

创建一个文件夹XXX_React-baisc（注：以后只要“XXX_”为前缀的名称都可以是自定义的，后面的内容是我当前使用的名称）

第一步：在XXX_React-baisc下创建package.json文件

{
  "name": "react-basic",
  "description": "react脚手架",
  "version": "0.0.1",
  "author": {
    "name": "tian ze wen",
    "email": "tianzewen_tzw@163.com"
  },
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "https://coding.net/u/tianzewen/p/react-basic/git"
  },
  "devDependencies": {
    
  },
  "dependencies": {
    "koa": "2.0.0",
    "path": "^0.12.7"
  }
}

不懂的可以直接用翻译一下英文就懂了，这里我默认引入了Koa框架和path（处理地址的一个库）

然后cmd，切换到XXX_React-basic下执行：npm install

第二步：在XXX_React-baisc下创建XXX_config、XXX_web文件夹（不是必须的，只是觉得这样做酷酷的）

XXX_config下创建文件XXX_app.config.js，内容为：

/**
 * 配置文件（非常重要，很多地方会引用当前文件）
 * tzw 2017年5月22日13:57:44
 */
const path = require('path');
const app_root = path.join(__dirname, '../');

module.exports = {
    // 项目根目录
    APP_ROOT: app_root,
    // 项目配置文件夹
    CONFIG_ROOT: path.join(app_root, 'config'),
    // 端口
    PORT: 3002,
    // 是否是调试模式
    DEBUG: true
}

配置文件我觉得一个软件一定要有，有了配置文件，以后如果想改点东西用不着去代码里找，直接就能改

XXX_web下创建XXX_index.js，内容为：

/**
 * tzw 2017年8月18日15:40:10
 */

// 严格模式
'use strict';

// 引入配置文件（系统基础配置）
const config = require('../config/app.config');

// Koa框架
const Koa = require('koa');

// Koa实例化出来一个application
const app = new Koa();

// 监听端口
app.listen(config.PORT);
console.log('正在监听端口：'+config.PORT);

我注释写的应该很清晰了哈

然后在cmd切换到XXX_React-basic，运行：node ./web/index.js

这样，完成了一个脚手架最最最最最基础的一小步了

第一小步先这样，接着说说我的思路

当用户访问你的网站时，就是访问你的ip的一个端口，这里我监控的是3002

现在没有任何接口，直接访问，得到的是not fount

下一步我们应该写一个接口，返回一个dom接口的信息

然后引入react，用react写一个简单的组件（客户端渲染）

尝试在服务器端渲染组件

...