使用 Sancutm 實作 React SPA 認證

Sanctum 是一套輕量化的 API 認證機制套件。本文會介紹如何使用 Sanctum 支援 React 單頁應用程式認證(會員登入)。我們假設應用程式的前端和後端使用相同 TLD 頂級網域下的子網域,如此才可以使用 Sanctum 基於 Cookie 的驗證流程。利用這種作法可以省去處理 API Token 。為此我們使用 Homestead 設定兩個網域 api.sanctum.test 指向 Laravel 專案的 public 目錄用於提供後端,sanctum.test 指向另一個目錄提供前端的部分。

繼續閱讀

分享到

[譯] 詳解 React 渲染

原文出處

本文主旨於介紹 React 渲染的行為,包含使用 Context 和 React-Redux 之後的渲染行為。

我已經見了太多關於渲染的問題並且這些問題仍然持續出現 - 什麼時候,為什麼 React 會重新渲染元件,如果使用了 Context 或 React-Redux 會如何影響重新渲染的範圍和觸發的時機。經歷了多次的解釋,似乎有這個必要將這些回答彙整成一個較完整的介紹。

注意:這些資訊網路上都已經有了,而且很多人都解釋過了,但人們似乎還是蠻困擾因為資訊散落而不容易有個比較完整的了解,所以這篇文章試著將這些問題整理說明清楚,希望能對您有些幫助。

繼續閱讀

分享到

手把手實戰部署 ReactJS 至 Amazon S3

本文嘗試盡可能實作最佳實踐,但部分設定請依據自身需求調整。

大綱

  • 建立一個簡易的 React 應用程式
  • 設定 S3 提供靜態網站託管
  • 部署
  • 進階實戰 - SSL 搭配自訂網域
  • 進階實戰 - S3
  • 進階實戰 - CloudFront
  • 進階實戰 - 自動化腳本

繼續閱讀

分享到

如何使用 React Hooks 搭配 Context API 取代 Redux 快速範例入門

本筆記為閱讀 How to Replace Redux with React Hooks and the Context API 後自行實作調整簡化之範例。對於希望直接從範例學習的讀者可自行練習,本範例並非非常完整的教學,不過在能帶給您在使用 Hook 和 Context 上一些啟發:

繼續閱讀

分享到

React Hooks 不是黑魔法,只是陣列

本文旨在提供一些關於 Hooks API 一些乍看之下奇怪的規範以及理解這些規範的見解。

繼續閱讀

分享到

[譯] 理解 React Hooks

為什麼要使用 Hooks

我們都知道元件是由上而下傳遞資料,藉此協助我們分解一個複雜的大型介面,利用較小單位的介面功能(元件)組成。這些元件各自是獨立的,可重複使用的。雖然理想上是如此,可是實務上我們卻常常無法拆解複雜的元件,使其變成更小的單元,那是因為其相關的邏輯和狀態無法被提取到其他 function 或元件中。

繼續閱讀

分享到

手把手設定 MediaConvert 轉檔 HLS 搭配 S3 + CloudFront

使用 S3 + CloudFront + MediaConvert

AWS Elemental MediaConvert 可以編譯您輸入的影音檔案並轉換產出其他格式的影音檔案。MediaConvert 可以從 S3 取得來源檔或者通過 HTTP 或 HTTPS。整體步驟如下:

  • 建立 S3 Bucket
  • 建立 SSL 憑證,後續 CloudFront 欲使用自訂網址
  • 設定 CloudFront
  • 設定 IAM 權限
  • 上傳 Video 使用 MediaConvert 轉譯

繼續閱讀

分享到

如何使用 react-intl

React 國際化

快速概覽:如何建置一個國際化的 React 應用程式。通過本文的協助您可以學會如何偵測使用者的本地資訊,將其儲存在 cookie 並允許使用者變更,提供不同語言的介面,適當的貨幣格式同時也包含一些常見問題的列表。

注意:本文為React Internationalization – How To 的翻譯/專案實作更新,大部分文章為翻譯原文,專案與實作則進行簡化與更新。該文由 react-intl 官方文件所推薦。
進行更新當下 react-intl 版本為 v2.9.0,因此稍微備註 v3+ 的一些警告。

繼續閱讀

分享到

Rails 6 Action Text 直接上傳圖片至 Google Cloud Storage 失敗

直接先備份參考解答

繼續閱讀

分享到

React Beautiful Dnd 快速使用筆記

react-beautiful-dnd 有 3 個主要元件:

  • DragDropContext - 建立一個可 DnD 的範圍。
    • onDragStart
    • onDragUpdate
    • onDragEnd
  • Droppable - 建立可以被拖曳放入的區塊。
  • Draggalbe - 可被拖拉元件

繼續閱讀

分享到