[{"data":1,"prerenderedAt":357},["ShallowReactive",2],{"post-\u002Fblog\u002Freact-intro":3,"post-surroundings":323},{"id":4,"title":5,"body":6,"date":309,"description":310,"desktopCover":24,"extension":311,"isPopular":312,"meta":313,"mobileCover":314,"navigation":315,"path":316,"seo":317,"slug":316,"stem":318,"tags":319,"__hash__":322},"blog\u002Fblog\u002Freact-intro.md","React 入門不再迷惘：三步驟帶你上手核心概念",{"type":7,"value":8,"toc":301},"minimark",[9,20,25,29,128,158,291,297],[10,11,12,16],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19],"p",{},"React 是目前最熱門的前端函式庫之一，但新手常常因為 JSX、元件化思維與狀態管理而感到迷惘。本篇文章將用「三步驟」的方式，帶你從零開始，一步步掌握 React 的核心概念，快速上手並應用在真實專案中。",[21,22],"prose-img",{"alt":23,"src":24},"前言圖片","\u002Fdesktop\u002Fblog\u002Freact-intro.webp",[13,26,28],{"id":27},"三步驟掌握-react-核心概念","三步驟掌握 React 核心概念",[30,31,32,37,47,52],"content-block",{},[33,34,36],"h3",{"id":35},"步驟一理解-jsx-與元件化思維","步驟一：理解 JSX 與元件化思維",[17,38,39,43,46],{},[40,41,42],"strong",{},"為何重要",[44,45],"br",{},"\nJSX 讓你在 JavaScript 中直接撰寫類似 HTML 的語法，搭配元件化思維，可以把 UI 拆成更小、更可重用的區塊，提升專案維護性。",[17,48,49],{},[40,50,51],{},"建議做法",[53,54,55,113,116],"ol",{},[56,57,58,59],"li",{},"練習建立簡單函式元件：\n",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-jsx shiki shiki-themes github-light github-dark","function Hello() {\n  return \u003Ch1>Hello, React!\u003C\u002Fh1>;\n}\n","jsx","",[67,68,69,86,107],"code",{"__ignoreMap":65},[70,71,74,78,82],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"szBVR","function",[70,79,81],{"class":80},"sScJk"," Hello",[70,83,85],{"class":84},"sVt8B","() {\n",[70,87,89,92,95,99,102,104],{"class":72,"line":88},2,[70,90,91],{"class":76},"  return",[70,93,94],{"class":84}," \u003C",[70,96,98],{"class":97},"s9eBZ","h1",[70,100,101],{"class":84},">Hello, React!\u003C\u002F",[70,103,98],{"class":97},[70,105,106],{"class":84},">;\n",[70,108,110],{"class":72,"line":109},3,[70,111,112],{"class":84},"}\n",[56,114,115],{},"嘗試把頁面拆分成父子元件，並用 props 傳遞資料。",[56,117,118,119,127],{},"參考官方文件 ",[120,121,126],"a",{"href":122,"rel":123,"target":125},"https:\u002F\u002Freact.dev\u002Flearn",[124],"nofollow","\\_blank","Quick Start","，深入理解其運作原理。",[30,129,130,134,139,143],{},[33,131,133],{"id":132},"步驟二掌握-state-與-props","步驟二：掌握 State 與 Props",[17,135,136,138],{},[40,137,42],{},"\nProps 是父元件向子元件傳遞資料的唯一路徑，State 則是元件自身可變的狀態，兩者共同構成 React 的單向資料流機制。",[17,140,141],{},[40,142,51],{},[53,144,145,148,155],{},[56,146,147],{},"在函式元件中使用 useState 管理狀態",[56,149,150,151,154],{},"配合事件處理函式，呼叫 ",[67,152,153],{},"setCount"," 更新 state，觀察畫面自動重新渲染效果。",[56,156,157],{},"練習「狀態提升」（lifting state up），把多個元件共用的 state 抽離到共同父元件，實現「單一資料來源」。",[30,159,160,164,169,173],{},[33,161,163],{"id":162},"步驟三深入理解-hook-與副作用管理","步驟三：深入理解 Hook 與副作用管理",[17,165,166,168],{},[40,167,42],{},"\n自 React 16.8 起，Hook 讓函式元件也能使用生命週期方法與副作用管理。useEffect 是最常用的 Hook，能在元件渲染後執行資料抓取、訂閱、或清除操作。",[17,170,171],{},[40,172,51],{},[53,174,175,269,272],{},[56,176,177,178],{},"用 useEffect 執行 API 請求：\n",[60,179,181],{"className":62,"code":180,"language":64,"meta":65,"style":65},"useEffect(() => {\n  fetch(\"\u002Fapi\u002Fposts\")\n    .then((res) => res.json())\n    .then((data) => setPosts(data));\n}, []);\n",[67,182,183,197,212,241,263],{"__ignoreMap":65},[70,184,185,188,191,194],{"class":72,"line":73},[70,186,187],{"class":80},"useEffect",[70,189,190],{"class":84},"(() ",[70,192,193],{"class":76},"=>",[70,195,196],{"class":84}," {\n",[70,198,199,202,205,209],{"class":72,"line":88},[70,200,201],{"class":80},"  fetch",[70,203,204],{"class":84},"(",[70,206,208],{"class":207},"sZZnC","\"\u002Fapi\u002Fposts\"",[70,210,211],{"class":84},")\n",[70,213,214,217,220,223,227,230,232,235,238],{"class":72,"line":109},[70,215,216],{"class":84},"    .",[70,218,219],{"class":80},"then",[70,221,222],{"class":84},"((",[70,224,226],{"class":225},"s4XuR","res",[70,228,229],{"class":84},") ",[70,231,193],{"class":76},[70,233,234],{"class":84}," res.",[70,236,237],{"class":80},"json",[70,239,240],{"class":84},"())\n",[70,242,244,246,248,250,253,255,257,260],{"class":72,"line":243},4,[70,245,216],{"class":84},[70,247,219],{"class":80},[70,249,222],{"class":84},[70,251,252],{"class":225},"data",[70,254,229],{"class":84},[70,256,193],{"class":76},[70,258,259],{"class":80}," setPosts",[70,261,262],{"class":84},"(data));\n",[70,264,266],{"class":72,"line":265},5,[70,267,268],{"class":84},"}, []);\n",[56,270,271],{},"理解依賴陣列（dependency array）的意義，決定副作用執行時機。",[56,273,274,275,278,279,282,283,286,287,290],{},"嘗試其他 Hook：",[67,276,277],{},"useContext"," 管理全域狀態、",[67,280,281],{},"useReducer"," 處理複雜邏輯、",[67,284,285],{},"useMemo","／",[67,288,289],{},"useCallback"," 優化效能。",[292,293,294],"blockquote",{},[17,295,296],{},"小結：先掌握 JSX 與元件拆分，再理解 State 與 Props，最後活用 Hook 管理副作用，你就能打下穩固的 React 基礎，在專案中自由組合元件，應對各種互動需求。",[298,299,300],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":65,"searchDepth":88,"depth":88,"links":302},[303,304],{"id":15,"depth":88,"text":15},{"id":27,"depth":88,"text":28,"children":305},[306,307,308],{"id":35,"depth":109,"text":36},{"id":132,"depth":109,"text":133},{"id":162,"depth":109,"text":163},"2024-10-11","你是否對 React 感到好奇，卻苦惱於該如何正式啟動學習之路？身為前端工程師兼職涯諮詢師，我常遇到同學問我：「React 到底該怎麼入門？」為了幫大家減少摸索的時間，我整理出三個循序漸進的關鍵步驟，帶你更輕鬆地掌握 React 核心概念，真正把理論應用在實際專案中。","md",false,{},"\u002Fmobile\u002Fblog\u002Freact-intro.webp",true,"\u002Fblog\u002Freact-intro",{"title":5,"description":310},"blog\u002Freact-intro",[320,321],"React","入門基礎","ggWzDJfwisib-81bAEvQUCNkK__JGOKlxqfX8hg-zYY",[324,327,328,331,334,337,340,343,346,349,352,354],{"slug":325,"path":325,"date":326},"\u002Fblog\u002Fstart-from-scratch","2024-10-21",{"slug":316,"path":316,"date":309},{"slug":329,"path":329,"date":330},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":332,"path":332,"date":333},"\u002Fblog\u002Fcss-magic","2024-09-03",{"slug":335,"path":335,"date":336},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":338,"path":338,"date":339},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":341,"path":341,"date":342},"\u002Fblog\u002Fvue3-composition-api","2024-06-29",{"slug":344,"path":344,"date":345},"\u002Fblog\u002Fgit","2024-05-04",{"slug":347,"path":347,"date":348},"\u002Fblog\u002Fseo","2024-05-01",{"slug":350,"path":350,"date":351},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":353,"path":353,"date":351},"\u002Fblog\u002Ftypescript",{"slug":355,"path":355,"date":356},"\u002Fblog\u002Funit-test","2024-02-07",1793785242273]