前述 雖然用一般的 css 就可以完成進度條，但為了符合主題，用了 canvas 來完成！ codesendBox import React, { useSt...
元件介紹 Skeleton 是一個骨架載入元件(Skeleton Screen Loading)，跟 Spin 不同的是，Skeleton 幫助我們在頁面載入完...
前言： 今天是第26天啦，阿森在整個開發的部分也差不多完成了，準備進入最後上架測試階段！ 在上架的部分阿森選擇使用firebase來當host，因為使用起來真...
在上一章Todolist with React (3)，使用 React-redux 完成了渲染任務清單、和任務新增刪除的動作，就讓我們繼續完成最後一個部分...
在上一章Todolist with React (2)，完成所有樣式設定後，現在就讓我們在 React 中加入 Redux，使用 React-redux 動態...
在上一章Todolist with React (1)，建立了專案環境、並且拆離 UI 設定好所有 Component 後，現在就讓我們使用套件 Styled...
終於差不多進入30天前端技能樹之旅的尾聲，最後就來利用系列後半部所學的 React，搭配 Redux、Styled-components 來個小試身手，實作一個...
tags: 2021鐵人賽 React 上一篇確認過API內容之後，剩下的部份就是串接API，並將資料呈現在畫面上了，雖然描述起來是短短兩句，不過還是寫了好多的...
今天要實作的是 TextField ，雖然是參照 Material-UI 的概念，但在這邊只是實作個外殼，必沒有要像 Material 那樣 Input 和...
前述 今天終於久違的真正完成了一個項目，一起來看看效果跟 code 吧！我就直接在 code 裡註記 操作囉～ codesendBox import { us...
前言： 幾個基本的頁面都設計得差不多啦～這次的挑戰也快接近尾聲了！今天就讓阿森來介紹一個有點小特效的問答頁面要怎麼寫吧！ 效果： 可以看到當我們滑下來的時候...
【前言】這個 IT 鐵人的比賽，一開始是 Sen 問我要不要比，我本來是沒有多大興趣的，因為不會得名，也沒想到有什麼好寫的。只是接了 DINO 的工作之後，認...
tags: 2021鐵人賽 React 一般來說在開發階段，前端與後端會討論資料需求，讓API產出的內容能夠滿足前端畫面的需求，不過這次因為是串接外部的API，...
元件介紹 Spin 是一個載入狀態元件，當頁面正在處理非同步行為，或需要讓用戶等待的作業時，用來顯示以緩解用戶等待的焦慮。 參考設計 & 屬性分析 一個...
實作第二篇要來介紹的是 Portal 系列的實作，會一路從 Portal 實作到 Popconfirm，Overlay、Modal 就等之後有機會再做了！ 開...
大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會...
元件介紹 Pagination 是一個分頁元件，當頁面中一次要載入過多的資料時，載入及渲染將會花費更多的時間，因此，考慮分批載入資料的時候，需要分頁元件來幫助我...
tags: 2021鐵人賽 React 接下來幾篇都會串接Finmind這個開源API，本篇就先來理解一下Finmind有哪些資料可以使用。看了一下官方網站的資...
前言： 昨天我們介紹了一個普通的資訊頁面是如何完成的，今天我們要來介紹另一個很常用到的頁面種類，資訊卡頁面！ 那廢話不多說，先來看看效果吧！ 長這樣： 再來...
從今天起到結賽都會是實戰演練的環節了！ 接下來的日子真槍實彈、彈無虛發，帶大家從理論走向實踐，把一些基本的元件實作出來吧！ 這篇章會怎麼實作？ 老樣子我的風格...
嗨！今天的主題是加 analytics 到網站 (專案) 裡～ 講到 analytics，大家通常會想到 Google Analytics，所以今天會分享怎麼加...
元件介紹 Tabs 是一個選項卡切換元件，能夠在同一層級的內容組別當中導航、切換。此元件由兩個部分構成，一個是讓使用者點擊的導覽頁籤 Tab，一個是對應的內容...
前言： 做完網站最基本的導覽功能後，接下來要進入的就是我們的頁面了！在製作頁面的同時，阿森也會善用React的特性，也就是製造出重複利用性高的元件，像是製作一...
tags: 2021鐵人賽 React 先從mobile版型的頁面來看，可以分為幾個部份，如下圖： 分為最上面Title、TaiwanStock、USStock...
今天終於來到 UML 的最後一篇了，要來接著把沒介紹到的常見 UI 元件介紹完，那就廢話不囉唆直接進入正題！ Table 網頁中的大魔王 Table，作為呈...
元件介紹 Drawer 抽屜元件，由螢幕邊緣滑出的浮動面版，常見的應用是作為導航用途，例如 Navigation drawers。 參考設計 & 屬性分...
tags: 2021鐵人賽 React 2.0首頁想加上各國股市的最新盤勢資訊，畢竟這些資料是投資人每天都會需要看一下的，所以放在首頁會是不錯的選擇。 首頁會放...
前面把有依賴關係的 Component 都講一講之後，今天就來帶過其他的 UI 元件吧，因為想介紹的元件還有點多，因此會區分成兩天，今天主要講的是 Navig...
昨天介紹 Service Workers 後我們知道它是 PWA 的要素之一，且也是讓 Web App 實現離線瀏覽的關鍵技術。今天我們將延伸昨天的知識，介紹...
嗨大家～ 像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需...
雪莉
Taiming
Cooksuhr
May
Sean Liu
parkerhiphop027
ALu
Jade
莫力全 Kyle Mo
iThome鐵人賽
看影片追技術