iT邦幫忙

react相關文章
共有 1849 則文章

技術 在 Next.js 前台接 LINE LIFF,我踩過的坑

我負責的預約前台是用 Next.js 寫的,而不少會員是從店家的 LINE 官方帳號點進來,所以一開始就接了 LIFF,讓會員可以直接用 LINE 登入。之後我...

技術 【Day 11】開啟多重對話宇宙:實現多話題清單(Chat Sessions)管理

一、 前言 在前幾天的文章中,我們已經成功讓「AI 酒館」支援多角色切換,並且每個角色都有獨立的記憶。不過,隨著和調酒師 Mark 聊得越來越深入,玩家可能會同...

技術 【Day 10】前端 AI 專案的資安防護:打造安全且直覺的 API Key 設定彈窗

一、 前言 在前幾天的文章中,我們已經順利將 Google Gemini API 串接進「AI 酒館」中。然而,在 100% 前端運行的 Vite 專案裡,使用...

技術 【Day 09】打造專屬微醺氛圍:動態主題色與背景光暈渲染

一、 前言 在前幾天的文章中,我們成功為「AI 酒館」建立了多角色獨立對話記憶,讓調酒師 Mark 與吟遊詩人 Bard 擁有各自獨立的對話宇宙。然而,如果切換...

技術 【Day 07】酒館的長效記憶:利用 localStorage 實現對話紀錄持久化

一、 前言在前幾天的文章中,我們的「AI 酒館」已經變得非常生動:不僅有精美的暗色介面、雙向語音支援、Gemini AI 動態對話,還有流暢的打字機特效與自動捲...

技術 【Day 06】營造酒館沉浸感:為 AI 回應加入打字機特效與聊天室自動捲動

一、 前言 在前幾天的文章中,我們的「AI 酒館」已經成功串接了 Google Gemini API,讓調酒師 Mark 與吟遊詩人 Bard 擁有了即時對話的...

My Project 市場資料介面的分母:「3 個歷史案例」到底代表什麼?

大家好,我是 NextCandle 的開發者。上一篇分享了相似 K 線與歷史後續走勢的比較介面。這篇想談一個具體的資料呈現問題:畫面上的「案例數」,究竟在數什麼...

技術 【Day 04】讓 NPC 開口說話:整合 Web Speech API 實現文字轉語音 (TTS)

一、 前言在前面幾天,我們成功為「AI 酒館」打造了介面,並實現了讓玩家透過麥克風「動口不動手」的語音輸入功能。既然是沉浸式的酒館,光是聽得懂玩家說話還不夠,我...

My Project NextCandle — 把相似 K 線與歷史後續走勢放在同一個比較介面

大家好,我是 NextCandle 的開發者。想分享這個已上線、持續更新的專案,以及在市場資料介面上做的幾個實作選擇。 看圖時,常會覺得「這段走勢以前好像看過」...

技術 【Day 03】讓酒館聽懂你說話:嘗試整合 Web Speech API 語音轉文字 (STT) 與實戰踩坑紀錄

一、 前言在前面兩天,我們透過 Vibe Coding 快速生成了「AI 酒館」的暗色調 UI 介面,並成功在本地端順利跑起來。身為一個沉浸式的酒館,如果全程只...

技術 【Day 02】Vibe Coding 初體驗:環境搭建與 AI 酒館第一個酒吧 UI 畫面

一、 今日目標與簡介今天的目標是透過 Vibe Coding 的方式,讓 AI 自動幫忙建立 React + Vite + Tailwind CSS 專案,並產...

技術 【Day 01】用嘴巴寫出 AI 酒館:什麼是 Vibe Coding?專案目標與架構規劃

動機大家好!在接下來的 30 天裡,我將挑戰一個極具實驗性與趣味性的專案——《用嘴巴寫出 AI 酒館》。這個專案的核心理念很簡單:我希望打造一個能讓使用者透...

My Project DimTrip - 讓 AI 助手直接改真正的行程:權限、即時同步和串流踩過的坑

現在很多 AI 旅遊工具,本質上是「很會講話的建議產生器」:它給你一段漂亮的行程文字,然後你要自己把每個景點、每個時間搬進行程表,一起出發的朋友再各抄一份。 我...

鐵人賽 JavaScript DAY 22

技術 前端整合:Bun + React + Vite 的開發工作流以及前端測試

前言 前幾天,我們討論的是幾個後端經典案例,製作帳密登入以及權限控管的部分今天開始我們要開始往 bun 在前端的應用去做使用,那現今最主要的前端打包工具非屬...

