後來開始使用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": "[email protected]"
  },
  "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（處理地址的一個庫）

第二步：在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
}
 

配置檔案我覺得一個軟體一定要有，有了配置檔案，以後如果想改點東西用不著去程式碼裡找，直接就能改

/**
 * 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);

我註釋寫的應該很清晰了哈

這樣，完成了一個腳手架最最最最最基礎的一小步了

第一小步先這樣，接著說說我的思路

當用戶訪問你的網站時，就是訪問你的ip的一個埠，這裡我監控的是3002

現在沒有任何介面，直接訪問，得到的是not fount

下一步我們應該寫一個介面，返回一個dom介面的資訊

然後引入react，用react寫一個簡單的元件（客戶端渲染）

嘗試在伺服器端渲染元件

...