可能是題目訂的太大，感覺會做不完啊剩下8天 差不多該開始前端的部分了 好，開始玩React node.js安裝 首先要安裝node.js，node.js是一個很...
前言： 接下來要來完成我們網站的導覽部分了，這裡阿森主要分為兩個大項目，分別是Navbar和Sidebar。Navbar就是一般看網頁時會浮在最上面的導覽選單...
tags: 2021鐵人賽 React 上一篇將選單列做出來，並且完成點擊上方按鈕會跳轉至對應頁面的功能，不過總覺得好像少了些什麼？原來是點擊按鈕之後，按鈕的樣...
元件介紹 Select 是一個下拉選擇器。觸發時能夠彈出一個菜單讓用戶選擇操作。 這個元件我們底層就能夠使用我們上一篇所提到的 Dropdown 來實作。 參考...
如果你聽過 PWA，那麼對今天的主題ㄧ定不陌生，因為今天要講的 Service Worker 就是 PWA 的一個重要元件。不過 PWA 這個主題本身就已經足...
今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～ Setup 這專案想要用 Next.js + TypeScript 寫，所以用下面指令...
前情提要：在上一篇網頁UI組件化 — React component，大致了解 React 最重要的核心 — Component，並且學會了在組件內控制資料...
元件介紹 Dropdown 是一個下拉選單元件，當頁面上的選項過多時，可以用這個元件來收納選項，透過滑鼠事件來觸發選單彈出，點擊選項會執行相對應的命令。 參考設...
前情提要：在上一篇現在開始用框架寫網頁 — React，我們學習了如何在 React 使用 JSX 撰寫 Element 呈現出網頁頁面，接下來就會帶著大家將...
tags: 2021鐵人賽 React 如Day15的wireframe，為了要加上更多的功能，因此要在頂端列新增幾個按鈕，每個按鈕代表不同的路由，而不同的路由...
元件介紹 Breadcrumb 是一個導航元件，用於顯示當前系統層級結構中的路徑位置，並且點擊路徑能返回之前的頁面。在系統有多個層級架構，並且希望能幫助用戶清楚...
今天是 Build Optimizations 主題的最後一篇了，到目前為止我們已經認識了 Code Splitting, Dynamic Import 還有...
tags: 2021鐵人賽 React 前一篇提到的導覽列的各個按鈕，點擊之後會跳到不同的頁面，每個頁面都會是不同的路徑，這個功能可以使用react-route...
元件介紹 Infinite scroll 能在面對多筆資料時，讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料，對於後端的資料計算、資料...
有了總體經濟的圖表之後，接下來就要來製作各國股市的資訊站，筆者最常看的就是台股的資訊，其次則是美股、英股、歐股、日股、匯率、利率...等等，想做的很多，剩下15...
UML Notifier 的 UML 主要是根據 Ant Design 的設計畫出來的，而在 Material 那邊是只有 Snackbar（ = Messa...
在昨天我們學會了 code splitting 與 dynamic import 的技巧，讓程式在打包時可以形成好幾個 bundle chunks，並在真的需...
元件介紹 Table 顧名思義就是一個表格元件，用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件，要組成一...
第~14~天～囉～ 假如有開發過 Web 的都知道， 假如要設定按鈕按下後的動作， 可在 html 上面加上 onclick 並綁定事件 like: <b...
阿毛
‧
2021-09-29
繼續昨天的主題，該怎麼用 Chakra UI 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design system)，那怎麼跟 Chakra U...
關於前面的小畫家 復刻小畫家先做到昨天作為最後一篇，接下來會帶各位，利用前其所學的功能，製作各種canvas 互動小東西！敬請期待。 這邊也附上前面的所製作的...
為什麼要使用框架？ 前端最重要的工作，就是讓網頁的資料與狀態視覺化，有資料狀態改變時，就要更動網頁內容的顯示。但當網頁內容複雜化，網頁元件、元件操作功能和資料狀...
tags: 2021鐵人賽 React 之前剛開始設計call api取得資料的時間點是在Card元件載入的時候才讀取，但是加上分頁功能之後，會發現一個問題，假...
Code Splitting 是一個非常重要的觀念，現代網頁程式漸漸走向使用框架以模組化方式來開發，通常會透過如 webpack 等 bundler 來 ug...
這篇要來談談小菜鳥一開始到現在用React的時候踩到的地雷 ! 最常見的忘記向下傳state就透過子類別使用了 後來小菜鳥的解決方法，是會在父類別將所有有可...
UML Portal 是什麼？ 開始之前，先說一下 Portal 其實是 React 比較常用的 Pattern，因此非 React 使用者可以斟酌一下怎麼...
說明 在選擇剪下時，我們可以建立一個新的 canvas來建立我們所剪下的內容 /** * 滑鼠點下畫布 */ const handleMou...
元件介紹 Carousel 是一個像旋轉木馬一樣會輪流轉的輪播元件。在一個內容空間有限的可視範圍中進行內容的輪播展示。通常適用於一組圖片或是卡片的輪播。 Car...
今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～ 講到 React，很多人會想到 Mat...
在很多很多的前置作業後 今天終於要開始寫code了 到此為止我們應該流程畫有了 畫面流程也有了今天很多努力終於可以建立前端專案了 這邊終於可以開始建立專案了這邊...
rei1997
Cooksuhr
Sean Liu
Taiming
莫力全 Kyle Mo
Jade
May
parkerhiphop027
雪莉
Ivy
shrine90459
iThome鐵人賽
看影片追技術