[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"term-c\u002Fcomponent":3,"related-c\u002Fcomponent":205},{"id":4,"title":5,"acronym":6,"body":7,"category":185,"description":186,"difficulty":187,"extension":188,"letter":189,"meta":190,"navigation":116,"path":191,"related":192,"seo":199,"sitemap":200,"stem":203,"subcategory":6,"__hash__":204},"terms\u002Fterms\u002Fc\u002Fcomponent.md","Component",null,{"type":8,"value":9,"toc":179},"minimark",[10,15,19,23,26,30,168,172,175],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A component is a self-contained LEGO brick for your UI. It's a chunk of HTML, CSS, and JavaScript bundled together that you can drop anywhere and reuse as many times as you want. Build once, use everywhere, fix in one place.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A component is a reusable, encapsulated unit of UI that manages its own template, logic, and styles. Modern frameworks like React, Vue, Angular, and Svelte are all component-based. Components accept inputs (props), manage internal state, and emit events.",[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-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Vue component -->\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Clicked {{ count }} times\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst count = ref(0);\n\u003C\u002Fscript>\n","vue","",[38,39,40,49,63,102,111,118,131,159],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Vue component -->\n",[41,50,52,56,60],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","template",[41,61,62],{"class":54},">\n",[41,64,66,69,72,76,79,82,86,88,91,95,98,100],{"class":43,"line":65},3,[41,67,68],{"class":54},"  \u003C",[41,70,71],{"class":58},"button",[41,73,75],{"class":74},"spNyl"," @click",[41,77,78],{"class":54},"=",[41,80,81],{"class":54},"\"",[41,83,85],{"class":84},"sfazB","count++",[41,87,81],{"class":54},[41,89,90],{"class":54},">",[41,92,94],{"class":93},"sTEyZ","Clicked {{ count }} times",[41,96,97],{"class":54},"\u003C\u002F",[41,99,71],{"class":58},[41,101,62],{"class":54},[41,103,105,107,109],{"class":43,"line":104},4,[41,106,97],{"class":54},[41,108,59],{"class":58},[41,110,62],{"class":54},[41,112,114],{"class":43,"line":113},5,[41,115,117],{"emptyLinePlaceholder":116},true,"\n",[41,119,121,123,126,129],{"class":43,"line":120},6,[41,122,55],{"class":54},[41,124,125],{"class":58},"script",[41,127,128],{"class":74}," setup",[41,130,62],{"class":54},[41,132,134,137,140,142,146,149,153,156],{"class":43,"line":133},7,[41,135,136],{"class":74},"const",[41,138,139],{"class":93}," count ",[41,141,78],{"class":54},[41,143,145],{"class":144},"s2Zo4"," ref",[41,147,148],{"class":93},"(",[41,150,152],{"class":151},"sbssI","0",[41,154,155],{"class":93},")",[41,157,158],{"class":54},";\n",[41,160,162,164,166],{"class":43,"line":161},8,[41,163,97],{"class":54},[41,165,125],{"class":58},[41,167,62],{"class":54},[11,169,171],{"id":170},"when-youll-hear-this","When You'll Hear This",[16,173,174],{},"\"Extract that into a component so we can reuse it in three places.\" \u002F \"The Button component needs a size prop.\"",[176,177,178],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":51,"depth":51,"links":180},[181,182,183,184],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":170,"depth":51,"text":171},"frontend","A component is a self-contained LEGO brick for your UI.","beginner","md","c",{},"\u002Fterms\u002Fc\u002Fcomponent",[193,194,195,196,197,198],"Props","State","Lifecycle","Slot","Vue","React",{"title":5,"description":186},{"changefreq":201,"priority":202},"weekly",0.7,"terms\u002Fc\u002Fcomponent","V5YS5Jav-FAq7fEuXNf4Potw9FsNcAv7JwANdaxmn34",[206,210,213,216,219,222],{"title":195,"path":207,"acronym":6,"category":185,"difficulty":208,"description":209},"\u002Fterms\u002Fl\u002Flifecycle","intermediate","The lifecycle is a component's life story — it's born (mounted), lives and updates (updates), then dies (unmounted).",{"title":193,"path":211,"acronym":6,"category":185,"difficulty":187,"description":212},"\u002Fterms\u002Fp\u002Fprops","Props are how you pass information INTO a component, like giving a coffee machine its settings.",{"title":198,"path":214,"acronym":6,"category":185,"difficulty":187,"description":215},"\u002Fterms\u002Fr\u002Freact","React is a JavaScript library from Meta for building UIs out of components.",{"title":196,"path":217,"acronym":6,"category":185,"difficulty":208,"description":218},"\u002Fterms\u002Fs\u002Fslot","A slot is a placeholder in a component where a parent can inject its own custom content.",{"title":194,"path":220,"acronym":6,"category":185,"difficulty":187,"description":221},"\u002Fterms\u002Fs\u002Fstate","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",{"title":197,"path":223,"acronym":6,"category":185,"difficulty":187,"description":224},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518268011]