鐵人賽 Vibe Coding DAY 28

技術 Day 28 | Claude Vibe Coding的工具成功用Vercel上線,但卻在Vercel遇到問題

昨天在製作過程中發現了一個問題 產業挑選後,進到評估模型的選擇,但模型選擇的認定只會使用默認的產業,不會變成其它的產業 因此今天首要任務是修正這個問題然後...

技術 龜先生奧援開發到底花生省魔術:#2 基礎建設

因為決定另開一個Angular+NestJS專案,所以這個專案就維持React+.NET吧!(握拳結果跟原本想得不一樣,這就是所謂計劃趕不上變化呀(笑 接著就先...

技術 React 的運作原理 - DOM與Virtual DOM和語法糖

DOM DOM 全名 Document Object Model(文件物件模型)。 它是一種「把 HTML 文件轉換成可以用程式操控的物件結構(樹狀的資料結構)...

技術 App Router : RSC 架構與 Server Actions

截至目前(2026/03) Next.js 最新且最受歡迎的技術,莫過於這個 App Router與他帶來的RSC架構與Server Actions API了,...

技術 前端框架 Vue、React的虛擬DOM (Virtual DOM)分身模擬機制。

是一種前端框架(如 React, Vue)用來提升效能的概念,它在記憶體中用 JavaScript 物件模擬真實的 DOM 結構(DOM Tree),當資料變動...

技術 React從0開始-Day8 state

一、state 的概念與用途 在 React 中,state(狀態) 是用來存放會隨著使用者操作而改變的資料。 與一般變數不同的是: 當 state 改變時,R...

技術 React從0開始-Day7 props

一、props 的概念與用途 props 是「父元件 → 子元件」傳遞資料的機制。 它是唯讀的(read-only),子元件不能直接修改它。 透過 props,...

技術 React從0開始-Day6 React的條件判斷

接著要來認識React的條件判斷式,可以根據不條件,來給組件回傳不同的網頁內容而判斷式中有幾個常見的用法,首先是三元運算子(ternary operator)...

技術 React從0開始-Day5 JSX陣列

可以在JSX中放入陣列(listItems)不過以這樣的寫法console中會顯示錯誤訊息正確的寫法:陣列中的每一個元素都應該要有key屬性,key屬性的用途主...

技術 React從0開始-Day4 JSX

每個組件只能回傳一個元素 (物件),他不能同時回傳多個元素 說明: 代表一個元素,如果沒有用把三個元素包進一個元素裡,程式會報錯 ( javaScript本身的...

鐵人賽 Modern Web DAY 30

技術 Day 30 - 用 React 的方式去思考

今天是鐵人賽的最後一天,剛好在昨天也介紹完了官方文件的 管理 State 篇章。後面還剩 逃脫出口 出口這個篇章沒介紹完,主要的內容會是對 React 以外的系...

鐵人賽 Modern Web DAY 30

技術 Day 30: 30天打造SaaS產品前端篇-完賽心得與技術棧總回顧

30 天旅程回顧 終於來到了鐵人賽的最後一天!回顧這 30 天的挑戰,感觸良多。 我在軟體開發領域已經工作八年,從最初的後端工程師,到後來的全端工程師,再到區塊...

鐵人賽 Modern Web DAY 29

技術 最後一哩路:補上缺少的 Landing Page

前言 歡迎來到倒數第二天! 我們昨天完成了在分支上的 React 程式碼實作測驗,確認了我們目前的實作是能撐起本地的測試的,雖然因為安全性的考量我們決定不在這次...

鐵人賽 Modern Web DAY 29

技術 Day 29 - 使用 Reducer 跟 Context 進行擴展

延續昨天的介紹,Context 除了透過傳給 Provider 不同的 value 值之外,也可以透過傳入 state 後,用 state 的更新去改變裡面的值...

鐵人賽 Modern Web DAY 29

技術 Day 29: 30天打造SaaS產品前端篇-完整系統整合與端到端測試

前情提要 在過去的 Day 24-28 中,我們完成了 Kyo System 前端的核心功能: Day 24: 建立 React + Vite + Type...

鐵人賽 Modern Web DAY 28

技術 Day 29 - 使用 Context 深度傳遞資料

在前面的篇章:Day 25 - 在 Component 之間共享 State,有介紹 state 可以透過 props 傳下去給其他 Component 使用。...