資訊專欄INFORMATION COLUMN
摘要：五子棋游戲博客官網(wǎng)示例實(shí)現(xiàn)源碼之前一直在用，前幾天看了下的官方文檔，寫了個(gè)加強(qiáng)對(duì)的理解，歡迎指正。五子棋游戲該模塊實(shí)現(xiàn)了五子棋和井字游戲兩個(gè)游戲。五子棋游戲只記錄了最近步的數(shù)據(jù)，步以前的數(shù)據(jù)不會(huì)記錄，故悔棋只可悔步以內(nèi)的棋。
五子棋游戲 + 博客 demo + React官網(wǎng)示例實(shí)現(xiàn)
github 源碼：https://github.com/moshang-xc/react-demo
之前一直在用vue，前幾天看了下React的官方文檔，寫了個(gè)demo加強(qiáng)對(duì)react API的理解，歡迎指正。
模塊功能該項(xiàng)目使用 React + React-router 開發(fā)，主要是熟悉 React 的接口和使用，主要包含三個(gè)模塊的功能
類似博客模塊
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í)可以自定義處理請(qǐng)求，實(shí)現(xiàn)一個(gè)簡(jiǎ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類似博客模塊
該模塊主要包含文章的發(fā)表，點(diǎn)贊，取消點(diǎn)贊，收藏，感謝，查看評(píng)論等功能，只是一些簡(jiǎn)單的實(shí)現(xiàn)，還有很多不足。文章發(fā)布后可以與本地服務(wù)器進(jìn)行通信，實(shí)時(shí)的更新界面數(shù)據(jù)顯示。點(diǎn)贊等數(shù)據(jù)沒有與服務(wù)器交互，只是修改了本地緩存的數(shù)據(jù)源。點(diǎn)擊評(píng)論可以展開/收縮評(píng)論列表，評(píng)論數(shù)據(jù)實(shí)時(shí)從服務(wù)器獲取，評(píng)論數(shù)據(jù)每次獲取的都是通過Mock重新生成的，所以每次的結(jié)果都不一樣。
五子棋游戲
該模塊實(shí)現(xiàn)了五子棋和井字游戲兩個(gè)游戲。
游戲的過程中可以悔棋，可以重新開始游戲，悔棋，點(diǎn)擊右側(cè)相應(yīng)的步數(shù)信息 button 即可。五子棋游戲只記錄了最近 20 步的數(shù)據(jù)，20 步以前的數(shù)據(jù)不會(huì)記錄，故悔棋只可悔 20 步以內(nèi)的棋。當(dāng)游戲結(jié)束，成功的一方的五個(gè)連線棋子會(huì)高亮顯示。
React 理念示例以上所有的數(shù)據(jù)都是通過本地服務(wù)器mock-mini-server提供，通過擴(kuò)展[mock]()實(shí)現(xiàn)一些數(shù)據(jù)交互功能。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103752.html
摘要：為此決定自研一個(gè)富文本編輯器。例如當(dāng)要轉(zhuǎn)化的對(duì)象有環(huán)存在時(shí)子節(jié)點(diǎn)屬性賦值了父節(jié)點(diǎn)的引用，為了關(guān)于函數(shù)式編程的思考作者李英杰，美團(tuán)金融前端團(tuán)隊(duì)成員。只有正確使用作用域，才能使用優(yōu)秀的設(shè)計(jì)模式，幫助你規(guī)避副作用。 JavaScript 專題之惰性函數(shù) JavaScript 專題系列第十五篇，講解惰性函數(shù) 需求 我們現(xiàn)在需要寫一個(gè) foo 函數(shù)，這個(gè)函數(shù)返回首次調(diào)用時(shí)的 Date 對(duì)象，注意...
摘要：背景是在命令行中渲染系統(tǒng)的一個(gè)實(shí)現(xiàn)在上已經(jīng)有看著蠻好玩因此嘗試著寫了一個(gè)五子棋游戲經(jīng)過若干天的劃水終于初見成效了先來看個(gè)演示動(dòng)畫太大這里放不下請(qǐng)移步觀看需要聲明的是這個(gè)客戶端我已經(jīng)開源在了上地址是但是這是一個(gè)在線游戲的客戶端因?yàn)樯虡I(yè)原因服務(wù) 背景 Ink 是 React 在命令行中渲染系統(tǒng)的一個(gè)實(shí)現(xiàn), 在 GitHub 上已經(jīng)有 1w+ Star. 看著蠻好玩, 因此嘗試著寫了一個(gè)五子...
showImg(https://segmentfault.com/img/remote/1460000007103938?w=391&h=247); 文章最初發(fā)表于我的個(gè)人博客非典型性程序猿 對(duì)于剛接觸JAVA或者其他面向?qū)ο缶幊陶Z言的朋友們來說，可能一開始都很難理解面向?qū)ο蟮母拍钜约邦惡蛯?duì)象的關(guān)系。筆者曾經(jīng)帶過一個(gè)短期培訓(xùn)班教授java入門基礎(chǔ)，在最后結(jié)束課程的時(shí)候，還有很多同學(xué)不太理解面向?qū)ο?..
摘要：我發(fā)布了我的第一個(gè)組件，一個(gè)基于的標(biāo)簽云組件。然后將這個(gè)編譯命令寫到里，如下那么以后要編譯下面的代碼，只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了，接下來就可以發(fā)布到供其他人使用了。 我發(fā)布了我的第一個(gè) npm 組件，一個(gè)基于 react 的 3d 標(biāo)簽云組件。在這途中我也是遇到了很多的坑，花在完善整個(gè)發(fā)布流程的時(shí)間遠(yuǎn)多于寫這個(gè)組件本身的時(shí)間，所以我記錄下我覺得一個(gè)正常的 react 組件的...
閱讀 1981·2021-11-23 09:51
閱讀 890·2021-11-19 09:40
閱讀 842·2021-10-27 14:20
閱讀 5042·2021-10-09 09:52
閱讀 3315·2021-10-09 09:44
閱讀 1742·2021-10-08 10:05
閱讀 5120·2021-09-09 11:47
閱讀 3496·2019-08-30 12:47
