終於進到我們最後的部分,「checkout」接下來我們會來看在這個專案中結帳的流程是怎麼進行的 我們以們前幾天的課程為例首先我們看到,如果課程為「0元」的情況分...
今天我們看到課程的簡介頁 在課程簡介頁中最上方為 Banner 區塊他顯示課程封面圖、標題和標籤在封面圖的部分做了放大和模糊具體的實作方是如下: import...
我們昨天大概看了一下探索課程頁今天我們來看看「ProgramCollection」和 「ProgramCard」這兩個元件 ProgramCollection...
昨天我們把 Blog 部分結束今天接著看 Program 的部分 Program 分為「探索課程頁」和「課程內頁」我們今天一樣先從探索頁開始 ProgramCo...
昨天我們看完了文章總覽頁今天我們進到文章內頁 程式碼如下: import { Icon } from '@chakra-ui/icons' // ~中間略~...
在昨天小小的 Review 過後今天我們正式進入到功能 首先我們先看到「Blog」頁面 Blog Blog 分為「文章總覽頁」和「文章內頁」我們今天先來看到文章...
時光飛逝,鐵人賽已經進行了三分之二在進入專案功能之前,我們複習一下之前東西 Tech Stack 我們了解到專案他具體使用了哪些技術,哪些技術在 React 開...
我們昨天看完了 react-intl 在專案中的使用方式今天我們來看,專案中是如何規範翻譯 規範 在專案的早期,翻譯檔都被放在 「helpers/transla...
昨天簡單介紹了一下 locales 是什麼今天來看看「react-intl」 react-intl 使用 react-intl 很簡單npm 安裝好後,只要在...
昨天我們把 component 的部分結束今天來看看 locales 的部分 locales locales,中文翻譯「語言環境」我們很常看到一些 Open S...
上一篇我們講完了 Component 的結構今天來講講 return 部分 <></> 這是我們在開發中,很常遇到這個的報錯「JSX e...
[紀律之影響] 看個有趣的訪問: Jocko Willink 曾在海豹突擊隊服役,他是海豹三隊「布魯瑟任務小組」(Task Unit Bruiser)的指揮...
昨天我們看完 styled-components今天來看 Component 裡面的結構 component structure 以 ProgramCoinMo...
昨天我們講完了 UI Library今天來看專案裡的 component 以前寫的 CSS 以前還在寫 PHP 的時候,很多時候都會需要撰寫前端在寫前端樣式的時...
昨天講完 Ant Design再來我們來看 Chakra UI 和息息相關的 lodestar-app-element Chakra UI Chakra UI...
今天進到了 UI Library 的環節 UI Library 當我們在前端進行 UI 開發時有時候為了加快開發速度(或懶得開發)會使用現成的 UI Libra...
Basic 的部分來到了最後一篇我來看看專案的 Branch & PR Git 回想起我的第一份工作,當時對 Git 超級不熟公司和我自己都沒什麼在做版...
我們今天繼續看其他 Helper getFileDownloadableLink 從後端取得檔案在 S3 的下載連結 downloadFile 首先先產生一個...
昨天我們看完了 type,今天接著講 helper Helper Helper,全名「Helper Function」輔助函數我們也在前面提到 在開發的過程中...
今天來看看讓我又愛又恨的 type type 眾所周知,JavaScript 本身是弱型別的語言他會根據你賦予的值,來判定當前的型別在 JavaScript 中...
今天我們來看 Routing 路由的部分 Routing 在 Client-Side-Rendering (CSR) 的開發中沒了路由,就像是斷了腿的跑者由此可...
昨天我們講完了檔案的命名今天我們來看變數的部分 Variable 正如上一篇所說 好的命名,能讓接手的人或者參與開源專案的人,更容易了解每個檔案他是在做什麼的...
相信身為 .NET 工程師的大家在開發的過程中肯定聽過 Resharper 的存在其中其所提供的一項功能便是原始碼的查看然而在 VS 2019 中這項功能其實微...
昨天講完了 root 根目錄今天我們來看 src 裡面放了什麼吧 src folder components 只要是「共用」的元件都會存放到這個資料夾底下依照...
昨天我們介紹了這個專案和他所使用的技術今天我們接著來看 Folder Structure 根目錄 首先我們看到根目錄在根目錄我們可以看到一些設定檔 .env 在...
簡介 lodestar-app 為「urfit-tech」所維護的開源 React 專案 此專案為多租戶技術架構(multi-tenant architectu...
為什麼想參加這次的鐵人賽? 回頭看自己從接觸React到現在,其實也才半年在這短短半年中,從一個只會用jQuery幹出前端畫面的工程師到現在可以用React進行...
七年前,我在跟主管討論我手頭目前使用開源函式庫來進行程式編輯時,老闆問了一個問題:『為何他們願意提供免費產品?』,當時我的回答只有一句:『因為有人幫我們付了錢,...
今天接續昨天繼續分享第一次貢獻開源專案的心得。 第二步:閱讀 CONTRIBUTING.md & 開發 通常一個完整的開源專案,都會提供一個文檔讓想貢獻...
鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...