[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Fcheatsheets\u002Freact":3,"content:legacy:navigation":1165,"content:legacy:surround:\u002Fcheatsheets\u002Freact":1493},{"id":4,"title":5,"body":6,"description":1153,"extension":1154,"icon":1155,"meta":1156,"modifiedAt":1157,"navigation":102,"path":1158,"publishedAt":1159,"seo":1160,"sitemap":1161,"stem":1163,"updatedAt":1162,"__hash__":1164},"cheatsheets\u002Fcheatsheets\u002Freact.md","React",{"type":7,"value":8,"toc":1151},"minimark",[9,14,68,72,192,196,378,382,443,447,547,551,583,587,621,625,778,782,857,861,876,1045,1049,1147],[10,11,13],"h5",{"id":12},"️-cli-project-setup","⚡️ CLI & Project Setup",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-bash shiki shiki-themes github-light github-dark","npx create-react-app my-app\nnpm start\nnpm run build\nnpm test\n","bash","",[22,23,24,40,49,60],"code",{"__ignoreMap":20},[25,26,29,33,37],"span",{"class":27,"line":28},"line",1,[25,30,32],{"class":31},"sScJk","npx",[25,34,36],{"class":35},"sZZnC"," create-react-app",[25,38,39],{"class":35}," my-app\n",[25,41,43,46],{"class":27,"line":42},2,[25,44,45],{"class":31},"npm",[25,47,48],{"class":35}," start\n",[25,50,52,54,57],{"class":27,"line":51},3,[25,53,45],{"class":31},[25,55,56],{"class":35}," run",[25,58,59],{"class":35}," build\n",[25,61,63,65],{"class":27,"line":62},4,[25,64,45],{"class":31},[25,66,67],{"class":35}," test\n",[10,69,71],{"id":70},"component","🧩 Component",[15,73,77],{"className":74,"code":75,"language":76,"meta":20,"style":20},"language-jsx shiki shiki-themes github-light github-dark","import React from 'react';\n\nfunction Hello({ name }) {\n  return \u003Ch1>Hello, {name}!\u003C\u002Fh1>;\n}\n\n\u002F\u002F or arrow function\nconst Hello = ({ name }) => \u003Ch1>Hello, {name}!\u003C\u002Fh1>;\n","jsx",[22,78,79,98,104,122,142,148,153,160],{"__ignoreMap":20},[25,80,81,85,89,92,95],{"class":27,"line":28},[25,82,84],{"class":83},"szBVR","import",[25,86,88],{"class":87},"sVt8B"," React ",[25,90,91],{"class":83},"from",[25,93,94],{"class":35}," 'react'",[25,96,97],{"class":87},";\n",[25,99,100],{"class":27,"line":42},[25,101,103],{"emptyLinePlaceholder":102},true,"\n",[25,105,106,109,112,115,119],{"class":27,"line":51},[25,107,108],{"class":83},"function",[25,110,111],{"class":31}," Hello",[25,113,114],{"class":87},"({ ",[25,116,118],{"class":117},"s4XuR","name",[25,120,121],{"class":87}," }) {\n",[25,123,124,127,130,134,137,139],{"class":27,"line":62},[25,125,126],{"class":83},"  return",[25,128,129],{"class":87}," \u003C",[25,131,133],{"class":132},"s9eBZ","h1",[25,135,136],{"class":87},">Hello, {name}!\u003C\u002F",[25,138,133],{"class":132},[25,140,141],{"class":87},">;\n",[25,143,145],{"class":27,"line":144},5,[25,146,147],{"class":87},"}\n",[25,149,151],{"class":27,"line":150},6,[25,152,103],{"emptyLinePlaceholder":102},[25,154,156],{"class":27,"line":155},7,[25,157,159],{"class":158},"sJ8bj","\u002F\u002F or arrow function\n",[25,161,163,166,168,171,174,176,179,182,184,186,188,190],{"class":27,"line":162},8,[25,164,165],{"class":83},"const",[25,167,111],{"class":31},[25,169,170],{"class":83}," =",[25,172,173],{"class":87}," ({ ",[25,175,118],{"class":117},[25,177,178],{"class":87}," }) ",[25,180,181],{"class":83},"=>",[25,183,129],{"class":87},[25,185,133],{"class":132},[25,187,136],{"class":87},[25,189,133],{"class":132},[25,191,141],{"class":87},[10,193,195],{"id":194},"state-effect","🔄 State & Effect",[15,197,199],{"className":74,"code":198,"language":76,"meta":20,"style":20},"import React, { useState, useEffect } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    document.title = `Count: ${count}`;\n  }, [count]);\n\n  return (\n    \u003Cbutton onClick={() => setCount(count + 1)}>\n      {count}\n    \u003C\u002Fbutton>\n  );\n}\n",[22,200,201,214,218,228,264,268,281,298,303,308,316,350,356,367,373],{"__ignoreMap":20},[25,202,203,205,208,210,212],{"class":27,"line":28},[25,204,84],{"class":83},[25,206,207],{"class":87}," React, { useState, useEffect } ",[25,209,91],{"class":83},[25,211,94],{"class":35},[25,213,97],{"class":87},[25,215,216],{"class":27,"line":42},[25,217,103],{"emptyLinePlaceholder":102},[25,219,220,222,225],{"class":27,"line":51},[25,221,108],{"class":83},[25,223,224],{"class":31}," Counter",[25,226,227],{"class":87},"() {\n",[25,229,230,233,236,240,243,246,249,252,255,258,261],{"class":27,"line":62},[25,231,232],{"class":83},"  const",[25,234,235],{"class":87}," [",[25,237,239],{"class":238},"sj4cs","count",[25,241,242],{"class":87},", ",[25,244,245],{"class":238},"setCount",[25,247,248],{"class":87},"] ",[25,250,251],{"class":83},"=",[25,253,254],{"class":31}," useState",[25,256,257],{"class":87},"(",[25,259,260],{"class":238},"0",[25,262,263],{"class":87},");\n",[25,265,266],{"class":27,"line":144},[25,267,103],{"emptyLinePlaceholder":102},[25,269,270,273,276,278],{"class":27,"line":150},[25,271,272],{"class":31},"  useEffect",[25,274,275],{"class":87},"(() ",[25,277,181],{"class":83},[25,279,280],{"class":87}," {\n",[25,282,283,286,288,291,293,296],{"class":27,"line":155},[25,284,285],{"class":87},"    document.title ",[25,287,251],{"class":83},[25,289,290],{"class":35}," `Count: ${",[25,292,239],{"class":87},[25,294,295],{"class":35},"}`",[25,297,97],{"class":87},[25,299,300],{"class":27,"line":162},[25,301,302],{"class":87},"  }, [count]);\n",[25,304,306],{"class":27,"line":305},9,[25,307,103],{"emptyLinePlaceholder":102},[25,309,311,313],{"class":27,"line":310},10,[25,312,126],{"class":83},[25,314,315],{"class":87}," (\n",[25,317,319,322,325,328,330,333,335,338,341,344,347],{"class":27,"line":318},11,[25,320,321],{"class":87},"    \u003C",[25,323,324],{"class":132},"button",[25,326,327],{"class":31}," onClick",[25,329,251],{"class":83},[25,331,332],{"class":87},"{() ",[25,334,181],{"class":83},[25,336,337],{"class":31}," setCount",[25,339,340],{"class":87},"(count ",[25,342,343],{"class":83},"+",[25,345,346],{"class":238}," 1",[25,348,349],{"class":87},")}>\n",[25,351,353],{"class":27,"line":352},12,[25,354,355],{"class":87},"      {count}\n",[25,357,359,362,364],{"class":27,"line":358},13,[25,360,361],{"class":87},"    \u003C\u002F",[25,363,324],{"class":132},[25,365,366],{"class":87},">\n",[25,368,370],{"class":27,"line":369},14,[25,371,372],{"class":87},"  );\n",[25,374,376],{"class":27,"line":375},15,[25,377,147],{"class":87},[10,379,381],{"id":380},"props","📦 Props",[15,383,385],{"className":74,"code":384,"language":76,"meta":20,"style":20},"function Welcome({ name }) {\n  return \u003Cdiv>Welcome, {name}\u003C\u002Fdiv>;\n}\n\n\u003CWelcome name=\"Alice\" \u002F>\n",[22,386,387,400,416,420,424],{"__ignoreMap":20},[25,388,389,391,394,396,398],{"class":27,"line":28},[25,390,108],{"class":83},[25,392,393],{"class":31}," Welcome",[25,395,114],{"class":87},[25,397,118],{"class":117},[25,399,121],{"class":87},[25,401,402,404,406,409,412,414],{"class":27,"line":42},[25,403,126],{"class":83},[25,405,129],{"class":87},[25,407,408],{"class":132},"div",[25,410,411],{"class":87},">Welcome, {name}\u003C\u002F",[25,413,408],{"class":132},[25,415,141],{"class":87},[25,417,418],{"class":27,"line":51},[25,419,147],{"class":87},[25,421,422],{"class":27,"line":62},[25,423,103],{"emptyLinePlaceholder":102},[25,425,426,429,432,435,437,440],{"class":27,"line":144},[25,427,428],{"class":87},"\u003C",[25,430,431],{"class":238},"Welcome",[25,433,434],{"class":31}," name",[25,436,251],{"class":83},[25,438,439],{"class":35},"\"Alice\"",[25,441,442],{"class":87}," \u002F>\n",[10,444,446],{"id":445},"️-list-keys","🏗️ List & Keys",[15,448,450],{"className":74,"code":449,"language":76,"meta":20,"style":20},"const items = ['A', 'B', 'C'];\n\u003Cul>\n  {items.map((item, idx) => (\n    \u003Cli key={idx}>{item}\u003C\u002Fli>\n  ))}\n\u003C\u002Ful>\n",[22,451,452,479,488,514,533,538],{"__ignoreMap":20},[25,453,454,456,459,461,463,466,468,471,473,476],{"class":27,"line":28},[25,455,165],{"class":83},[25,457,458],{"class":238}," items",[25,460,170],{"class":83},[25,462,235],{"class":87},[25,464,465],{"class":35},"'A'",[25,467,242],{"class":87},[25,469,470],{"class":35},"'B'",[25,472,242],{"class":87},[25,474,475],{"class":35},"'C'",[25,477,478],{"class":87},"];\n",[25,480,481,483,486],{"class":27,"line":42},[25,482,428],{"class":87},[25,484,485],{"class":132},"ul",[25,487,366],{"class":87},[25,489,490,493,496,499,502,504,507,510,512],{"class":27,"line":51},[25,491,492],{"class":87},"  {items.",[25,494,495],{"class":31},"map",[25,497,498],{"class":87},"((",[25,500,501],{"class":117},"item",[25,503,242],{"class":87},[25,505,506],{"class":117},"idx",[25,508,509],{"class":87},") ",[25,511,181],{"class":83},[25,513,315],{"class":87},[25,515,516,518,521,524,526,529,531],{"class":27,"line":62},[25,517,321],{"class":87},[25,519,520],{"class":132},"li",[25,522,523],{"class":31}," key",[25,525,251],{"class":83},[25,527,528],{"class":87},"{idx}>{item}\u003C\u002F",[25,530,520],{"class":132},[25,532,366],{"class":87},[25,534,535],{"class":27,"line":144},[25,536,537],{"class":87},"  ))}\n",[25,539,540,543,545],{"class":27,"line":150},[25,541,542],{"class":87},"\u003C\u002F",[25,544,485],{"class":132},[25,546,366],{"class":87},[10,548,550],{"id":549},"️-conditional-rendering","🛡️ Conditional Rendering",[15,552,554],{"className":74,"code":553,"language":76,"meta":20,"style":20},"{isLoggedIn ? \u003CDashboard \u002F> : \u003CLogin \u002F>}\n",[22,555,556],{"__ignoreMap":20},[25,557,558,561,564,566,569,572,575,577,580],{"class":27,"line":28},[25,559,560],{"class":87},"{isLoggedIn ",[25,562,563],{"class":83},"?",[25,565,129],{"class":87},[25,567,568],{"class":238},"Dashboard",[25,570,571],{"class":87}," \u002F> ",[25,573,574],{"class":83},":",[25,576,129],{"class":87},[25,578,579],{"class":238},"Login",[25,581,582],{"class":87}," \u002F>}\n",[10,584,586],{"id":585},"event-handling","🧪 Event Handling",[15,588,590],{"className":74,"code":589,"language":76,"meta":20,"style":20},"\u003Cbutton onClick={() => alert('Clicked!')}>Click Me\u003C\u002Fbutton>\n",[22,591,592],{"__ignoreMap":20},[25,593,594,596,598,600,602,604,606,609,611,614,617,619],{"class":27,"line":28},[25,595,428],{"class":87},[25,597,324],{"class":132},[25,599,327],{"class":31},[25,601,251],{"class":83},[25,603,332],{"class":87},[25,605,181],{"class":83},[25,607,608],{"class":31}," alert",[25,610,257],{"class":87},[25,612,613],{"class":35},"'Clicked!'",[25,615,616],{"class":87},")}>Click Me\u003C\u002F",[25,618,324],{"class":132},[25,620,366],{"class":87},[10,622,624],{"id":623},"️-form-handling","🗂️ Form Handling",[15,626,628],{"className":74,"code":627,"language":76,"meta":20,"style":20},"function Form() {\n  const [value, setValue] = useState('');\n  return (\n    \u003Cform onSubmit={e => { e.preventDefault(); alert(value); }}>\n      \u003Cinput value={value} onChange={e => setValue(e.target.value)} \u002F>\n      \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n",[22,629,630,639,666,672,708,741,762,770,774],{"__ignoreMap":20},[25,631,632,634,637],{"class":27,"line":28},[25,633,108],{"class":83},[25,635,636],{"class":31}," Form",[25,638,227],{"class":87},[25,640,641,643,645,648,650,653,655,657,659,661,664],{"class":27,"line":42},[25,642,232],{"class":83},[25,644,235],{"class":87},[25,646,647],{"class":238},"value",[25,649,242],{"class":87},[25,651,652],{"class":238},"setValue",[25,654,248],{"class":87},[25,656,251],{"class":83},[25,658,254],{"class":31},[25,660,257],{"class":87},[25,662,663],{"class":35},"''",[25,665,263],{"class":87},[25,667,668,670],{"class":27,"line":51},[25,669,126],{"class":83},[25,671,315],{"class":87},[25,673,674,676,679,682,684,687,690,693,696,699,702,705],{"class":27,"line":62},[25,675,321],{"class":87},[25,677,678],{"class":132},"form",[25,680,681],{"class":31}," onSubmit",[25,683,251],{"class":83},[25,685,686],{"class":87},"{",[25,688,689],{"class":117},"e",[25,691,692],{"class":83}," =>",[25,694,695],{"class":87}," { e.",[25,697,698],{"class":31},"preventDefault",[25,700,701],{"class":87},"(); ",[25,703,704],{"class":31},"alert",[25,706,707],{"class":87},"(value); }}>\n",[25,709,710,713,716,719,721,724,727,729,731,733,735,738],{"class":27,"line":144},[25,711,712],{"class":87},"      \u003C",[25,714,715],{"class":132},"input",[25,717,718],{"class":31}," value",[25,720,251],{"class":83},[25,722,723],{"class":87},"{value} ",[25,725,726],{"class":31},"onChange",[25,728,251],{"class":83},[25,730,686],{"class":87},[25,732,689],{"class":117},[25,734,692],{"class":83},[25,736,737],{"class":31}," setValue",[25,739,740],{"class":87},"(e.target.value)} \u002F>\n",[25,742,743,745,747,750,752,755,758,760],{"class":27,"line":150},[25,744,712],{"class":87},[25,746,324],{"class":132},[25,748,749],{"class":31}," type",[25,751,251],{"class":83},[25,753,754],{"class":35},"\"submit\"",[25,756,757],{"class":87},">Submit\u003C\u002F",[25,759,324],{"class":132},[25,761,366],{"class":87},[25,763,764,766,768],{"class":27,"line":155},[25,765,361],{"class":87},[25,767,678],{"class":132},[25,769,366],{"class":87},[25,771,772],{"class":27,"line":162},[25,773,372],{"class":87},[25,775,776],{"class":27,"line":305},[25,777,147],{"class":87},[10,779,781],{"id":780},"styling","🎨 Styling",[15,783,785],{"className":74,"code":784,"language":76,"meta":20,"style":20},"\u002F\u002F Inline style\n\u003Cdiv style={{ color: 'red' }}>Red Text\u003C\u002Fdiv>\n\n\u002F\u002F CSS Modules\nimport styles from '.\u002FApp.module.css';\n\u003Cdiv className={styles.header}>Header\u003C\u002Fdiv>\n",[22,786,787,792,816,820,825,839],{"__ignoreMap":20},[25,788,789],{"class":27,"line":28},[25,790,791],{"class":158},"\u002F\u002F Inline style\n",[25,793,794,796,798,801,803,806,809,812,814],{"class":27,"line":42},[25,795,428],{"class":87},[25,797,408],{"class":132},[25,799,800],{"class":31}," style",[25,802,251],{"class":83},[25,804,805],{"class":87},"{{ color: ",[25,807,808],{"class":35},"'red'",[25,810,811],{"class":87}," }}>Red Text\u003C\u002F",[25,813,408],{"class":132},[25,815,366],{"class":87},[25,817,818],{"class":27,"line":51},[25,819,103],{"emptyLinePlaceholder":102},[25,821,822],{"class":27,"line":62},[25,823,824],{"class":158},"\u002F\u002F CSS Modules\n",[25,826,827,829,832,834,837],{"class":27,"line":144},[25,828,84],{"class":83},[25,830,831],{"class":87}," styles ",[25,833,91],{"class":83},[25,835,836],{"class":35}," '.\u002FApp.module.css'",[25,838,97],{"class":87},[25,840,841,843,845,848,850,853,855],{"class":27,"line":150},[25,842,428],{"class":87},[25,844,408],{"class":132},[25,846,847],{"class":31}," className",[25,849,251],{"class":83},[25,851,852],{"class":87},"{styles.header}>Header\u003C\u002F",[25,854,408],{"class":132},[25,856,366],{"class":87},[10,858,860],{"id":859},"routing-react-router","🚦 Routing (react-router)",[15,862,864],{"className":17,"code":863,"language":19,"meta":20,"style":20},"npm i react-router-dom\n",[22,865,866],{"__ignoreMap":20},[25,867,868,870,873],{"class":27,"line":28},[25,869,45],{"class":31},[25,871,872],{"class":35}," i",[25,874,875],{"class":35}," react-router-dom\n",[15,877,879],{"className":74,"code":878,"language":76,"meta":20,"style":20},"import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';\n\n\u003CBrowserRouter>\n  \u003Cnav>\n    \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n    \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n  \u003C\u002Fnav>\n  \u003CRoutes>\n    \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n    \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n  \u003C\u002FRoutes>\n\u003C\u002FBrowserRouter>\n",[22,880,881,895,899,908,918,940,960,969,978,1006,1029,1037],{"__ignoreMap":20},[25,882,883,885,888,890,893],{"class":27,"line":28},[25,884,84],{"class":83},[25,886,887],{"class":87}," { BrowserRouter, Route, Routes, Link } ",[25,889,91],{"class":83},[25,891,892],{"class":35}," 'react-router-dom'",[25,894,97],{"class":87},[25,896,897],{"class":27,"line":42},[25,898,103],{"emptyLinePlaceholder":102},[25,900,901,903,906],{"class":27,"line":51},[25,902,428],{"class":87},[25,904,905],{"class":238},"BrowserRouter",[25,907,366],{"class":87},[25,909,910,913,916],{"class":27,"line":62},[25,911,912],{"class":87},"  \u003C",[25,914,915],{"class":132},"nav",[25,917,366],{"class":87},[25,919,920,922,925,928,930,933,936,938],{"class":27,"line":144},[25,921,321],{"class":87},[25,923,924],{"class":238},"Link",[25,926,927],{"class":31}," to",[25,929,251],{"class":83},[25,931,932],{"class":35},"\"\u002F\"",[25,934,935],{"class":87},">Home\u003C\u002F",[25,937,924],{"class":238},[25,939,366],{"class":87},[25,941,942,944,946,948,950,953,956,958],{"class":27,"line":150},[25,943,321],{"class":87},[25,945,924],{"class":238},[25,947,927],{"class":31},[25,949,251],{"class":83},[25,951,952],{"class":35},"\"\u002Fabout\"",[25,954,955],{"class":87},">About\u003C\u002F",[25,957,924],{"class":238},[25,959,366],{"class":87},[25,961,962,965,967],{"class":27,"line":155},[25,963,964],{"class":87},"  \u003C\u002F",[25,966,915],{"class":132},[25,968,366],{"class":87},[25,970,971,973,976],{"class":27,"line":162},[25,972,912],{"class":87},[25,974,975],{"class":238},"Routes",[25,977,366],{"class":87},[25,979,980,982,985,988,990,992,995,997,1000,1003],{"class":27,"line":305},[25,981,321],{"class":87},[25,983,984],{"class":238},"Route",[25,986,987],{"class":31}," path",[25,989,251],{"class":83},[25,991,932],{"class":35},[25,993,994],{"class":31}," element",[25,996,251],{"class":83},[25,998,999],{"class":87},"{\u003C",[25,1001,1002],{"class":238},"Home",[25,1004,1005],{"class":87}," \u002F>} \u002F>\n",[25,1007,1008,1010,1012,1014,1016,1018,1020,1022,1024,1027],{"class":27,"line":310},[25,1009,321],{"class":87},[25,1011,984],{"class":238},[25,1013,987],{"class":31},[25,1015,251],{"class":83},[25,1017,952],{"class":35},[25,1019,994],{"class":31},[25,1021,251],{"class":83},[25,1023,999],{"class":87},[25,1025,1026],{"class":238},"About",[25,1028,1005],{"class":87},[25,1030,1031,1033,1035],{"class":27,"line":318},[25,1032,964],{"class":87},[25,1034,975],{"class":238},[25,1036,366],{"class":87},[25,1038,1039,1041,1043],{"class":27,"line":352},[25,1040,542],{"class":87},[25,1042,905],{"class":238},[25,1044,366],{"class":87},[10,1046,1048],{"id":1047},"️-misc","🛠️ Misc",[15,1050,1052],{"className":74,"code":1051,"language":76,"meta":20,"style":20},"\u002F\u002F Fragment\n\u003C>\n  \u003Ch1>Title\u003C\u002Fh1>\n  \u003Cp>Paragraph\u003C\u002Fp>\n\u003C\u002F>\n\n\u002F\u002F Ref\nimport { useRef } from 'react';\nconst inputRef = useRef();\n\u003Cinput ref={inputRef} \u002F>\n",[22,1053,1054,1059,1064,1077,1091,1096,1100,1105,1118,1133],{"__ignoreMap":20},[25,1055,1056],{"class":27,"line":28},[25,1057,1058],{"class":158},"\u002F\u002F Fragment\n",[25,1060,1061],{"class":27,"line":42},[25,1062,1063],{"class":87},"\u003C>\n",[25,1065,1066,1068,1070,1073,1075],{"class":27,"line":51},[25,1067,912],{"class":87},[25,1069,133],{"class":132},[25,1071,1072],{"class":87},">Title\u003C\u002F",[25,1074,133],{"class":132},[25,1076,366],{"class":87},[25,1078,1079,1081,1084,1087,1089],{"class":27,"line":62},[25,1080,912],{"class":87},[25,1082,1083],{"class":132},"p",[25,1085,1086],{"class":87},">Paragraph\u003C\u002F",[25,1088,1083],{"class":132},[25,1090,366],{"class":87},[25,1092,1093],{"class":27,"line":144},[25,1094,1095],{"class":87},"\u003C\u002F>\n",[25,1097,1098],{"class":27,"line":150},[25,1099,103],{"emptyLinePlaceholder":102},[25,1101,1102],{"class":27,"line":155},[25,1103,1104],{"class":158},"\u002F\u002F Ref\n",[25,1106,1107,1109,1112,1114,1116],{"class":27,"line":162},[25,1108,84],{"class":83},[25,1110,1111],{"class":87}," { useRef } ",[25,1113,91],{"class":83},[25,1115,94],{"class":35},[25,1117,97],{"class":87},[25,1119,1120,1122,1125,1127,1130],{"class":27,"line":305},[25,1121,165],{"class":83},[25,1123,1124],{"class":238}," inputRef",[25,1126,170],{"class":83},[25,1128,1129],{"class":31}," useRef",[25,1131,1132],{"class":87},"();\n",[25,1134,1135,1137,1139,1142,1144],{"class":27,"line":310},[25,1136,428],{"class":87},[25,1138,715],{"class":132},[25,1140,1141],{"class":31}," ref",[25,1143,251],{"class":83},[25,1145,1146],{"class":87},"{inputRef} \u002F>\n",[1148,1149,1150],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":20,"searchDepth":42,"depth":42,"links":1152},[],"A comprehensive guide to React.js library.","md","material-icon-theme:react",{},null,"\u002Fcheatsheets\u002Freact","2025-08-14",{"title":5,"description":1153},{"loc":1158,"lastmod":1162},"2026-09-21T22:25:07+07:00","cheatsheets\u002Freact","3fBjTZxOp7lrq0w0_SaRNkVg3DtUCdXdzwsq_Ex91lU",[1166,1317,1421,1436],{"title":1167,"icon":1168,"path":1169,"stem":1170,"children":1171,"page":1182},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts","posts",[1172,1183,1201,1227,1237,1251,1261,1271,1281,1307],{"title":1173,"icon":1174,"redirect":1175,"path":1176,"stem":1177,"children":1178,"page":1182},"Database","material-icon-theme:database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[1179],{"title":1180,"path":1175,"stem":1181,"icon":1157},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",false,{"title":1184,"icon":1185,"redirect":1186,"path":1187,"stem":1188,"children":1189,"page":1182},"Docker","vscode-icons:file-type-docker2","\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[1190,1193,1197],{"title":1191,"path":1186,"stem":1192,"icon":1157},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":1194,"path":1195,"stem":1196,"icon":1157},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":1198,"path":1199,"stem":1200,"icon":1157},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":1202,"icon":1203,"redirect":1204,"path":1205,"stem":1206,"children":1207,"page":1182},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[1208,1211,1215,1219,1223],{"title":1209,"path":1204,"stem":1210,"icon":1157},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":1212,"path":1213,"stem":1214,"icon":1157},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":1216,"path":1217,"stem":1218,"icon":1157},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":1220,"path":1221,"stem":1222,"icon":1157},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":1224,"path":1225,"stem":1226,"icon":1157},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":1228,"icon":1229,"redirect":1230,"path":1231,"stem":1232,"children":1233,"page":1182},"Golang","material-icon-theme:go","\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[1234],{"title":1235,"path":1230,"stem":1236,"icon":1157},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":1238,"icon":1239,"redirect":1240,"path":1241,"stem":1242,"children":1243,"page":1182},"JavaScript","vscode-icons:file-type-js","\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[1244,1247],{"title":1245,"path":1240,"stem":1246,"icon":1157},"9 lines of JavaScript replace 50 lines of code","posts\u002Fjavascript\u002F9-lines-of-tips",{"title":1248,"path":1249,"stem":1250,"icon":1157},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":1252,"icon":1253,"redirect":1254,"path":1255,"stem":1256,"children":1257,"page":1182},"Node","material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[1258],{"title":1259,"path":1254,"stem":1260,"icon":1157},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":1262,"icon":1263,"redirect":1264,"path":1265,"stem":1266,"children":1267,"page":1182},"Nuxt","vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[1268],{"title":1269,"path":1264,"stem":1270,"icon":1157},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":1272,"icon":1273,"redirect":1274,"path":1275,"stem":1276,"children":1277,"page":1182},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[1278],{"title":1279,"path":1274,"stem":1280,"icon":1157},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":1282,"icon":1283,"redirect":1284,"path":1285,"stem":1286,"children":1287,"page":1182},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[1288,1291,1295,1299,1303],{"title":1289,"path":1284,"stem":1290,"icon":1157},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":1292,"path":1293,"stem":1294,"icon":1157},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":1296,"path":1297,"stem":1298,"icon":1157},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":1300,"path":1301,"stem":1302,"icon":1157},"Pre rels in header link tag - SEO technique enhancement","\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",{"title":1304,"path":1305,"stem":1306,"icon":1157},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":1308,"icon":1309,"redirect":1310,"path":1311,"stem":1312,"children":1313,"page":1182},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","\u002Fposts\u002Fuiux","posts\u002Fuiux",[1314],{"title":1315,"path":1310,"stem":1316,"icon":1157},"Common Button Mistake in UI\u002FUX","posts\u002Fuiux\u002Fcommon-button-mistake",{"title":1318,"icon":1319,"path":1320,"stem":1321,"children":1322,"page":1182},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[1323,1328,1333,1336,1341,1344,1349,1353,1358,1363,1368,1373,1378,1383,1387,1391,1392,1397,1401,1406,1411,1416],{"title":1324,"path":1325,"stem":1326,"icon":1327},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":1329,"path":1330,"stem":1331,"icon":1332},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":1184,"path":1334,"stem":1335,"icon":1185},"\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker",{"title":1337,"path":1338,"stem":1339,"icon":1340},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":1228,"path":1342,"stem":1343,"icon":1229},"\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo",{"title":1345,"path":1346,"stem":1347,"icon":1348},"HTML","\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml","material-icon-theme:html",{"title":1238,"path":1350,"stem":1351,"icon":1352},"\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":1354,"path":1355,"stem":1356,"icon":1357},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":1359,"path":1360,"stem":1361,"icon":1362},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":1364,"path":1365,"stem":1366,"icon":1367},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":1369,"path":1370,"stem":1371,"icon":1372},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":1374,"path":1375,"stem":1376,"icon":1377},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":1379,"path":1380,"stem":1381,"icon":1382},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":1252,"path":1384,"stem":1385,"icon":1386},"\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":1262,"path":1388,"stem":1389,"icon":1390},"\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":5,"path":1158,"stem":1163,"icon":1155},{"title":1393,"path":1394,"stem":1395,"icon":1396},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":1398,"path":1399,"stem":1400,"icon":1174},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql",{"title":1402,"path":1403,"stem":1404,"icon":1405},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":1407,"path":1408,"stem":1409,"icon":1410},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":1412,"path":1413,"stem":1414,"icon":1415},"Vue","\u002Fcheatsheets\u002Fvue","cheatsheets\u002Fvue","material-icon-theme:vue",{"title":1417,"path":1418,"stem":1419,"icon":1420},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":1422,"icon":1423,"path":1424,"stem":1425,"children":1426,"page":1182},"Prompts","fluent-color:bot-sparkle-24","\u002Fprompts","prompts",[1427],{"title":1428,"path":1429,"stem":1430,"children":1431,"page":1182},"Image Generation","\u002Fprompts\u002Fimage-generation","prompts\u002Fimage-generation",[1432],{"title":1433,"path":1434,"stem":1435,"icon":1423},"Futuristic Cloud Workspace","\u002Fprompts\u002Fimage-generation\u002Ffuturistic-cloud-workspace","prompts\u002Fimage-generation\u002Ffuturistic-cloud-workspace",{"title":1437,"icon":1438,"path":1439,"stem":1440,"children":1441,"page":1182},"Interviews","lucide:messages-square","\u002Finterviews","interviews",[1442,1446,1451,1454,1458,1463,1468,1473,1478,1483,1488],{"title":1443,"path":1444,"stem":1445,"icon":1438},"Behavioral Engineering","\u002Finterviews\u002Fbehavioral-engineering","interviews\u002Fbehavioral-engineering",{"title":1447,"path":1448,"stem":1449,"icon":1450},"DevOps and Cloud","\u002Finterviews\u002Fdevops-cloud","interviews\u002Fdevops-cloud","logos:docker-icon",{"title":1345,"path":1452,"stem":1453,"icon":1348},"\u002Finterviews\u002Fhtml","interviews\u002Fhtml",{"title":1238,"path":1455,"stem":1456,"icon":1457},"\u002Finterviews\u002Fjavascript","interviews\u002Fjavascript","logos:javascript",{"title":1459,"path":1460,"stem":1461,"icon":1462},"Node.js and API Design","\u002Finterviews\u002Fnodejs-api","interviews\u002Fnodejs-api","logos:nodejs-icon",{"title":1464,"path":1465,"stem":1466,"icon":1467},"Software Testing","\u002Finterviews\u002Fsoftware-testing","interviews\u002Fsoftware-testing","lucide:flask-conical",{"title":1469,"path":1470,"stem":1471,"icon":1472},"SQL and Databases","\u002Finterviews\u002Fsql-databases","interviews\u002Fsql-databases","lucide:database",{"title":1474,"path":1475,"stem":1476,"icon":1477},"System Design","\u002Finterviews\u002Fsystem-design","interviews\u002Fsystem-design","lucide:network",{"title":1479,"path":1480,"stem":1481,"icon":1482},"TypeScript","\u002Finterviews\u002Ftypescript","interviews\u002Ftypescript","logos:typescript-icon",{"title":1484,"path":1485,"stem":1486,"icon":1487},"Vue and Nuxt","\u002Finterviews\u002Fvue-nuxt","interviews\u002Fvue-nuxt","logos:nuxt-icon",{"title":1489,"path":1490,"stem":1491,"icon":1492},"Web Security","\u002Finterviews\u002Fweb-security","interviews\u002Fweb-security","lucide:shield-check",[1494,1495],{"title":1262,"path":1388,"stem":1389,"children":-1},{"title":1393,"path":1394,"stem":1395,"children":-1}]