redux-toolkit 在 axios 中使用

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

閱讀更多
0

react craco 環境變數切換

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

閱讀更多
0

react 動態載入 function component

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

閱讀更多
0

react + antd + craco 自定義主題

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

閱讀更多
0

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

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

閱讀更多
0

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

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

閱讀更多
0

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

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

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

他是這樣說的:

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

閱讀更多
1+

React實作上傳檔案預覽圖片

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

閱讀更多
0

新手安裝storybook在react專案上

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

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

閱讀更多
0

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

 

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

閱讀更多
0