文章

redux-toolkit 在 axios 中使用

修改 redux 狀態不會只有在頁面中,打 api 的時候也會需要,但是useDispath他只能讓你在hook中使用。

閱讀更多

react craco 環境變數切換

craco 在craco build的時候,會主動去找 .env.production 檔案,但是如果我想要craco build的時候是先用.env.development試試看呢?

閱讀更多

react 動態載入 function component

在做大型專案的時候,要切換的頁面往往會到幾十頁,這時候一般的導入頁面的寫法可能會讓你瘋掉。

閱讀更多

react + antd + craco 自定義主題

很久沒寫 react 了,突然發現這個多變的世界多了一個叫做 craco 的東西,不知道是幹嘛的,但是antd官網推薦要是你想要自定義主題,例如要修改他們的less,可以用 craco。

閱讀更多

完全免費,超多來源! Free React Icon Font 圖庫

通常如果專案有使用ui框架的話,他們都會有自己的免費 icon 可使用,但是你如果是自己手刻,又懶得自己畫一個 icon 出來,就可以只安裝 icon 圖庫。

閱讀更多

React Next.js 如何設定路徑別名 alias

我們知道專案的一些基本設定,通常都會需要寫在某個 config 檔案中,但是創建 next.js 的專案時,初始他不會自動幫你產生 config 檔,所以我們要自己創建。

閱讀更多

React + React-Redux + Redux-Toolkit 新手教學

一個平凡的下午,小口小口啜飲著有點燙口的紅茶拿鐵,突然看到前端對話群組掀起一陣討論,討論著新案子的style解決方案,是要用上次我們一起看到的 Taiwindcss 呢?還是 styled-components 呢?

眾多討論串中,我看到了一句話,讓我的下午變得再也不平凡…

他是這樣說的:

你們決定好就好,但資料流的部分我先安裝 Saga 囉!

閱讀更多

React實作上傳檔案預覽圖片

這是我想要實現的樣子:在一個卡片中點擊上傳檔案,上傳後的照片不能超出我設定的框框,太高就左右留白,太長就上下留白。

閱讀更多

新手安裝storybook在react專案上

跟團隊一起開發專案的時候,每個人自己都會包許多自己有用到的component,可是當我們去看別人寫的元件時,很難一眼就看出這個元件的外觀長怎樣、可以傳入哪些參數、傳入的參數有什麼作用…等,甚至我們都需要先在某個頁面把這個元件引入來預覽,可是又因為不知道要傳哪些必填參數,倒是元件也顯示不出來。

storybook 就是在專案中幫你建立一個頁面,顯示所有有建立stories(stories是一個副檔名有.stories.js的檔案,例如:Button.stories.js)的 component,並且下面會有控制項讓你切換看看哪些參數分別會有哪些效果,這樣就可以很快速地知道別人的元件要怎麼使用,脫離瞎子摸象的開發方式。

閱讀更多

在storybook的doc中新增props的arg下拉選單

 

這邊用的是storybook 6.1.14react,我記得太舊storybook的版本還沒有這個功能,建議都先升級到6以上的版本,但是輸出stories的寫法會不同,升級前須再確認一下喔。

閱讀更多