Package | WeiWei 的前端程式教學與筆記

📄️ [react] React 使用 Google 帳號登入網站

而登入的方式我們使用彈出視窗 (signInWithPopup) 的方式，意思是點擊登入按鈕後，會有視窗彈出，詢問使用者要用哪隻 Google 帳號登入。

React Icons 是一款熱門的 Icon 套件，它將各大 Icon Library 彙整在一起，讓我們在 React 專案內可以很快速的挑選想要的 Icon，也可以針對 Icon 的大小即顏色進行調整。

今天要來介紹如何使用 React Router 來實作 Protected Routes，意思是我們可以將 Route 設定權限，當使用者登入時或具備某些權限才能夠訪問該 Route (頁面)。

React 在 data fetch 上是較不方便的，不依靠第三方工具來處理資料的話，以下的功能需經過複雜的處理才有辦法達成。

如果要使用 Redux Toolkit 的 slice 實作 async await 去取得 API 資料的話，會需要自訂一個 action creator，在 action creator 裡面還需要使用到 dispatch，這是一件不太方便的事情。

React教學 - React Router v6.4 詳細介紹 (loader、useNavigation、ErrorHandling、useRouteError)

React教學 - React Router v6 介紹 (Link、NavLink、Nested Routes、Outlet、useLocation、useRoutes、useNavigate)

介紹 React Router v6 與 v5 之間的差異

React-Slick 套件能夠讓我們快速的建立輪播效果(carousel)，這篇主要介紹 slick 參數及 CSS 如何設定。

React-i18next 是一個在 React 應用程式中實現國際化（i18n）的強大工具。它建立在 i18next 套件的基礎上，提供了對於多語言支援的便利性和彈性。

這篇是要來教如何使用Redux Toolkit，和以往不同，Redux Toolkit 簡化了許多。