[{"data":1,"prerenderedAt":320},["ShallowReactive",2],{"term-r\u002Freact":3,"related-r\u002Freact":303},{"id":4,"title":5,"acronym":6,"body":7,"category":284,"description":285,"difficulty":286,"extension":287,"letter":288,"meta":289,"navigation":81,"path":290,"related":291,"seo":297,"sitemap":298,"stem":301,"subcategory":6,"__hash__":302},"terms\u002Fterms\u002Fr\u002Freact.md","React",null,{"type":8,"value":9,"toc":278},"minimark",[10,15,19,23,26,30,267,271,274],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"React is a JavaScript library from Meta for building UIs out of components. It uses JSX — a weird mix of HTML inside JavaScript — and a Virtual DOM to update only what changed. It's the most popular frontend choice in the industry.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"React is a declarative, component-based JavaScript library for building user interfaces. Developed by Meta, it uses a Virtual DOM for efficient updates, JSX for templating, hooks for state and lifecycle, and a unidirectional data flow. It's a library (not a framework) — you add routing, state management etc. separately.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useState } from 'react';\n\nexport default function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    \u003Cdiv>\n      \u003Cp>Count: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setCount(c => c + 1)}>+1\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n","jsx","",[38,39,40,76,83,106,145,154,166,192,243,253,261],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,66,70,73],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","import",[41,50,52],{"class":51},"sMK4o"," {",[41,54,56],{"class":55},"sTEyZ"," useState",[41,58,59],{"class":51}," }",[41,61,62],{"class":47}," from",[41,64,65],{"class":51}," '",[41,67,69],{"class":68},"sfazB","react",[41,71,72],{"class":51},"'",[41,74,75],{"class":51},";\n",[41,77,79],{"class":43,"line":78},2,[41,80,82],{"emptyLinePlaceholder":81},true,"\n",[41,84,86,89,92,96,100,103],{"class":43,"line":85},3,[41,87,88],{"class":47},"export",[41,90,91],{"class":47}," default",[41,93,95],{"class":94},"spNyl"," function",[41,97,99],{"class":98},"s2Zo4"," Counter",[41,101,102],{"class":51},"()",[41,104,105],{"class":51}," {\n",[41,107,109,112,115,118,121,124,127,130,132,136,140,143],{"class":43,"line":108},4,[41,110,111],{"class":94},"  const",[41,113,114],{"class":51}," [",[41,116,117],{"class":55},"count",[41,119,120],{"class":51},",",[41,122,123],{"class":55}," setCount",[41,125,126],{"class":51},"]",[41,128,129],{"class":51}," =",[41,131,56],{"class":98},[41,133,135],{"class":134},"swJcz","(",[41,137,139],{"class":138},"sbssI","0",[41,141,142],{"class":134},")",[41,144,75],{"class":51},[41,146,148,151],{"class":43,"line":147},5,[41,149,150],{"class":47},"  return",[41,152,153],{"class":134}," (\n",[41,155,157,160,163],{"class":43,"line":156},6,[41,158,159],{"class":51},"    \u003C",[41,161,162],{"class":134},"div",[41,164,165],{"class":51},">\n",[41,167,169,172,174,177,180,183,185,188,190],{"class":43,"line":168},7,[41,170,171],{"class":51},"      \u003C",[41,173,16],{"class":134},[41,175,176],{"class":51},">",[41,178,179],{"class":55},"Count: ",[41,181,182],{"class":51},"{",[41,184,117],{"class":55},[41,186,187],{"class":51},"}\u003C\u002F",[41,189,16],{"class":134},[41,191,165],{"class":51},[41,193,195,197,200,203,206,209,211,213,217,219,222,225,228,230,233,236,239,241],{"class":43,"line":194},8,[41,196,171],{"class":51},[41,198,199],{"class":134},"button",[41,201,202],{"class":94}," onClick",[41,204,205],{"class":51},"={()",[41,207,208],{"class":94}," =>",[41,210,123],{"class":98},[41,212,135],{"class":55},[41,214,216],{"class":215},"sHdIc","c",[41,218,208],{"class":94},[41,220,221],{"class":55}," c ",[41,223,224],{"class":51},"+",[41,226,227],{"class":138}," 1",[41,229,142],{"class":55},[41,231,232],{"class":51},"}>",[41,234,235],{"class":55},"+1",[41,237,238],{"class":51},"\u003C\u002F",[41,240,199],{"class":134},[41,242,165],{"class":51},[41,244,246,249,251],{"class":43,"line":245},9,[41,247,248],{"class":51},"    \u003C\u002F",[41,250,162],{"class":134},[41,252,165],{"class":51},[41,254,256,259],{"class":43,"line":255},10,[41,257,258],{"class":134},"  )",[41,260,75],{"class":51},[41,262,264],{"class":43,"line":263},11,[41,265,266],{"class":51},"}\n",[11,268,270],{"id":269},"when-youll-hear-this","When You'll Hear This",[16,272,273],{},"\"React is a library — you still need to choose a router and state manager.\" \u002F \"Everything in React is a component.\"",[275,276,277],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":36,"searchDepth":78,"depth":78,"links":279},[280,281,282,283],{"id":13,"depth":78,"text":14},{"id":21,"depth":78,"text":22},{"id":28,"depth":78,"text":29},{"id":269,"depth":78,"text":270},"frontend","React is a JavaScript library from Meta for building UIs out of components.","beginner","md","r",{},"\u002Fterms\u002Fr\u002Freact",[292,293,294,295,296],"Next.js","Hook","Virtual DOM","JSX","Component",{"title":5,"description":285},{"changefreq":299,"priority":300},"weekly",0.7,"terms\u002Fr\u002Freact","Ew3tR-5JFhMBrZLdm0wpIwV_SSZjhgcgYLmlNY-2Daw",[304,307,311,314,317],{"title":296,"path":305,"acronym":6,"category":284,"difficulty":286,"description":306},"\u002Fterms\u002Fc\u002Fcomponent","A component is a self-contained LEGO brick for your UI.",{"title":293,"path":308,"acronym":6,"category":284,"difficulty":309,"description":310},"\u002Fterms\u002Fh\u002Fhook","intermediate","Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only.",{"title":295,"path":312,"acronym":295,"category":284,"difficulty":286,"description":313},"\u002Fterms\u002Fj\u002Fjsx","JSX is a JavaScript syntax extension that lets you write HTML-like code directly inside your JavaScript.",{"title":292,"path":315,"acronym":6,"category":284,"difficulty":309,"description":316},"\u002Fterms\u002Fn\u002Fnext-js","Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes.",{"title":294,"path":318,"acronym":6,"category":284,"difficulty":309,"description":319},"\u002Fterms\u002Fv\u002Fvirtual-dom","The Virtual DOM is a lightweight copy of the real DOM that lives in memory.",1776518306075]