近日，一前端大神sh1zuku用react刻出乙個 windows xp，頁面中的兩個windows xp視窗可以自由拖曳，而且作者還製作了乙個踩地雷的遊戲，可以直接上手玩。作者也將這些實現的過程在medium上記錄了下來，以下全文就是infoq對其內容的整理。
sh1zuku表示，他原本是以 vanilla js 寫整個project的，但不得不說 parcel 真的很強大，一鍵開始pug，scss， babel，hmr 環境，馬上就能進入開發模式。少了框架的幫忙，他必須手刻 pwa，spa，code splitting 和 routing，所以。最後他決心將整個專案用 react 重寫，但後來分離至另外乙個 repo 了。
作者一開始決定從 xp 視窗的拖曳以及伸縮著手，期間經歷 了getboundingclientrect 的 left、top 以及 mousemove 的（ clientx， offsetx，pagex，screenx）各種折磨， 才讓他真正了解其中的區別，最後他做的是不受 scroll 影響的元素拖曳和伸縮。
在元素伸縮時，加入 cursor: resize；系列是不可或缺的，然而單純的 :hover 會在快速伸縮時因為超過元素範圍讓 cursor 變回 default，想了很久以後他決定蓋乙個全版 div，讓 cursor 怎麼滑都保持 resize！
在這裡，作者最後的寫法是遍歷乙個 json 檔，產生相應的目錄結構，但較麻煩的是為了符合 xp 的行為，需要自己控制選單反白的狀態。
每個下拉列表都有四欄，中間的兩欄（選項名稱和快捷鍵）長度不固定，且內容要對齊該欄左側，作者在這裡選用grid來解決：
display: grid;grid-template-columns: 16px auto auto 15px;為了完全模擬踩地雷的行為，將 mouse event 的 button 和 buttons 屬性組合了一下才完成，複雜的狀態則使用 usereducer 來管理。
mouseevent.button 代表觸發事件的按鍵（1 左鍵 2 右鍵）
mouseevent.buttons 代表觸發事件時按鍵的狀態（1 左鍵 2 右鍵 3 雙鍵）
手機版：
開啟關機選單時，為了讓全版畫面變成灰階但保持目錄的顏色，sh1zuku使用了 portal，讓選單 render 時可以插入特定的 dom 位置又保持事件溝通，時常用在突破 overflow: hidden; 限制。
sh1zuku還分享了一些其他細節：
多個 box shadow 會由前到後覆蓋，如下，影子會是黑色：
.dot.container在這個過程中為了完全符合 xp 視覺，sh1zuku不斷微調 layout 和顏色，也花了很多時間在圖示上，其實有許多次「到此為止吧」的念頭。不過也理清了他自己在 layout 的錯誤觀念，且只要發現跟原生 xp 不同的地方，不改完就覺得渾身不對勁，為此他還特地裝了 xp 虛擬機器 xd。
參考鏈結
更多鏈結
github：
用-react-刻-xp-一路上的點點滴滴-7440e8bc9b73
前端大神用React刻了乙個Windows XP
近日，一前端大神sh1zuku用react刻出乙個 windows xp，頁面中的兩個windows xp視窗可以自由拖曳，而且作者還製作了乙個踩地雷的遊戲，可以直接上手玩。作者也將這些實現的過程在medium上記錄了下來，以下全文就是infoq對其內容的整理。n n n sh1zuku表示，他原本...
前端大神用React刻了乙個Windows XP
近日，一前端大神sh1zuku用react刻出乙個 windows xp，頁面中的兩個windows xp視窗可以自由拖曳，而且作者還製作了乙個踩地雷的遊戲，可以直接上手玩。作者也將這些實現的過程在medium上記錄了下來，以下全文就是infoq對其內容的整理。sh1zuku表示，他原本是以 van...
前端大神用React刻了乙個Windows XP
近日，一前端大神sh1zuku用react刻出乙個 windows xp，頁面中的兩個windows xp視窗可以自由拖曳，而且作者還製作了乙個踩地雷的遊戲，可以直接上手玩。作者也將這些實現的過程在medium上記錄了下來，以下全文就是infoq對其內容的整理。sh1zuku表示，他原本是以 van...