iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

雙向奔赴的websocket與冰冷的react 系列

本次會介紹一些基礎的websocket與react的相關知識與基礎應用

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊NUTC imac
DAY 21

[day21]Redux 異步操作

Redux-thunk Redux 本身處理同步狀態管理,即每個 action 都會立即被 reducer 處理。然而,現實中我們經常需要處理異步操作,比如從伺...

2024-09-29 ‧ 由 oLunao 分享
DAY 22

[day22]Redux devtools調試工具

最後來說說Redux Devtools調試工具吧 這個東西可以直接到Chrome下載即可,他會追蹤你React state和action的工具,簡單來說就是更...

2024-09-30 ‧ 由 oLunao 分享
DAY 23

[day23]React Router 基礎介紹與路由設定

React Router vs 傳統的多頁應用 React Router 是一個用來處理單頁應用程式(Single Page Application, SPA)...

2024-10-01 ‧ 由 oLunao 分享
DAY 24

[day24]React Router動態路由與導航

基本動態路由 動態路由是通過在 Route 的 path 中使用參數來實現的,例如 /user/:id,這裡的 :id 是一個動態參數,可以根據 URL 的變化...

2024-10-02 ‧ 由 oLunao 分享
DAY 25

[day25]React Router 路由守衛與嵌套路由

路由守衛? 路由守衛的核心思想是在某些路徑訪問之前進行檢查,比如檢查用戶是否已經登入。若未登入,則可以重定向到登入頁面。 假設情境:我們有一個「儀表板」(Da...

2024-10-03 ‧ 由 oLunao 分享
DAY 26

[day26]WebSocket 與 React 基礎:建立 WebSocket 連接

最後就來慢慢將兩者結合吧,先來基礎連接 建立連接 首先當然是建立兩者的環境 CRA npx create-react-app ws-app cd ws-ap...

2024-10-04 ‧ 由 oLunao 分享
DAY 27

[day27]WebSocket 與 React 的狀態管理:實時更新數據(時鐘)

在現代的網頁應用中,實時更新數據已經成為一種常見的需求,例如即時聊天、實時數據分析等。WebSocket 提供了在客戶端和服務器之間進行全雙工通信的能力,使得我...

2024-10-05 ‧ 由 oLunao 分享
DAY 28

[day28]WebSocket 與 React 使用者對話

ITHOM進入尾聲了,最後來玩下有趣的東西吧 這次我們要做的是實現網域內溝通,只要在同個 ws server下client端可相互傳遞訊息 主要內容為1.Ser...

2024-10-06 ‧ 由 oLunao 分享
DAY 29

[day29]websocket與React : 獲取外部資料渲染

在這篇文章中,我們將展示如何使用 Node.js 來連接外部 API(如 CoinGecko 的比特幣價格 API),並通過 WebSocket 將比特幣的實時...

2024-10-07 ‧ 由 oLunao 分享
DAY 30

[day30]結語

結語 在這一系列章節中,我們探索了 WebSocket 與 React 的結合,並了解了如何利用這兩者構建高效、即時的前後端通信系統。WebSocket 作為一...

2024-10-08 ‧ 由 oLunao 分享