創(chuàng)建react項目比較難著手的原因之一就是項目的架構(gòu)，這里我以一個博客系統(tǒng)的搭建為例

當(dāng)然，create-react-app 這個工具可以幫你快速創(chuàng)建一個react項目，但我個人覺得還是自己搭建一個模板比較好理解

我們的博客系統(tǒng)目錄結(jié)構(gòu)

• node_modules是自動生成的存放npm引入的模塊文件
• public用來存放靜態(tài)文件
• server存放數(shù)據(jù)庫的相關(guān)文件

npm5.0版本的新變化

1. 使用npm install xxx命令安裝模塊時，不再需要--save選項，會自動將模塊依賴信息保存到 package.json 文件；
2. 安裝模塊操作（改變 node_modules 文件夾內(nèi)容）會生成或更新 package-lock.json 文件
3. 發(fā)布的模塊不會包含 package-lock.json 文件
4. 如果手動修改了 package.json 文件中已有模塊的版本，直接執(zhí)行npm install不會安裝新指定的版本，只能通過npm install xxx@yy更新
   重新安裝模塊之所以快，是因為 package-lock.json 文件中已經(jīng)記錄了整個 node_modules 文件夾的樹狀結(jié)構(gòu)，甚至連模塊的下載地址都記錄了，再重新安裝的時候只需要直接下載文件即可

這里踩了一個坑

刪除package-lock.json文件，重新運(yùn)行npm install 命令就可以了

• server.js為服務(wù)器文件
• webpack.config.js 為 webpack的配置文件

整個項目開發(fā)中，public中的文件結(jié)構(gòu)每個人創(chuàng)建的可能都不一樣，以下為我們的項目示例

dist中為webpack打包的出口文件
優(yōu)化之前的代碼action是包含在components中，componemts中的文件調(diào)用自身的action，這種寫法不利于后期維護(hù)，將代碼重構(gòu)后，提取action放在一個新的文件夾中，在components中調(diào)用相應(yīng)的action，實現(xiàn)了狀態(tài)與展示分離．

JS目錄

action為頁面產(chǎn)生的動作，以登陸為例其action為

export const signIn = (signInInfo) => ({
    type: 'SIGN_IN',
    signInInfo
});

components是靜態(tài)組建，只負(fù)責(zé)展示頁面內(nèi)容

import React from 'react';
import PropTypes from 'prop-types';

export default class Login extends React.Component {

    render() {
        const {onClickSignIn} = this.props;
        return (
            <div>
                <form>
                    <label htmlFor="name">用戶名：</label>
                    <input type="text" name="name" id="name"/>
                    <br />
                    <label htmlFor="password">密碼：</label>
                    <input type="password" name="password" id="password" />
                    <input type="button" value="登錄" onClick={onClickSignIn} />
                </form>
            </div>
        );
    }
};
Login.propTypes = {
    onClickSignIn: PropTypes.func.isRequired
};

containers為容器組件負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé) UI 的呈現(xiàn)，其中包含兩個重要函數(shù) mapStateToProps 和 mapDispatchToProps
具體用法可以參考http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

middlewares是中間件，在頁面出發(fā)action之后，重新渲染頁面之前可以在中間件中進(jìn)行操作，一般用來向后臺發(fā)送ajax請求

reducers用來返回一個新的狀態(tài)，用來重新渲染界面

main.js文件引入前邊的containers和middlewares中的文件，渲染進(jìn)靜態(tài)文件index.html中

dbs中為數(shù)據(jù)庫的連接文件及SQL語句，這里把數(shù)據(jù)庫連接文件貼出來供小可愛們參考

const mysql = require('mysql');

var connection = mysql.createConnection(
    {
        host: 'localhost',
        user: 'root',
        password: "yourpassword",
        database: 'yourdatabaseName',
        port: 3306
    });
connection.connect((err)=> {
    if (err) {
        console.log('err' + err.stack);
        return;
    }
    console.log('connected success!!!');
});
module.exports = connection;

routers為后臺文件，用來接收ajax請求，對數(shù)據(jù)庫進(jìn)行操作，并返回相應(yīng)的數(shù)據(jù)，在這里返回之后就可以得到數(shù)據(jù)對頁面重新渲染啦