建立好專案之後，刪掉 src 目錄下的檔案，按照以下結構建立目錄，根據具體專案情況進行更改
npm install antd -snpm install react-router-dom -s使用示例：
reactdom.render(
, document.getelementbyid("root")
);
routes/index.js中，引入需要的元件並匯出路由配置物件
import register from "../pages/register/register";
import login from "../pages/login/login";
import main from "../pages/main/main";
export const routes = [
, ,
,];
npm install redux react-redux redux-thunk -s
npm install redux-devtools-extension -d
註冊
import {} from "antd"即可引入元件樣式，任意使用
資料通過state儲存，通過繫結輸入框onchange事件更新資料
state = ;
handlechange = (name, value) => );
};
注意：註冊和登入元件中的路由跳轉使用this.props.history中的replace()或者push()方法實現，區別是 replace 不能回退，push 可以回退
修改bin/www中的埠號為 4000，避免與前端的監聽埠號 3000 衝突
npm install nodemon -dpackage.json中的scripts.start改為nodemon ./bin/www，啟動之後每次修改**儲存即可立即重啟
npm install mongoose blueimp-md5 -sblueimp-md5 庫用來對密碼進行 md5 加密，庫匯出的是函式，直接使用 blueimp-md5(password)即可返回加密結果
使用操作 mongodb 資料庫的 mongoose 模組向外暴露乙個資料庫操作的類，這樣在路由中如果需要運算元據庫只需要引入類直接使用
const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost:27017/school-chat");
const connection = mongoose.connection;
connection.on("connected", () => );
const userschema = mongoose.schema(,
password: ,
type: ,
...});const usermodel = mongoose.model("user", userschema);
exports.usermodel = usermodel;
routes/index.js中編寫後端所有的路由，路由中返回的物件儲存在前端 ajax 請求的響應體中
註冊首先需要在資料庫中查詢使用者是否存在，不存在才新建一條文件
router.post("/register", (req, res) => = req.body;
usermodel.findone(, (err, user) => 」已存在` });
} else );
usermodel.s**e((err, user) => );
res.send( });
});}
});});
router.post("/login", (req, res) => = req.body;
usermodel.findone(, filter, (err, user) => );
res.send();
} else );
}});
});
npm install axios -sexport default function ajax(url = "", data = {}, type = "get") =$&`;
}if (querystr !== "") ?$`);
}} else
}
api/index.js中
export const reqregister = (user) => ajax("/register", user, "post");
export const reqlogin = (username, password) => ajax("/login", , "post");
export const requpdate = (user) => ajax("/update", user, "post");
...
redux/actions.js中編寫多個 action creator：同步 action，非同步 action
export const register = (user) => = user;
if (!username)
if (password !== againpassword)
return async (dispatch) => );
const result = response.data;
if (result.code === 0) else
};};
redux/reducers.js中編寫所有的 reducer 函式，然後使用 combinereducers 函式結合起來暴露出去
function user(state = inituser, action) ;
case error_msg:
return ;
default:
return state;
}}export default combinereducers();
import thunk from "redux-thunk";
import from "redux-devtools-extension";
import reducers from "./reducers";
最後，在redux/store.js中暴露編寫 redux 最核心部分，向外暴露 store 物件，**比較固定，在大部分專案中幾乎不變
登入和註冊點選傳送請求的時候會出現瀏覽器跨域報錯，意思是 3000 埠向 4000 埠傳送請求
乙個簡單的解決辦法是使用**：在package.json中配置"proxy": "http://localhost:4000"，意思是配置乙個在 3000 埠可以向 4000 埠**請求的**，瀏覽器識別不出**
將 redux 作用在在註冊和登入元件上：
export default connect(
(state) => (),
)(register);
this.props.user獲取，比如this.props.user.msg，然後就可以將 redux 中的狀態展現在元件中
註冊操作可使用this.props.register(this.state)進行登入
全棧工程師
全棧工程師，也叫全端工程師，英文full stack developer。是指掌握多種技能，並能利用多種技能獨立完成產品的人。web前端也遠遠不是從前的切個圖用個jquery上個ajax相容各種瀏覽器那麼簡單了。現代的web前端，你需要用到模組化開發 多屏相容 mvc，各種複雜的互動與優化，甚至你需...
全棧工程師
全棧工程師 價值1.全域性性思維 2.溝通成本 專案越大，溝通成本越高，做過專案管理的都知道，專案中的人力是1 1 2的，人越多效率越低。因為溝通是需要成本的，不同技術的人各說各話，前端和後端是一定會掐架的。每個人都會為自己的利益而戰，毫不為已的人是不存在的。而全棧工程師的成本幾乎為零，因為各種技術...
關於全棧工程師
facebook前些年傳出一種現象，他們鼓勵工程師成為全棧式的，乙個人從設計到開發運維。不知道他們執行的力度如何，有沒有全力推廣。但fb畢竟是大公司，不論其好壞，其倒是在網際網路上掛起了一陣 全棧 風，很多任務程師跟風而動，這一點，fb倒是挺成功的。我個人的看法，我對全棧工程師不是太認可，至少不能大...