跳至主要内容

11 篇文章 含有標籤「React」

查看所有標籤

· 3 分鐘閱讀
Eric Cheng

從使用 Create React App 轉到 Vite,有很多不熟悉的地方,這篇文章簡單的對 Vite 在不同環境設定不同變數做簡單的筆記

不同的環境有不同的環境變數值是很正常的,ex 開發環境連開發環境的後端,正式環境連正式的環境的後端,開發環境有開發環境的 api key,正式環境有正式環境的 api key, 之前用過 npm-config,處理過類似的需求,不過 Vite 自己就內建處理這類需求的方法

· 2 分鐘閱讀
Eric Cheng

放上一個測試用的 React 小專案到 Netlify,在 local 執行正常,在網頁上點選連結也正常,但如果把連結記下來傳給別人或直接重新整理頁面都會變在 404

建立專案使用的是大家都在用的 Create React App,Router 用的是大家都在用的 React Router,好像不應該有問題才對

· 6 分鐘閱讀
Eric Cheng

Firebase 系列文的第三篇,這篇文章會簡單介紹如何使用 Firebase 的 Authentication 功能來管理會員帳號。

相信很多使用者都對網站的會員功能常有資安的疑慮,擔心自己的帳密會不會被網站拿去做什麼其他的用途, 事實上網站的開發者更討厭去管理使用者的帳密,尤其是個資法有相當多的限制,對帳密這類的資訊是能不碰就不碰, 但網站有時不得不需要有會員的功能,這時第三方的會員帳號管理就很好用了。

而 Firebase 就提供 Authentication 的功能,簡單的說就是網站不直接管理使用者的帳密,而是透過 Firebase (Google) 去管理,如果有資安的問題就是 Google 的問題,和網站無關

· 5 分鐘閱讀
Eric Cheng

一個需求,需要在原來的 React PWA 專案中增加接收訊息通知的功能,簡單寫了個筆記,因為需求較複雜了點,還會牽扯到 firebase,為了單純起見,這篇文章僅僅介紹到 PWA 的 push 和 notification 部份

· 5 分鐘閱讀
Eric Cheng

什麼是 PWA

全名:Progressive Web Apps,中文翻成「漸進式網路應用程式」,不過講中文可能沒有人聽的懂

簡單說這是 google 製定的一個標準,可能讓你的 web 專案,看起來像是一個手機 App,它有兩個核心

· 2 分鐘閱讀
Eric Cheng

使用 iframe 是最直接的方法,在 youtube 影片點選右鍵,選「複製嵌入程式碼」,可以得到像下面的這段程式碼

<iframe width="640" height="360" src="https://www.youtube.com/embed/daVASrwlU9c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

把這段程式碼貼進 React 可以運作,但是沒有 RWD 的效果,google 了一下找到解法,不多廢話,直接附程式碼