React 官網示例實現 + 五子棋 + 簡單文章發表 demo

五子棋遊戲 + 博客 demo + React官網示例實現

github 源碼：https://github.com/moshang-xc/react-demo

以前一直在用vue，前幾天看了下React的官方文檔，寫了個demo增強對react API的理解，歡迎指正。

模塊功能

該項目使用 React + React-router 開發，主要是熟悉 React 的接口和使用，主要包含三個模塊的功能

• 相似博客模塊
• React 官網入門教程示例實現和五子棋遊戲
• React 官網React 理念示例實現

經過開啓代理服務器提供數據 API，代理服務器經過使用mock-mini-server，經過配置相應的規則，使用Mock生成隨機數據，同時能夠自定義處理請求，實現一個簡易版的服務器，支持數據的更新操做，具體的使用可見使用文檔和本項目的配置文件mockhttp.js

運行

# 拉取代碼
git clone https://github.com/moshang-xc/react-demo
cd react-demo

# 安裝依賴
npm install

# 開啓代理服務器
npx mock-mini-server

# 運行react項目
npm start

相似博客模塊

該模塊主要包含文章的發表，點贊，取消點贊，收藏，感謝，查看評論等功能，只是一些簡單的實現，還有不少不足。文章發佈後能夠與本地服務器進行通訊，實時的更新界面數據顯示。點贊等數據沒有與服務器交互，只是修改了本地緩存的數據源。點擊評論能夠展開/收縮評論列表，評論數據實時從服務器獲取，評論數據每次獲取的都是經過Mock從新生成的，因此每次的結果都不同。

五子棋遊戲

該模塊實現了五子棋和井字遊戲兩個遊戲。

遊戲的過程當中能夠悔棋，能夠從新開始遊戲，悔棋，點擊右側相應的步數信息 button 便可。五子棋遊戲只記錄了最近 20 步的數據，20 步之前的數據不會記錄，故悔棋只可悔 20 步之內的棋。當遊戲結束，成功的一方的五個連線棋子會高亮顯示。

React 理念示例

以上全部的數據都是經過本地服務器mock-mini-server提供，經過擴展[mock]()實現一些數據交互功能。