亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React 官網(wǎng)示例實現(xiàn) + 五子棋 + 簡單文章發(fā)表 demo

Astrian / 1379人閱讀

摘要:五子棋游戲博客官網(wǎng)示例實現(xiàn)源碼之前一直在用,前幾天看了下的官方文檔,寫了個加強對的理解,歡迎指正。五子棋游戲該模塊實現(xiàn)了五子棋和井字游戲兩個游戲。五子棋游戲只記錄了最近步的數(shù)據(jù),步以前的數(shù)據(jù)不會記錄,故悔棋只可悔步以內(nèi)的棋。

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

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

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

模塊功能

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

類似博客模塊

React 官網(wǎng)入門教程示例實現(xiàn)和五子棋游戲

React 官網(wǎng)React 理念示例實現(xiàn)

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

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

# 安裝依賴
npm install

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

# 運行react項目
npm start
類似博客模塊

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

五子棋游戲


該模塊實現(xiàn)了五子棋井字游戲兩個游戲。

游戲的過程中可以悔棋,可以重新開始游戲,悔棋,點擊右側(cè)相應的步數(shù)信息 button 即可。五子棋游戲只記錄了最近 20 步的數(shù)據(jù),20 步以前的數(shù)據(jù)不會記錄,故悔棋只可悔 20 步以內(nèi)的棋。當游戲結(jié)束,成功的一方的五個連線棋子會高亮顯示。

React 理念示例

以上所有的數(shù)據(jù)都是通過本地服務器mock-mini-server提供,通過擴展[mock]()實現(xiàn)一些數(shù)據(jù)交互功能。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/103752.html

相關(guān)文章

  • 前端_JavaScript

    摘要:為此決定自研一個富文本編輯器。例如當要轉(zhuǎn)化的對象有環(huán)存在時子節(jié)點屬性賦值了父節(jié)點的引用,為了關(guān)于函數(shù)式編程的思考作者李英杰,美團金融前端團隊成員。只有正確使用作用域,才能使用優(yōu)秀的設計模式,幫助你規(guī)避副作用。 JavaScript 專題之惰性函數(shù) JavaScript 專題系列第十五篇,講解惰性函數(shù) 需求 我們現(xiàn)在需要寫一個 foo 函數(shù),這個函數(shù)返回首次調(diào)用時的 Date 對象,注意...

    Benedict Evans 評論0 收藏0
  • 使用 ink + react 制作一個命令行的在線子棋游戲客戶端

    摘要:背景是在命令行中渲染系統(tǒng)的一個實現(xiàn)在上已經(jīng)有看著蠻好玩因此嘗試著寫了一個五子棋游戲經(jīng)過若干天的劃水終于初見成效了先來看個演示動畫太大這里放不下請移步觀看需要聲明的是這個客戶端我已經(jīng)開源在了上地址是但是這是一個在線游戲的客戶端因為商業(yè)原因服務 背景 Ink 是 React 在命令行中渲染系統(tǒng)的一個實現(xiàn), 在 GitHub 上已經(jīng)有 1w+ Star. 看著蠻好玩, 因此嘗試著寫了一個五子...

    macg0406 評論0 收藏0
  • 談談我對面向?qū)ο笠约邦惻c對象的理解

    showImg(https://segmentfault.com/img/remote/1460000007103938?w=391&h=247); 文章最初發(fā)表于我的個人博客非典型性程序猿 對于剛接觸JAVA或者其他面向?qū)ο缶幊陶Z言的朋友們來說,可能一開始都很難理解面向?qū)ο蟮母拍钜约邦惡蛯ο蟮年P(guān)系。筆者曾經(jīng)帶過一個短期培訓班教授java入門基礎(chǔ),在最后結(jié)束課程的時候,還有很多同學不太理解面向?qū)ο?..

    walterrwu 評論0 收藏0
  • 發(fā)布 react 組件到 npm 上

    摘要:我發(fā)布了我的第一個組件,一個基于的標簽云組件。然后將這個編譯命令寫到里,如下那么以后要編譯下面的代碼,只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了,接下來就可以發(fā)布到供其他人使用了。 我發(fā)布了我的第一個 npm 組件,一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑,花在完善整個發(fā)布流程的時間遠多于寫這個組件本身的時間,所以我記錄下我覺得一個正常的 react 組件的...

    Yi_Zhi_Yu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<