Next.js 如何在 App Router 中使用 Context?
自從 Next.js 推出 App Router 後,讓開發者可以輕鬆使用強大的路由功能,但是同時也帶來一些在使用 React Hooks 的限制。本篇文章將探討如何在 App Router 中有效使用 useContext 等 hooks 來傳遞 props,並解釋為什麼在某些情況下不能在 Server Component 中使用 hooks。
什麼是 App Router?App Router 是 Next.js 13.4 版本引入的一項重大更新,它徹底改變了我們使用 React 的方式。這個新的路由系統是基於 React Server Components,為開發者提供了更強大、更靈活的工具來建立高效能的網頁應用。
App Router 的核心特性:
React Server Components:這是 App Router 的基礎。Server Components 在 Server 端運作,而不是在 Client 端。這代表著它們可以直接使用伺服器資源(如 DataBase),而不用將這些資源暴露給 Client 端或通過網絡傳輸不必要的數據。
巢狀路由和 Layout:你 ...
React 19 Beta 新武器解鎖體驗
經過長時間的等待,自從 React 18 在 2022 年推出以來,React 19 Beta 版終於在近期與開發者見面了。作為 React 18 的下一個主要版本,React 19 帶來了許多讓開發者心動的新特性,這次我們就先來一探究竟有什麼新的功能。
useTransition在前端操作中,經常會碰到需要更新狀態的情況,例如:使用者點擊按鈕後,需要更新 UI 來響應這個操作。然而,有些狀態更新可能計算量較大或者涉及非同步操作,執行時間較長。
以下是一個範例,當使用者輸入名字後,點擊按鈕,會呼叫 API 更新名字,並且在更新過程中,按鈕會變成不可點擊的狀態。updateNameAPI 這個函式會模擬 API 的行為。
12345678910111213141516171819202122232425262728293031323334353637383940import { useState } from 'react'const updateNameAPI = async (newName) => { return new ...
使用 Leptos 建立和部署 WASM 到 GCP
這篇文章是由 Google Developer Group(GDG) 主辦的 DevFest Taipei 2023 其中的一個議程,主題是 - 使用 Leptos 建立和部署 WASM 到 GCP。
什麼是 Leptos近年來,Rust 語言越來越受到關注,而有關 Web 端的生態系更是蓬勃發展,不管是前端還是後端,都有許多優秀的框架可以使用,而 Leptos 就是其中一個框架。
那麼 Leptos 有什麼特別的呢?
Leptos 標榜是一個全端框架,話雖如此,但還是以前端為主,真要說的話,其角色有點類似於 Next.js。而 Leptos 提供了兩種 render 的方式,分別是:
Client-side rendering(CSR)
Server-side rendering(SSR)
而不管是哪一種 render 的方式,都是使用 WASM 來實現的。
作為效能優異的 Rust 語言,Leptos 也不例外,其效能也是非常優秀的,如上圖 Leptos 官網所示,Leptos 的效能比起其他框架來說,是非常優秀的。
什麼是 WASMWASM 是 WebAssembly 的縮 ...
Rust Web 之旅:新時代的後端開發
這篇文章是 2023 COSCUP Rust 議程軌之一,介紹 Rust 在後端開發的應用,以 Tide 為例。
Rust 已經連續多年成為 Stack Overflow 最受歡迎的程式語言,在 2023 年的調查也毫不意外的再度奪冠。
許多公司紛紛將 Rust 應用在產品上,例如:Amazon、Meta、Microsoft、Google 這些大公司,並且帶起一股似乎什麼都可以用 Rust 來重新改寫的風潮。
既然 Rust 這麼猛,那麼是不是也可以運用在網頁開發上呢?答案是肯定的,現在已經有許多的框架可以用來開發,想開發前端沒問題,後端框架更是如雨後春筍般的冒出來,例如:Rocket、Actix、Warp、Tide 等等。
從 JavaScript 的角度學習 Rust身為網頁開發者,多多少少都會使用 JavaScript,所以從 JavaScript 的角度來學習 Rust 會比較容易理解。
宣告變數12let x = 5; // mutableconst y = 10; // constant
123let x = 5; // immutablelet mut y = 10 ...
淺談在 2023 年的 React 還需要 Redux 嗎?
淺談在 2023 年的 React 還需要 Redux 嗎?前幾天在推特上看到有人提問標題這個問題,有些網友回覆 Redux 太複雜,建議改用其他的狀態管理套件。也有網友提出 React 都有 context API 來處理跨元件狀態了,根本不需要 Redux。
在這個問題上,許多開發者可能會有不同的觀點,但讓我們先從最基本的 React context 開始比較,然後再探討 Redux。
首先,我們來看看 React 的 context API。React context 提供了一種方式來共享值,例如這些值是全域的,例如主題、語言偏好等等,而不需要手動將 props 傳遞過多層。然而,當我們使用 useContext 並搭配 useReducer 來作為全域狀態管理時,所有使用該 context 的元件將會在 state 變更時重新 render,不論他們使用的 state 部分是否有改變。如果你有一個沒有被 useCallback 包裹的處理器,那麼虛擬 DOM 比對將會失敗,這些元件將會導致 DOM 更新。當然你可以有多個小的 contexts,但這樣你就會有多個狀態的來源,這可 ...
React Native x Expo x TypeScript 實作計算機
讓我們來用 React Native 和 Expo,還有 TypeScript 來寫一個計算機手機 App 吧!
什麼是 React Native?React Native 是一個用於構建移動應用程序的 JavaScript 框架。可以讓開發者使用 ReactJS 為 iOS 和 Android 平台創建手機 App。 React Native 提供了一套預構建的組件,可以用來構建應用程序的用戶界面,使得創建移動應用程序變得快速而簡單。
什麼是 Expo?Expo 是一套用於構建和部署 React Native 應用程序的工具和服務。它為開發者提供了一個平台,可以在各種設備和平台上輕鬆設置、運行和測試他們的 React Native 應用。 Expo 還提供了一系列的 library 和 API,可用於為應用程序添加功能,如照相、推送通知等。
建立專案首先來建立專案,如果這個專案取名為 calculator,那麼就執行以下指令:
1npx create-expo-app calculator --template
因為我們要使用 TypeScript,所以我們要選擇 blank (T ...
React.js 全攻略班推薦給想要精進自我的前端工程師
作為一名前端工程師,由於在日常工作中經常使用 React.js,而且也非常地喜愛這個前端框架。所以,為了更加了解 React.js,並且能更精進自我,我決定選擇了「React.js 全攻略 - 入門到進階」這門課程,由五倍紅寶石舉辦,並由奶綠茶老師教導。
為什麼選擇這門課?為什麼選擇上這門課?首先是因為我本身對 React.js的興趣,希望在這門課中學到更多的知識。其次,五倍紅寶石在業界十分著名,師資團隊一字排開都是業界的大神,也都擁有豐富的教學經驗,因此我對這門課非常感興趣,也覺得可以為我的職涯帶來幫助。
這門課帶給我什麼幫助在這門課中,我學到了很多實用的知識。老師會由簡入深帶領我們一步一步學習,老師自己也準備許多有趣並且實際運用的專案。平常一些覺得枯燥乏味的部分,在幽默風趣的奶綠茶老師講解後,也都覺得非常的生動活潑。例如 React.js 元件的生命週期、處理資料與狀態管理等。這些知識不僅讓我更加了解 React.js,也知道了一些程式碼底層如何運作,對於 React.js 有非常深刻的了解。
除此之外,奶綠茶老師也教導我們一些在開發實戰的經驗與技巧,還有如何讓 React 能夠 ...
使用 Jest 和 React Testing Library 進行測試的方法 - 測試列表
前言本文將涵蓋測試列表、測試列表內容、以及測試 App 元件。我們依然會使用 Jest + React Testing Library 來實現測試。
測試列表接下來接續上一篇未完成的測試,我們來測試一個列表的元件,這個元件會接收一個陣列,並且將陣列中的每個元素渲染成一個列表項目。
如果不想翻到上一篇文章,可以直接看這個 Demo。
那麼首先在測試之前,要先來看一下這個元件預期會怎麼呈現。
預期會透過 props 傳來一個 users 這個陣列,並且將陣列中的每個元素渲染成一個列表項目。
必須要確保是否正確呈現列表項目,所以我們可以這麼寫測試:
1234567891011121314import { render, screen, within } from '@testing-library/react'import List from "./List"test('it renders a list of users', () => { const users = [ { ...
使用 Jest 和 React Testing Library 進行測試的方法
什麼是測試?以及為什麼需要?好的,什麼是測試?
測試的目的主要是想驗證我們所開發出來的東西是否按照預期的功能運作。
測試也是確保軟體品質的重要步驟,在撰寫完程式碼之後對其進行檢查,以確保功能是正確的。而測試也可以讓開發者在過程中確定自己的開發是否正確,既可以增加開發者的信心,也可以讓開發者在開發過程中更加清楚自己的開發方向。
當然我們可以透過手動測試來驗證,但是這樣的話會花費大量的時間,而且也不夠精準,因此我們需要一個自動化的測試工具,來幫助我們測試。
因為測試因為目的的不同,所以也有不同的種類,例如有分成 Unit Test、Integration Test、End-to-End Test 等等。當然還有其他的種類,但主要是以這三種為最常見,也最為流行的種類。
Jest 和 React Testing LibraryJestJest 是一個由 Meta 所維護的 JavaScript 單元測試框架,由於提供了基於 JavaScript 的測試環境,適合讓開發 JavaScript 的程式進行測試,例如三大前端框架 React、Vue、Angular 都可以使用。它具有自動化測試、快速 ...
Rust x React
終於到最後一天了,看到這篇文章覺得很有趣,所以今天我們來玩一下 Rust 跟 React 的結合吧!
開始專案首先我們先建立一個新的專案,這邊我們使用 create-react-app 來建立一個新的專案,並且使用 yarn 來安裝相依套件。
123$ yarn create react-app rust-react$ cd rust-react$ yarn
建立 Rust接下來我們在專案中建立一個 Rust 的 library:
1$ cargo new wasm-lib --lib
然後會在專案中看到一個 wasm-lib 的資料夾,裡面會有一個 src 資料夾,裡面會有一個 lib.rs 的檔案,這個檔案就是我們的 Rust library。
因為我們預計想要做一個可以點擊加減的按鈕,然後回傳計算結果,所以我們可以在 lib.rs 中加入:
12345678pub fn calculator(a: i32, b: i32) -> i32 { a + b}#[test]fn cal_test() { assert_eq!(1 + ...