五子棋游戲 + 博客 demo + React官網(wǎng)示例實(shí)現(xiàn)

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

之前一直在用vue，前幾天看了下React的官方文檔，寫了個demo加強(qiáng)對react API的理解，歡迎指正。

模塊功能

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

類似博客模塊
React 官網(wǎng)入門教程示例實(shí)現(xiàn)和五子棋游戲
React 官網(wǎng)React 理念示例實(shí)現(xiàn)

通過開啟代理服務(wù)器提供數(shù)據(jù) API，代理服務(wù)器通過使用mock-mini-server，通過配置相應(yīng)的規(guī)則，使用Mock生成隨機(jī)數(shù)據(jù)，同時可以自定義處理請求，實(shí)現(xiàn)一個簡易版的服務(wù)器，支持?jǐn)?shù)據(jù)的更新操作，具體的使用可見使用文檔和本項(xiàng)目的配置文件mockhttp.js

運(yùn)行

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

# 安裝依賴
npm install

# 開啟代理服務(wù)器
npx mock-mini-server

# 運(yùn)行react項(xiàng)目
npm start

類似博客模塊

article.gif

該模塊主要包含文章的發(fā)表，點(diǎn)贊，取消點(diǎn)贊，收藏，感謝，查看評論等功能，只是一些簡單的實(shí)現(xiàn)，還有很多不足。文章發(fā)布后可以與本地服務(wù)器進(jìn)行通信，實(shí)時的更新界面數(shù)據(jù)顯示。點(diǎn)贊等數(shù)據(jù)沒有與服務(wù)器交互，只是修改了本地緩存的數(shù)據(jù)源。點(diǎn)擊評論可以展開/收縮評論列表，評論數(shù)據(jù)實(shí)時從服務(wù)器獲取，評論數(shù)據(jù)每次獲取的都是通過Mock重新生成的，所以每次的結(jié)果都不一樣。