{"id":294,"date":"2026-11-06T13:58:34","date_gmt":"2026-11-06T13:58:34","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=294"},"modified":"2026-11-06T13:58:34","modified_gmt":"2026-11-06T13:58:34","slug":"react-series-part-3-components-and-props","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/","title":{"rendered":"React Part 3: Components and Props: Building Reusable UI"},"content":{"rendered":"\n<div class=\"dd-post\">\n<style>\n.single article:has(.dd-hero) .entry-media{display:none}\n.dd-post{--navy:#0b1020;--blue:#3178c6;--violet:#7c5cff;--ink:#1f2433;--muted:#5b6275;--line:#e3e6ef;font-size:17px;line-height:1.75;color:var(--ink)}\n.dd-post h2{margin:2.2em 0 .6em;font-size:1.6em;line-height:1.3;scroll-margin-top:90px}\n.dd-post h3{margin:1.6em 0 .5em;font-size:1.22em;scroll-margin-top:90px}\n.dd-post a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}\n.dd-post pre{background:#0f1430;color:#e6e9f5;padding:18px 20px;border-radius:12px;overflow-x:auto;line-height:1.6;border:1px solid #232a52;margin:1.2em 0;font-size:14.5px !important}\n.dd-post pre code{font-size:1em !important;background:none;color:inherit;padding:0;font-family:\"JetBrains Mono\",\"Fira Code\",Consolas,Menlo,monospace;white-space:pre}\n.dd-post :not(pre)>code{background:#eef1fb;color:#2b3a8f;padding:2px 6px;border-radius:5px;font-size:.9em}\n.dd-post .dd-file{display:inline-block;background:#151b3b;color:#c9d1ff;font:600 13px\/1 \"JetBrains Mono\",Consolas,monospace;padding:7px 12px;border-radius:8px 8px 0 0;margin:1em 0 -1.2em;position:relative}\n.dd-post .dd-hero{margin:0 0 1.6em;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(11,16,32,.25)}\n.dd-post .dd-hero svg{display:block;width:100%;height:auto}\n.dd-post .dd-hero .node{transition:transform .25s,filter .25s;transform-box:fill-box;transform-origin:center;cursor:pointer}\n.dd-post .dd-hero .node:hover{transform:scale(1.08);filter:drop-shadow(0 0 10px #7c5cff)}\n.dd-post .dd-series{display:inline-flex;align-items:center;gap:8px;background:#151b3b;color:#dfe3ff;border-radius:999px;padding:6px 14px;font-size:.88em;font-weight:600;margin:0 0 .8em}\n.dd-post .dd-series span{background:var(--violet);color:#fff;border-radius:999px;padding:2px 10px}\n.dd-post .dd-prereq{font-size:.96em;color:var(--muted);border-left:3px solid var(--line);padding-left:12px;margin:.6em 0 1.2em}\n.dd-post .dd-summary{background:linear-gradient(135deg,#eef3ff,#f4efff);border:1px solid #d6dcf5;border-left:5px solid var(--violet);border-radius:12px;padding:18px 22px;margin:1.4em 0}\n.dd-post .dd-summary strong.lbl{display:block;font-size:1.05em;margin-bottom:6px;color:#3a2fa0}\n.dd-post .dd-summary ul{margin:.3em 0 0 1.1em}\n.dd-post .dd-toc{background:#f8f9fc;border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin:1.4em 0}\n.dd-post .dd-toc ol{margin:.4em 0 0 1.2em;columns:2;column-gap:28px}\n.dd-post .dd-toc li{break-inside:avoid;margin:.15em 0}\n@media(max-width:640px){.dd-post .dd-toc ol{columns:1}}\n.dd-post .dd-tip,.dd-post .dd-note,.dd-post .dd-warn{border-radius:10px;padding:14px 18px;margin:1.3em 0}\n.dd-post .dd-tip{background:#ecfbf3;border-left:4px solid #1f9d61}\n.dd-post .dd-note{background:#eef4ff;border-left:4px solid var(--blue)}\n.dd-post .dd-warn{background:#fff6e8;border-left:4px solid #e08a00}\n.dd-post .dd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.3em 0}\n.dd-post .dd-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;box-shadow:0 2px 8px rgba(20,30,70,.05)}\n.dd-post .dd-card b{display:block;color:#3a2fa0;margin-bottom:4px}\n.dd-post table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.95em}\n.dd-post th,.dd-post td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}\n.dd-post th{background:#151b3b;color:#fff}\n.dd-post tr:nth-child(even) td{background:#f8f9fc}\n.dd-post .dd-tablewrap{overflow-x:auto}\n.dd-post figure{margin:1.6em 0;text-align:center}\n.dd-post figure svg{width:100%;height:auto;border-radius:12px}\n.dd-post figcaption{font-size:.9em;color:var(--muted);margin-top:8px}\n.dd-post details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:.7em 0;background:#fff}\n.dd-post details summary{cursor:pointer;font-weight:600}\n.dd-post details[open] summary{margin-bottom:8px;color:#3a2fa0}\n.dd-post .dd-roadmap{border:2px solid #d6dcf5;background:#fbfbff}\n.dd-post .dd-roadmap h4{margin:1em 0 .3em;color:#151b3b;font-size:1em;text-transform:uppercase;letter-spacing:.04em}\n.dd-post .dd-roadmap ol{margin:.2em 0 .6em 1.4em;padding:0}\n.dd-post .dd-roadmap li{margin:.2em 0}\n.dd-post .dd-roadmap .here{background:var(--violet);color:#fff;border-radius:999px;padding:1px 9px;font-size:.8em;font-weight:700;margin-left:6px}\n.dd-post .dd-roadmap .soon{color:#8a90a6;font-size:.82em;margin-left:6px}\n.dd-post .dd-tabs{border:1px solid var(--line);border-radius:12px;padding:6px 16px 16px;margin:1.4em 0;background:#fbfbfe}\n.dd-post .dd-tabs>input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-tabs .labels label{display:inline-block;padding:8px 16px;margin:10px 6px 0 0;border-radius:999px;border:1px solid #cfd5ea;cursor:pointer;font-weight:600;font-size:.95em;background:#fff;transition:background .2s}\n.dd-post .dd-tabs .labels label:hover{border-color:var(--violet)}\n.dd-post .dd-tabs .panel{display:none;margin-top:12px}\n.dd-post .dd-tabs #ti1:checked~.labels label[for=ti1],.dd-post .dd-tabs #ti2:checked~.labels label[for=ti2],.dd-post .dd-tabs #ti3:checked~.labels label[for=ti3],.dd-post .dd-tabs #ti4:checked~.labels label[for=ti4]{background:var(--violet);color:#fff;border-color:var(--violet)}\n.dd-post .dd-tabs #ti1:checked~.p1,.dd-post .dd-tabs #ti2:checked~.p2,.dd-post .dd-tabs #ti3:checked~.p3,.dd-post .dd-tabs #ti4:checked~.p4{display:block}\n.dd-post .dd-tabs #ti1:focus-visible~.labels label[for=ti1],.dd-post .dd-tabs #ti2:focus-visible~.labels label[for=ti2],.dd-post .dd-tabs #ti3:focus-visible~.labels label[for=ti3],.dd-post .dd-tabs #ti4:focus-visible~.labels label[for=ti4]{outline:2px solid var(--blue);outline-offset:2px}\n.dd-post .dd-cta{background:linear-gradient(135deg,#0b1020,#151b3b);color:#e8ebff;border-radius:16px;padding:24px 26px;margin:2em 0;text-align:center}\n.dd-post .dd-cta h3{color:#fff;margin-top:0}\n.dd-post .dd-cta a{color:#a99bff}\n.dd-post .dd-vsc{position:relative;margin:1.5em 0;border-radius:12px;overflow:hidden;background:#1e1e1e;border:1px solid #2b2b2b;box-shadow:0 14px 34px rgba(0,0,0,.28);font-family:\"Segoe UI\",system-ui,sans-serif}\n.dd-post .dd-vsc>input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-vsc-bar{display:flex;align-items:center;gap:12px;background:#323233;color:#cccccc;font-size:12.5px;padding:8px 12px}\n.dd-post .dd-dots{display:inline-flex;gap:7px}.dd-post .dd-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57;display:block}.dd-post .dd-dots i:nth-child(2){background:#febc2e}.dd-post .dd-dots i:nth-child(3){background:#28c840}\n.dd-post .dd-vsc-title{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:50px;opacity:.85}\n.dd-post .dd-vsc-tabs{display:flex;align-items:stretch;background:#252526;border-bottom:1px solid #1e1e1e;overflow-x:auto}\n.dd-post .dd-vsc-tabs label{display:flex;align-items:center;gap:7px;padding:9px 16px;color:#969696;font-size:13px;cursor:pointer;background:#2d2d2d;border-right:1px solid #252526;border-top:1px solid transparent;white-space:nowrap;margin:0;transition:color .15s}\n.dd-post .dd-vsc-tabs label:hover{color:#e0e0e0}\n.dd-post .dd-vsc-tabs .ic{font:700 9.5px\/1 Consolas,monospace;padding:3px 4px;border-radius:3px;color:#1e1e1e}\n.dd-post .ic.py{background:#ffd43b}.dd-post .ic.js{background:#f1e05a}.dd-post .ic.sh{background:#89e051}\n.dd-post .dd-vsc-tabs label.run{margin-left:auto;background:transparent;border:0;color:#89d185;font-weight:600;display:none}\n.dd-post .dd-vsc-tabs label.run:hover{color:#b5f0b0;background:#2a2d2e}\n.dd-post .dd-vsc-pane{display:none}\n.dd-post .dd-vsc>.f1:checked~.dd-vsc-tabs .t1,.dd-post .dd-vsc>.f2:checked~.dd-vsc-tabs .t2,.dd-post .dd-vsc>.f3:checked~.dd-vsc-tabs .t3{background:#1e1e1e;color:#ffffff;border-top-color:#3178c6}\n.dd-post .dd-vsc>.f1:checked~.p1,.dd-post .dd-vsc>.f2:checked~.p2,.dd-post .dd-vsc>.f3:checked~.p3{display:block}\n.dd-post .dd-vsc>.f1:checked~.dd-vsc-tabs .run1,.dd-post .dd-vsc>.f2:checked~.dd-vsc-tabs .run2,.dd-post .dd-vsc>.f3:checked~.dd-vsc-tabs .run3{display:flex}\n.dd-post .dd-vsc>.f1:focus-visible~.dd-vsc-tabs .t1,.dd-post .dd-vsc>.f2:focus-visible~.dd-vsc-tabs .t2,.dd-post .dd-vsc>.f3:focus-visible~.dd-vsc-tabs .t3,.dd-post .dd-vsc>input[type=checkbox]:focus-visible~.dd-vsc-tabs .run{outline:2px solid #3178c6;outline-offset:-2px}\n.dd-post .dd-vsc-crumbs{background:#1e1e1e;color:#a9a9a9;font-size:12px;padding:5px 16px 2px}\n.dd-post .dd-vsc pre.dd-vsc-code{background:#1e1e1e;color:#d4d4d4;border:0;border-radius:0;margin:0;padding:8px 0 14px;counter-reset:ln;line-height:1.62;overflow-x:auto}\n.dd-post .dd-vsc pre code{font-family:Consolas,\"JetBrains Mono\",\"Fira Code\",Menlo,monospace;color:inherit;background:none;white-space:pre}\n.dd-post .dd-vsc .l{display:inline-block;min-width:100%;padding-right:18px;box-sizing:border-box}\n.dd-post .dd-vsc .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:3.2em;padding-right:1.4em;text-align:right;color:#6e7681;user-select:none;-webkit-user-select:none}\n.dd-post .dd-vsc .l:hover{background:#2a2d2e}.dd-post .dd-vsc .l:hover::before{color:#c6c6c6}\n.dd-post .dd-vsc .k,.dd-post .dd-vsc .kn{color:#c586c0}.dd-post .dd-vsc .kc{color:#569cd6}.dd-post .dd-vsc .s{color:#ce9178}.dd-post .dd-vsc .c{color:#6a9955}.dd-post .dd-vsc .m{color:#b5cea8}.dd-post .dd-vsc .nf{color:#dcdcaa}.dd-post .dd-vsc .nc{color:#4ec9b0}.dd-post .dd-vsc .nb{color:#4ec9b0}.dd-post .dd-vsc .nd{color:#dcdcaa}.dd-post .dd-vsc .n{color:#9cdcfe}.dd-post .dd-vsc .o{color:#d4d4d4}.dd-post .dd-vsc .gp{color:#89d185;user-select:none;-webkit-user-select:none}\n.dd-post .dd-vsc-term{display:none;border-top:1px solid #3c3c3c;background:#181818}\n.dd-post .dd-vsc>.r1:checked~.p1 .dd-vsc-term,.dd-post .dd-vsc>.r2:checked~.p2 .dd-vsc-term,.dd-post .dd-vsc>.r3:checked~.p3 .dd-vsc-term{display:block;animation:ddterm .35s ease-out}\n@keyframes ddterm{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\n.dd-post .dd-term-head{display:flex;gap:18px;align-items:center;font-size:11px;letter-spacing:.06em;color:#8b8b8b;padding:7px 16px 0}\n.dd-post .dd-term-head span:first-child{color:#e7e7e7;border-bottom:1px solid #e7e7e7;padding-bottom:4px}\n.dd-post .dd-term-head .dd-term-note{margin-left:auto;letter-spacing:0;text-transform:none;color:#d7ba7d;border:0;font-size:11.5px}\n.dd-post .dd-vsc-term pre{background:#181818;color:#cccccc;border:0;margin:0;padding:10px 16px 14px;border-radius:0}\n.dd-post .dd-vsc-status{display:flex;flex-wrap:wrap;gap:4px 14px;background:#007acc;color:#fff;font-size:11.5px;padding:4px 12px}\n.dd-post .dd-vsc-status .sp{flex:1}\n.dd-post .dd-vsc-termonly pre.dd-vsc-code{background:#181818;padding:12px 16px}\n@media(max-width:640px){.dd-post .dd-vsc-title{padding-right:0;text-align:left}.dd-post .dd-vsc-status span:nth-child(n+4){display:none}.dd-post .dd-vsc .l::before{width:2.2em;padding-right:1em}}\n.dd-post .dd-vsc-hint{font-size:.93em;color:var(--muted);margin-top:-.6em}\n.dd-post .dd-next{border:1px dashed var(--violet);border-radius:12px;padding:16px 20px;margin:1.6em 0;background:#f7f4ff}\n.dd-post .ic.yml{background:#cb3837;color:#fff}\n.dd-post .ic.jsx{background:#61dafb}.dd-post .ic.html{background:#e44d26;color:#fff}.dd-post .ic.css{background:#563d7c;color:#fff}\n.dd-post .dd-steps{counter-reset:st;list-style:none;margin:1.2em 0;padding:0}\n.dd-post .dd-steps>li{position:relative;padding:0 0 0 46px;margin:0 0 14px}\n.dd-post .dd-steps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3178c6,#7c5cff);color:#fff;font-weight:700;text-align:center;line-height:32px}\n<\/style>\n\n<div class=\"dd-hero\">\n<svg viewBox=\"0 0 1200 520\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"React series Part 3 banner: a parent App component passes props down to three reusable Card components\">\n<defs>\n<linearGradient id=\"ddbg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#0b1020\"\/><stop offset=\"1\" stop-color=\"#151b3b\"\/><\/linearGradient>\n<linearGradient id=\"ddac\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#3178c6\"\/><stop offset=\"1\" stop-color=\"#7c5cff\"\/><\/linearGradient>\n<radialGradient id=\"ddglow\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stop-color=\"#7c5cff\" stop-opacity=\".45\"\/><stop offset=\"1\" stop-color=\"#7c5cff\" stop-opacity=\"0\"\/><\/radialGradient>\n<\/defs>\n<rect x=\"0\" y=\"-60\" width=\"1200\" height=\"640\" fill=\"url(#ddbg)\"\/>\n<circle cx=\"900\" cy=\"250\" r=\"280\" fill=\"url(#ddglow)\"\/>\n<g opacity=\".12\" stroke=\"#9fb2ff\"><path d=\"M0 100H1200M0 200H1200M0 300H1200M0 400H1200M200 0V520M400 0V520M600 0V520M800 0V520M1000 0V520\"\/><\/g>\n<rect x=\"60\" y=\"46\" width=\"128\" height=\"38\" rx=\"19\" fill=\"url(#ddac)\"\/>\n<text x=\"124\" y=\"71\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"18\" font-weight=\"700\" fill=\"#fff\">PART 3<\/text>\n<text x=\"204\" y=\"71\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"18\" fill=\"#aab4e8\">React Series \u00b7 DevDojo<\/text>\n<text x=\"60\" y=\"150\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"56\" font-weight=\"800\" fill=\"#ffffff\">Components and Props<\/text>\n<text x=\"60\" y=\"208\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"40\" font-weight=\"800\" fill=\"#c9d1ff\">Building Reusable UI<\/text>\n<text x=\"60\" y=\"252\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"23\" fill=\"#aab4e8\">Write a component once, reuse it everywhere with different data<\/text>\n<path d=\"M600 345 V380 M600 380 H760 V410 M600 380 H440 V410 M600 380 V410\" fill=\"none\" stroke=\"url(#ddac)\" stroke-width=\"3\" stroke-dasharray=\"8 8\" opacity=\".8\"\/>\n<g class=\"node\"><rect x=\"470\" y=\"290\" width=\"260\" height=\"56\" rx=\"14\" fill=\"#1e1e1e\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"600\" y=\"326\" text-anchor=\"middle\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"20\" fill=\"#4ec9b0\">&lt;App \/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"330\" y=\"410\" width=\"220\" height=\"70\" rx=\"14\" fill=\"#0b1020\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"350\" y=\"440\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"16\" fill=\"#4ec9b0\">&lt;Card<\/text><text x=\"350\" y=\"464\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#9cdcfe\">title=<tspan fill=\"#ce9178\">&#8220;Profile&#8221;<\/tspan>\/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"570\" y=\"410\" width=\"60\" height=\"70\" rx=\"14\" fill=\"#0b1020\" stroke=\"#3178c6\" stroke-width=\"2\"\/><text x=\"600\" y=\"452\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"22\" font-weight=\"800\" fill=\"#c9d1ff\">\u2026<\/text><\/g>\n<g class=\"node\"><rect x=\"650\" y=\"410\" width=\"220\" height=\"70\" rx=\"14\" fill=\"#0b1020\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"670\" y=\"440\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"16\" fill=\"#4ec9b0\">&lt;Card<\/text><text x=\"670\" y=\"464\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#9cdcfe\">title=<tspan fill=\"#ce9178\">&#8220;Skills&#8221;<\/tspan>\/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"930\" y=\"300\" width=\"220\" height=\"150\" rx=\"14\" fill=\"#ffffff\" stroke=\"#3178c6\" stroke-width=\"2\"\/><text x=\"950\" y=\"334\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#3178c6\">props<\/text><text x=\"950\" y=\"364\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#151b3b\">{ title,<\/text><text x=\"950\" y=\"390\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#151b3b\">  children }<\/text><text x=\"950\" y=\"428\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#5b6275\">Data flows down, read-only<\/text><\/g>\n<circle r=\"7\" fill=\"#61dafb\"><animateMotion dur=\"2.6s\" repeatCount=\"indefinite\" path=\"M600 345 V380 H440 V410\"\/><\/circle>\n<circle r=\"7\" fill=\"#7c5cff\"><animateMotion dur=\"2.6s\" begin=\"1.3s\" repeatCount=\"indefinite\" path=\"M600 345 V380 H760 V410\"\/><\/circle>\n<text x=\"60\" y=\"500\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#7f89b5\">devdojo.co.in \u00b7 Beginner friendly \u00b7 React 19 + Vite 8<\/text>\n<\/svg>\n<\/div>\n\n<div class=\"dd-series\">Series: React <span>Part 3 of 30<\/span><\/div>\n<p class=\"dd-prereq\"><strong>What you should know first:<\/strong> read <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/\">React Part 1: What Is React and How to Build Your First React App<\/a> and <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/\">React Part 2: JSX Explained<\/a>. You should be able to start a Vite project and write simple JSX with curly braces.<\/p>\n\n<p>Every React app, from a small to-do list to Instagram&#8217;s web app, is built from one idea: <strong>React components and props<\/strong>. A component is a small, reusable piece of UI, like a button, a card or a whole page section. Props are the inputs you give a component so the same piece of UI can show different data. In this third part of the React series you will write your first components, split a page into a component tree, pass data with props, use the special <code>children<\/code> prop and build a small product list with a reusable <code>ProductCard<\/code>. Every example was run with React 19 and the output you see is real.<\/p>\n\n<div class=\"dd-summary\">\n<strong class=\"lbl\">Quick Summary<\/strong>\n<ul>\n<li>A <strong>component<\/strong> is a JavaScript function whose name starts with a capital letter and which returns JSX. You use it like a tag: <code>&lt;Greeting \/&gt;<\/code>.<\/li>\n<li><strong>Props<\/strong> are the attributes you write on that tag. React collects them into one object and passes it as the first argument of the function.<\/li>\n<li>Destructure props in the function signature: <code>function UserCard({ name, city = \"Remote\" })<\/code>. The <code>= \"Remote\"<\/code> part is a default value.<\/li>\n<li>Props are <strong>read-only<\/strong>. Data flows one way, from parent to child. A child never changes its props.<\/li>\n<li>The <code>children<\/code> prop holds whatever you put between the opening and closing tags, which lets you build wrapper components such as <code>Card<\/code> or <code>Layout<\/code>.<\/li>\n<li>You can pass any value as a prop: text, numbers, booleans, objects, arrays, other JSX and functions.<\/li>\n<\/ul>\n<\/div>\n\n<div class=\"dd-toc\">\n<strong>Table of contents<\/strong>\n<ol>\n<li><a href=\"#what-are-components\">What are React components?<\/a><\/li>\n<li><a href=\"#first-component\">Your first component<\/a><\/li>\n<li><a href=\"#thinking\">Thinking in components<\/a><\/li>\n<li><a href=\"#what-are-props\">What are props in React?<\/a><\/li>\n<li><a href=\"#read-only\">Props are read-only<\/a><\/li>\n<li><a href=\"#children\">The children prop<\/a><\/li>\n<li><a href=\"#prop-types\">What can you pass as a prop?<\/a><\/li>\n<li><a href=\"#full-example\">Build a reusable ProductCard<\/a><\/li>\n<li><a href=\"#errors\">Common errors and fixes<\/a><\/li>\n<li><a href=\"#best-practices\">Best practices<\/a><\/li>\n<li><a href=\"#practice\">Practice task<\/a><\/li>\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ol>\n<\/div>\n\n<details class=\"dd-roadmap\">\n<summary>Full React roadmap (30 parts)<\/summary>\n<h4>Beginner<\/h4>\n<ol start=\"1\">\n<li><a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/\">What Is React and How to Build Your First React App<\/a><\/li>\n<li><a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/\">JSX Explained: Writing HTML-Like Code in JavaScript<\/a><\/li>\n<li>Components and Props: Building Reusable UI <span class=\"here\">You are here<\/span><\/li>\n<li>State with useState: Making Components Interactive <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Handling Events and Forms in React <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Conditional Rendering and Lists with Keys <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Styling React Apps: Plain CSS, CSS Modules and Tailwind <span class=\"soon\">Coming soon<\/span><\/li>\n<li>useEffect: Side Effects, Data Fetching and Cleanup <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Lifting State Up: Sharing Data Between Components <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Mini Project: Build a To-Do App with React <span class=\"soon\">Coming soon<\/span><\/li>\n<\/ol>\n<h4>Intermediate<\/h4>\n<ol start=\"11\">\n<li>useRef: Working with the DOM and Keeping Values <span class=\"soon\">Coming soon<\/span><\/li>\n<li>useContext: Sharing Data Without Prop Drilling <span class=\"soon\">Coming soon<\/span><\/li>\n<li>useReducer: Managing Complex State <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Custom Hooks: Reusing Logic Across Components <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React Router: Pages, Links and Dynamic Routes <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Fetching Server Data with TanStack Query <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Forms the Modern Way: Actions, useActionState and Validation <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React with TypeScript: Typing Props, State and Events <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Global State: Context vs Zustand vs Redux Toolkit <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Testing React Apps with Vitest and React Testing Library <span class=\"soon\">Coming soon<\/span><\/li>\n<\/ol>\n<h4>Advanced<\/h4>\n<ol start=\"21\">\n<li>How Rendering Works: Re-renders, Reconciliation and Keys <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Performance: memo, useMemo, useCallback and the React Compiler <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Code Splitting with lazy() and Suspense <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Concurrent React: useTransition and useDeferredValue <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Error Boundaries and Handling Errors Gracefully <span class=\"soon\">Coming soon<\/span><\/li>\n<li>The use() API and Optimistic UI with useOptimistic <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React Server Components and Server Functions <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Accessibility in React Apps <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React Patterns for Large Apps: Folder Structure and Composition <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Final Project: Build and Deploy a Complete React App <span class=\"soon\">Coming soon<\/span><\/li>\n<\/ol>\n<\/details>\n\n<h2 id=\"what-are-components\">What are React components?<\/h2>\n<p>Look at any website and you will see repeated pieces: the same kind of card for every product, the same button style everywhere, the same header on every page. In plain HTML you copy and paste that markup again and again. When the design changes, you have to fix every copy.<\/p>\n<p>A React component solves this. You write the markup <strong>once<\/strong>, inside a function, give it a name and then reuse it as many times as you like. The official React docs describe components as &#8220;JavaScript functions that you can sprinkle with markup&#8221; (see <a href=\"https:\/\/react.dev\/learn\/your-first-component\" rel=\"noopener\" target=\"_blank\">Your First Component on react.dev<\/a>).<\/p>\n<div class=\"dd-cards\">\n<div class=\"dd-card\"><b>Reusable<\/b>Write a <code>Button<\/code> once and use it on every page.<\/div>\n<div class=\"dd-card\"><b>Easy to read<\/b><code>&lt;Header \/&gt;&lt;ProductList \/&gt;&lt;Footer \/&gt;<\/code> tells you the page layout at a glance.<\/div>\n<div class=\"dd-card\"><b>Easy to change<\/b>Fix a bug in <code>ProductCard<\/code> and every card on the site is fixed.<\/div>\n<div class=\"dd-card\"><b>Easy to test<\/b>Small components with clear inputs are simple to test later in the series.<\/div>\n<\/div>\n<div class=\"dd-note\"><strong>Function components only.<\/strong> Older tutorials show <em>class components<\/em> (<code>class App extends React.Component<\/code>). They still work, but all new React code, and this whole series, uses function components with hooks.<\/div>\n\n<h2 id=\"first-component\">Your first component<\/h2>\n<p>Start with the Vite project from Part 1, or create a fresh one:<\/p>\n<div class=\"dd-vsc dd-vsc-termonly\" role=\"group\" aria-label=\"Terminal: Terminal \u2014 react-components\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">Terminal \u2014 react-components<\/span><\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"c\"># Start from the Vite + React project you made in Part 1<\/span>\n<span class=\"gp\">$<\/span> npm create vite@latest react-components -- --template react\n<span class=\"gp\">$<\/span> cd react-components &amp;&amp; npm install\n<span class=\"c\"># Create a folder for your components<\/span>\n<span class=\"gp\">$<\/span> mkdir src\/components\n<span class=\"gp\">$<\/span> npm run dev\n<span class=\"c\"># Open the local URL Vite prints (usually http:\/\/localhost:5173)<\/span><\/code><\/pre>\n<\/div>\n<p>A component needs only three things: a function, a name that starts with a <strong>capital letter<\/strong>, and a <code>return<\/code> with JSX. Put each component in its own file and <code>export<\/code> it so other files can <code>import<\/code> it.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: Greeting.jsx, App.jsx, print.jsx\">\n<input type=\"radio\" name=\"v1\" id=\"v1f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v1\" id=\"v1f2\" class=\"f2\">\n<input type=\"radio\" name=\"v1\" id=\"v1f3\" class=\"f3\">\n<input type=\"checkbox\" id=\"v1r2\" class=\"r2\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">Greeting.jsx \u2014 react-components \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v1f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>Greeting.jsx<\/label>\n<label for=\"v1f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>App.jsx<\/label>\n<label for=\"v1f3\" class=\"t3\"><b class=\"ic jsx\">JSX<\/b>print.jsx<\/label>\n<label for=\"v1r2\" class=\"run run2\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">react-components \u203a src \u203a Greeting.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">\/\/ A component is a JavaScript function that returns JSX<\/span><\/span>\n<span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">Greeting<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> &lt;<span class=\"kc\">h2<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"greeting\"<\/span>&gt;Hello from my first component!&lt;\/<span class=\"kc\">h2<\/span>&gt;;<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 4, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p2\">\n<div class=\"dd-vsc-crumbs\">react-components \u203a src \u203a App.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> <span class=\"n\">Greeting<\/span> <span class=\"k\">from<\/span> <span class=\"s\">\".\/Greeting.jsx\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">App<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">main<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h1<\/span>&gt;My React App&lt;\/<span class=\"kc\">h1<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">Greeting<\/span> \/&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">Greeting<\/span> \/&gt;<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">main<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, esbuild 0.28, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js &amp;&amp; node out.js\n&lt;main&gt;\n&lt;h1&gt;My React App&lt;\/h1&gt;\n&lt;h2 class=\"greeting\"&gt;Hello from my first component!&lt;\/h2&gt;\n&lt;h2 class=\"greeting\"&gt;Hello from my first component!&lt;\/h2&gt;\n&lt;\/main&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 11, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p3\">\n<div class=\"dd-vsc-crumbs\">react-components \u203a src \u203a print.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">renderToStaticMarkup<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react-dom\/server\"<\/span>;<\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> <span class=\"n\">App<\/span> <span class=\"k\">from<\/span> <span class=\"s\">\".\/App.jsx\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"nb\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"nf\">renderToStaticMarkup<\/span>(&lt;<span class=\"nc\">App<\/span> \/&gt;).<span class=\"nf\">replaceAll<\/span>(<span class=\"s\">\"&gt;&lt;\"<\/span>, <span class=\"s\">\"&gt;\\n&lt;\"<\/span>));<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 4, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click the three tabs to see each file, then open <strong>App.jsx<\/strong> and click \u25b6 Run to see the HTML that React creates.<\/p>\n<p>A few things to notice:<\/p>\n<ul>\n<li><code>Greeting<\/code> starts with a capital G. React uses this to tell your components apart from HTML tags. <code>&lt;greeting \/&gt;<\/code> (lowercase) would be treated as an unknown HTML tag.<\/li>\n<li><code>export default<\/code> makes the component the main export of the file, and <code>import Greeting from \".\/Greeting.jsx\"<\/code> brings it in.<\/li>\n<li>We used <code>&lt;Greeting \/&gt;<\/code> twice and got two headings. That is reuse in its simplest form.<\/li>\n<li>The <code>print.jsx<\/code> file is only for this article: it uses <code>renderToStaticMarkup<\/code> from <code>react-dom\/server<\/code> to print the HTML in the terminal. In your Vite app, <code>main.jsx<\/code> renders <code>App<\/code> into the browser as you saw in Part 1.<\/li>\n<\/ul>\n<p>If you want to try the terminal trick yourself, this is the exact command we used for every example in this post:<\/p>\n<div class=\"dd-vsc dd-vsc-termonly\" role=\"group\" aria-label=\"Terminal: Terminal \u2014 print React output in Node.js\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">Terminal \u2014 print React output in Node.js<\/span><\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"c\"># Optional: see the HTML a component makes, without a browser<\/span>\n<span class=\"gp\">$<\/span> npm install -D esbuild\n<span class=\"gp\">$<\/span> npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js &amp;&amp; node out.js<\/code><\/pre>\n<\/div>\n<div class=\"dd-tip\"><strong>Tip:<\/strong> Never define a component <em>inside<\/em> another component. Always define them at the top level of a file. A component created inside another one is re-created on every render, which resets its state and slows your app down.<\/div>\n\n<h2 id=\"thinking\">Thinking in components<\/h2>\n<p>Before you write code for a new screen, draw boxes around each part of the design and give each box a name. A box that appears several times, or that has one clear job, is a good component. Boxes inside boxes become child components. The result is a <strong>component tree<\/strong> with <code>App<\/code> at the top.<\/p>\n<figure>\n<svg viewBox=\"0 0 1000 430\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"A shop page split into components on the left, and the same components drawn as a tree on the right\">\n<rect width=\"1000\" height=\"430\" rx=\"16\" fill=\"#f8f9fc\"\/>\n<text x=\"40\" y=\"44\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"700\" fill=\"#151b3b\">The page you see<\/text>\n<rect x=\"40\" y=\"62\" width=\"400\" height=\"340\" rx=\"12\" fill=\"#fff\" stroke=\"#cfd5ea\" stroke-width=\"2\"\/>\n<rect x=\"56\" y=\"78\" width=\"368\" height=\"48\" rx=\"8\" fill=\"#e8efff\" stroke=\"#3178c6\"\/><text x=\"72\" y=\"108\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#3178c6\" font-weight=\"700\">Header<\/text>\n<rect x=\"56\" y=\"140\" width=\"368\" height=\"190\" rx=\"8\" fill=\"#f4efff\" stroke=\"#7c5cff\"\/><text x=\"72\" y=\"164\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#7c5cff\" font-weight=\"700\">ProductList<\/text>\n<g font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"13\" fill=\"#151b3b\"><rect x=\"72\" y=\"176\" width=\"104\" height=\"140\" rx=\"8\" fill=\"#fff\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"82\" y=\"200\">ProductCard<\/text>\n<rect x=\"188\" y=\"176\" width=\"104\" height=\"140\" rx=\"8\" fill=\"#fff\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"198\" y=\"200\">ProductCard<\/text>\n<rect x=\"304\" y=\"176\" width=\"104\" height=\"140\" rx=\"8\" fill=\"#fff\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"314\" y=\"200\">ProductCard<\/text><\/g>\n<g fill=\"#e3e6ef\"><rect x=\"82\" y=\"212\" width=\"84\" height=\"44\" rx=\"6\"\/><rect x=\"198\" y=\"212\" width=\"84\" height=\"44\" rx=\"6\"\/><rect x=\"314\" y=\"212\" width=\"84\" height=\"44\" rx=\"6\"\/><rect x=\"82\" y=\"266\" width=\"60\" height=\"10\" rx=\"5\"\/><rect x=\"198\" y=\"266\" width=\"60\" height=\"10\" rx=\"5\"\/><rect x=\"314\" y=\"266\" width=\"60\" height=\"10\" rx=\"5\"\/><\/g>\n<g fill=\"#3178c6\"><rect x=\"82\" y=\"288\" width=\"70\" height=\"18\" rx=\"9\"\/><rect x=\"198\" y=\"288\" width=\"70\" height=\"18\" rx=\"9\"\/><rect x=\"314\" y=\"288\" width=\"70\" height=\"18\" rx=\"9\"\/><\/g>\n<rect x=\"56\" y=\"342\" width=\"368\" height=\"44\" rx=\"8\" fill=\"#ecfbf3\" stroke=\"#1f9d61\"\/><text x=\"72\" y=\"370\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#1f9d61\" font-weight=\"700\">Footer<\/text>\n<text x=\"520\" y=\"44\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"700\" fill=\"#151b3b\">The component tree<\/text>\n<g stroke=\"#9aa3c2\" stroke-width=\"2\" fill=\"none\"><path d=\"M740 112 V140 H580 V170 M740 140 V170 M740 140 H900 V170 M740 200 V236 H620 V266 M750 236 V266 M740 236 H880 V266\"\/><\/g>\n<g font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\">\n<rect x=\"680\" y=\"76\" width=\"120\" height=\"36\" rx=\"10\" fill=\"#151b3b\"\/><text x=\"740\" y=\"100\" text-anchor=\"middle\" fill=\"#61dafb\">App<\/text>\n<rect x=\"520\" y=\"170\" width=\"120\" height=\"32\" rx=\"10\" fill=\"#e8efff\" stroke=\"#3178c6\"\/><text x=\"580\" y=\"192\" text-anchor=\"middle\" fill=\"#3178c6\">Header<\/text>\n<rect x=\"670\" y=\"170\" width=\"140\" height=\"32\" rx=\"10\" fill=\"#f4efff\" stroke=\"#7c5cff\"\/><text x=\"740\" y=\"192\" text-anchor=\"middle\" fill=\"#7c5cff\">ProductList<\/text>\n<rect x=\"840\" y=\"170\" width=\"120\" height=\"32\" rx=\"10\" fill=\"#ecfbf3\" stroke=\"#1f9d61\"\/><text x=\"900\" y=\"192\" text-anchor=\"middle\" fill=\"#1f9d61\">Footer<\/text>\n<rect x=\"560\" y=\"266\" width=\"120\" height=\"32\" rx=\"10\" fill=\"#fff\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"620\" y=\"288\" text-anchor=\"middle\" fill=\"#151b3b\">ProductCard<\/text>\n<rect x=\"690\" y=\"266\" width=\"120\" height=\"32\" rx=\"10\" fill=\"#fff\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"750\" y=\"288\" text-anchor=\"middle\" fill=\"#151b3b\">ProductCard<\/text>\n<rect x=\"820\" y=\"266\" width=\"120\" height=\"32\" rx=\"10\" fill=\"#fff\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"880\" y=\"288\" text-anchor=\"middle\" fill=\"#151b3b\">ProductCard<\/text>\n<\/g>\n<text x=\"520\" y=\"350\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#5b6275\">One ProductCard component, used three times<\/text>\n<text x=\"520\" y=\"374\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#5b6275\">with different props (name, price, stock).<\/text>\n<\/svg>\n<figcaption>Thinking in components: split the page into boxes, give each box a name, and the boxes become a tree with <code>App<\/code> at the top.<\/figcaption>\n<\/figure>\n<p>A simple rule from the React team: a component should ideally do <strong>one thing<\/strong>. If it grows too big, split it into smaller children. For the page above, <code>App<\/code> renders <code>Header<\/code>, <code>ProductList<\/code> and <code>Footer<\/code>, and <code>ProductList<\/code> renders one <code>ProductCard<\/code> per product. But how does each card know which product to show? That is where props come in.<\/p>\n\n<h2 id=\"what-are-props\">What are props in React?<\/h2>\n<p><strong>Props<\/strong> (short for &#8220;properties&#8221;) are the inputs of a component. You pass them exactly like HTML attributes. React collects all of them into one object and hands it to your function as its first argument. Think of a component as a function and props as its arguments: <code>&lt;UserCard name=\"Asha\" \/&gt;<\/code> is like calling <code>UserCard({ name: \"Asha\" })<\/code>.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: UserCard.jsx\">\n<input type=\"radio\" name=\"v2\" id=\"v2f1\" class=\"f1\" checked>\n<input type=\"checkbox\" id=\"v2r1\" class=\"r1\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">UserCard.jsx \u2014 react-components \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v2f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>UserCard.jsx<\/label>\n<label for=\"v2r1\" class=\"run run1\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">react-components \u203a src \u203a UserCard.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">\/\/ Props arrive as ONE object. We destructure the keys we need.<\/span><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">UserCard<\/span>({ <span class=\"n\">name<\/span>, <span class=\"n\">role<\/span>, <span class=\"n\">city<\/span> = <span class=\"s\">\"Remote\"<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">div<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"user-card\"<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h3<\/span>&gt;{<span class=\"n\">name<\/span>}&lt;\/<span class=\"kc\">h3<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">p<\/span>&gt;{<span class=\"n\">role<\/span>} \u00b7 {<span class=\"n\">city<\/span>}&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">App<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">section<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">UserCard<\/span> <span class=\"n\">name<\/span>=<span class=\"s\">\"Asha\"<\/span> <span class=\"n\">role<\/span>=<span class=\"s\">\"Frontend Developer\"<\/span> <span class=\"n\">city<\/span>=<span class=\"s\">\"Pune\"<\/span> \/&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">UserCard<\/span> <span class=\"n\">name<\/span>=<span class=\"s\">\"Rahul\"<\/span> <span class=\"n\">role<\/span>=<span class=\"s\">\"Backend Developer\"<\/span> <span class=\"n\">city<\/span>=<span class=\"s\">\"Bengaluru\"<\/span> \/&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">UserCard<\/span> <span class=\"n\">name<\/span>=<span class=\"s\">\"Meera\"<\/span> <span class=\"n\">role<\/span>=<span class=\"s\">\"Designer\"<\/span> \/&gt;<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">section<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, Node.js 22, printed with renderToStaticMarkup)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js &amp;&amp; node out.js\n&lt;section&gt;\n&lt;div class=\"user-card\"&gt;\n&lt;h3&gt;Asha&lt;\/h3&gt;\n&lt;p&gt;Frontend Developer \u00b7 Pune&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"user-card\"&gt;\n&lt;h3&gt;Rahul&lt;\/h3&gt;\n&lt;p&gt;Backend Developer \u00b7 Bengaluru&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"user-card\"&gt;\n&lt;h3&gt;Meera&lt;\/h3&gt;\n&lt;p&gt;Designer \u00b7 Remote&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/section&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 19, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click \u25b6 Run. Notice Meera gets the default city &#8220;Remote&#8221; because no <code>city<\/code> prop was passed.<\/p>\n<p>Here the function signature uses <strong>destructuring<\/strong>: <code>{ name, role, city = \"Remote\" }<\/code> pulls those three keys out of the props object. It is the same as writing <code>function UserCard(props)<\/code> and then <code>props.name<\/code>, but shorter and easier to read. The <code>= \"Remote\"<\/code> part is a <strong>default value<\/strong>; it is used only when the prop is missing (or <code>undefined<\/code>).<\/p>\n<div class=\"dd-note\"><strong>Heads up:<\/strong> React 19 no longer supports the old <code>Component.defaultProps = {...}<\/code> for function components. Use default values in destructuring, as shown above.<\/div>\n\n<h2 id=\"read-only\">Props are read-only<\/h2>\n<p>Props belong to the <strong>parent<\/strong>. The child can read them, but it must never change them. This is called <em>one-way data flow<\/em>: data moves down the tree, from parent to child, and that makes apps much easier to understand and debug.<\/p>\n<figure>\n<svg viewBox=\"0 0 1000 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Props flow one way: the parent writes attributes, React collects them into one props object, the child reads it but cannot change it\">\n<rect width=\"1000\" height=\"300\" rx=\"16\" fill=\"#0b1020\"\/>\n<g opacity=\".12\" stroke=\"#9fb2ff\"><path d=\"M0 100H1000M0 200H1000M250 0V300M500 0V300M750 0V300\"\/><\/g>\n<rect x=\"30\" y=\"70\" width=\"290\" height=\"140\" rx=\"14\" fill=\"#1e1e1e\" stroke=\"#61dafb\" stroke-width=\"2\"\/>\n<text x=\"50\" y=\"102\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#61dafb\">1. Parent writes attributes<\/text>\n<text x=\"50\" y=\"140\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#4ec9b0\">&lt;UserCard<\/text>\n<text x=\"66\" y=\"164\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#9cdcfe\">name=<tspan fill=\"#ce9178\">&#8220;Asha&#8221;<\/tspan><\/text>\n<text x=\"66\" y=\"188\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#9cdcfe\">city=<tspan fill=\"#ce9178\">&#8220;Pune&#8221;<\/tspan> <tspan fill=\"#4ec9b0\">\/&gt;<\/tspan><\/text>\n<rect x=\"365\" y=\"70\" width=\"270\" height=\"140\" rx=\"14\" fill=\"#151b3b\" stroke=\"#7c5cff\" stroke-width=\"2\"\/>\n<text x=\"385\" y=\"102\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#b9a8ff\">2. React builds one object<\/text>\n<text x=\"385\" y=\"134\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"16\" fill=\"#e6e9f5\">props = {<\/text>\n<text x=\"405\" y=\"156\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"16\" fill=\"#e6e9f5\">name: <tspan fill=\"#ce9178\">&#8220;Asha&#8221;<\/tspan>,<\/text>\n<text x=\"405\" y=\"178\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"16\" fill=\"#e6e9f5\">city: <tspan fill=\"#ce9178\">&#8220;Pune&#8221;<\/tspan><\/text>\n<text x=\"385\" y=\"200\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"16\" fill=\"#e6e9f5\">}<\/text>\n<rect x=\"680\" y=\"70\" width=\"290\" height=\"140\" rx=\"14\" fill=\"#ffffff\" stroke=\"#3178c6\" stroke-width=\"2\"\/>\n<text x=\"700\" y=\"102\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#3178c6\">3. Child reads (read-only)<\/text>\n<text x=\"700\" y=\"140\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#151b3b\">function UserCard(<\/text>\n<text x=\"716\" y=\"164\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"15\" fill=\"#151b3b\">{ name, city }) { \u2026 }<\/text>\n<text x=\"700\" y=\"192\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#c0392b\">props.name = &#8220;x&#8221;  \u2192 TypeError<\/text>\n<g stroke=\"url(#fl)\" stroke-width=\"3\"><path d=\"M322 140 H360 M637 140 H675\" stroke=\"#7c5cff\"\/><\/g>\n<path d=\"M352 132 L362 140 L352 148 Z M667 132 L677 140 L667 148 Z\" fill=\"#7c5cff\"\/>\n<circle r=\"6\" fill=\"#61dafb\"><animateMotion dur=\"2.4s\" repeatCount=\"indefinite\" path=\"M322 140 H360\"\/><\/circle>\n<circle r=\"6\" fill=\"#7c5cff\"><animateMotion dur=\"2.4s\" begin=\"1.2s\" repeatCount=\"indefinite\" path=\"M637 140 H675\"\/><\/circle>\n<text x=\"500\" y=\"256\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"17\" fill=\"#aab4e8\">Data flows <tspan fill=\"#ffffff\" font-weight=\"700\">down<\/tspan> from parent to child. To change it, the parent passes new props.<\/text>\n<\/svg>\n<figcaption>One-way data flow: the parent owns the data, the child only reads its props.<\/figcaption>\n<\/figure>\n<p>React even protects you here. In development mode the props object is frozen, so trying to change it throws an error:<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: Badge.jsx\">\n<input type=\"radio\" name=\"v5\" id=\"v5f1\" class=\"f1\" checked>\n<input type=\"checkbox\" id=\"v5r1\" class=\"r1\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">Badge.jsx \u2014 react-components \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v5f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>Badge.jsx<\/label>\n<label for=\"v5r1\" class=\"run run1\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">react-components \u203a src \u203a Badge.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">Badge<\/span>(<span class=\"n\">props<\/span>) {<\/span>\n<span class=\"l\">  <span class=\"n\">props<\/span>.<span class=\"n\">label<\/span> = <span class=\"s\">\"Changed!\"<\/span>; <span class=\"c\">\/\/ \u274c never change props<\/span><\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> &lt;<span class=\"kc\">span<\/span>&gt;{<span class=\"n\">props<\/span>.<span class=\"n\">label<\/span>}&lt;\/<span class=\"kc\">span<\/span>&gt;;<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">FixedBadge<\/span>({ <span class=\"n\">label<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> <span class=\"n\">text<\/span> = <span class=\"n\">label<\/span>.<span class=\"nf\">toUpperCase<\/span>(); <span class=\"c\">\/\/ \u2705 make a new value instead<\/span><\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> &lt;<span class=\"kc\">span<\/span>&gt;{<span class=\"n\">text<\/span>}&lt;\/<span class=\"kc\">span<\/span>&gt;;<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3 development build, ES module)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> NODE_ENV=development node out.mjs\nTypeError: Cannot assign to read only property 'label' of object '#&lt;Object&gt;'<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 9, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click \u25b6 Run to see the error React throws in development mode when a component changes its props.<\/p>\n<p>So what do you do when something should change, like a counter or a &#8220;liked&#8221; button? You use <strong>state<\/strong>, which is exactly what we cover in the next part. For now remember: props are the settings a parent gives, state is the memory a component keeps for itself.<\/p>\n\n<h2 id=\"children\">The children prop: building wrapper components<\/h2>\n<p>Sometimes you want a component that <em>wraps<\/em> other content, like a card, a modal or a page layout. Whatever you place between the opening and closing tags arrives in a special prop called <code>children<\/code>.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: Card.jsx\">\n<input type=\"radio\" name=\"v3\" id=\"v3f1\" class=\"f1\" checked>\n<input type=\"checkbox\" id=\"v3r1\" class=\"r1\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">Card.jsx \u2014 react-components \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v3f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>Card.jsx<\/label>\n<label for=\"v3r1\" class=\"run run1\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">react-components \u203a src \u203a Card.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">\/\/ \"children\" is whatever you put between &lt;Card&gt; and &lt;\/Card&gt;<\/span><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">Card<\/span>({ <span class=\"n\">title<\/span>, <span class=\"n\">children<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">div<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"card\"<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h3<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"card-title\"<\/span>&gt;{<span class=\"n\">title<\/span>}&lt;\/<span class=\"kc\">h3<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">div<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"card-body\"<\/span>&gt;{<span class=\"n\">children<\/span>}&lt;\/<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">App<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">Card<\/span> <span class=\"n\">title<\/span>=<span class=\"s\">\"Profile\"<\/span>&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">p<\/span>&gt;Asha is learning React.&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;\/<span class=\"nc\">Card<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">Card<\/span> <span class=\"n\">title<\/span>=<span class=\"s\">\"Skills\"<\/span>&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">ul<\/span>&gt;<\/span>\n<span class=\"l\">          &lt;<span class=\"kc\">li<\/span>&gt;HTML&lt;\/<span class=\"kc\">li<\/span>&gt;<\/span>\n<span class=\"l\">          &lt;<span class=\"kc\">li<\/span>&gt;JavaScript&lt;\/<span class=\"kc\">li<\/span>&gt;<\/span>\n<span class=\"l\">        &lt;\/<span class=\"kc\">ul<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;\/<span class=\"nc\">Card<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;\/&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js &amp;&amp; node out.js\n&lt;div class=\"card\"&gt;\n&lt;h3 class=\"card-title\"&gt;Profile&lt;\/h3&gt;\n&lt;div class=\"card-body\"&gt;\n&lt;p&gt;Asha is learning React.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div class=\"card\"&gt;\n&lt;h3 class=\"card-title\"&gt;Skills&lt;\/h3&gt;\n&lt;div class=\"card-body\"&gt;\n&lt;ul&gt;\n&lt;li&gt;HTML&lt;\/li&gt;\n&lt;li&gt;JavaScript&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 25, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click \u25b6 Run to see how the content between the tags lands inside <code>card-body<\/code>.<\/p>\n<p>The <code>Card<\/code> does not care what is inside it: a paragraph, a list, even other components. This pattern is called <strong>composition<\/strong>, and it is how most layout components (<code>Layout<\/code>, <code>Modal<\/code>, <code>Panel<\/code>) are built. You will use it everywhere.<\/p>\n\n<h2 id=\"prop-types\">What can you pass as a prop?<\/h2>\n<p>Almost anything. Click through the tabs to see the four kinds of values you will use most often:<\/p>\n<div class=\"dd-tabs\">\n<input type=\"radio\" name=\"ddprops\" id=\"ti1\" checked>\n<input type=\"radio\" name=\"ddprops\" id=\"ti2\">\n<input type=\"radio\" name=\"ddprops\" id=\"ti3\">\n<input type=\"radio\" name=\"ddprops\" id=\"ti4\">\n<div class=\"labels\"><label for=\"ti1\">1. Text and numbers<\/label><label for=\"ti2\">2. True \/ false<\/label><label for=\"ti3\">3. Objects and arrays<\/label><label for=\"ti4\">4. Functions<\/label><\/div>\n<div class=\"panel p1\"><p><strong>Strings use quotes, everything else uses curly braces.<\/strong> Write <code>title=\"Hello\"<\/code> for plain text. For numbers and any JavaScript expression use braces: <code>price={899}<\/code>, <code>total={price * qty}<\/code>. If you write <code>price=\"899\"<\/code> the child receives the <em>text<\/em> &#8220;899&#8221;, not a number, and maths like <code>price + 1<\/code> gives &#8220;8991&#8221;.<\/p><\/div>\n<div class=\"panel p2\"><p><strong>Booleans switch things on and off.<\/strong> Writing just the name, like <code>&lt;ProductCard showBadge \/&gt;<\/code>, is the same as <code>showBadge={true}<\/code>. Leave it out and the value is <code>undefined<\/code>, which acts like false. Use <code>showBadge={false}<\/code> when you want to be clear. Common uses: <code>disabled<\/code>, <code>isActive<\/code>, <code>isOpen<\/code>.<\/p><\/div>\n<div class=\"panel p3\"><p><strong>Pass whole objects and arrays.<\/strong> <code>product={product}<\/code> sends one object, so the child can read <code>product.name<\/code> and <code>product.price<\/code>. Arrays work the same: <code>tags={[\"usb\", \"office\"]}<\/code>. Notice the <em>double<\/em> braces in <code>style={{ color: \"red\" }}<\/code>: the outer pair means &#8220;JavaScript here&#8221;, the inner pair is the object. You can also spread an object into props with <code>&lt;UserCard {...user} \/&gt;<\/code>.<\/p><\/div>\n<div class=\"panel p4\"><p><strong>Functions let the child talk back to the parent.<\/strong> The parent passes <code>onBuy={handleBuy}<\/code>; the child calls <code>onBuy(name)<\/code> when the button is clicked. By convention, props that are functions start with <code>on<\/code> (<code>onClick<\/code>, <code>onSave<\/code>), and the parent&#8217;s handler starts with <code>handle<\/code>. Pass the function itself, not <code>handleBuy()<\/code>, or it runs immediately during render.<\/p><\/div>\n<\/div>\n\n<h2 id=\"full-example\">Build a reusable ProductCard<\/h2>\n<p>Let&#8217;s put everything together. One <code>ProductCard<\/code> component receives a product <strong>object<\/strong>, a <strong>function<\/strong> prop and a <strong>boolean<\/strong> prop. The parent <code>App<\/code> loops over an array with <code>map()<\/code> (you saw this in Part 2) and renders one card per product. Each card gets a <code>key<\/code> so React can track it; we go deeper into keys in Part 6.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: ProductCard.jsx, App.jsx\">\n<input type=\"radio\" name=\"v4\" id=\"v4f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v4\" id=\"v4f2\" class=\"f2\">\n<input type=\"checkbox\" id=\"v4r2\" class=\"r2\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">ProductCard.jsx \u2014 mini-shop \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v4f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>ProductCard.jsx<\/label>\n<label for=\"v4f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>App.jsx<\/label>\n<label for=\"v4r2\" class=\"run run2\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">mini-shop \u203a src \u203a components \u203a ProductCard.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">ProductCard<\/span>({ <span class=\"n\">product<\/span>, <span class=\"n\">onBuy<\/span>, <span class=\"n\">showBadge<\/span> = <span class=\"kc\">false<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> { <span class=\"n\">name<\/span>, <span class=\"n\">price<\/span>, <span class=\"n\">inStock<\/span>, <span class=\"n\">tags<\/span> } = <span class=\"n\">product<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">article<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"product\"<\/span>&gt;<\/span>\n<span class=\"l\">      {<span class=\"n\">showBadge<\/span> &amp;&amp; &lt;<span class=\"kc\">span<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"badge\"<\/span>&gt;Best seller&lt;\/<span class=\"kc\">span<\/span>&gt;}<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h3<\/span>&gt;{<span class=\"n\">name<\/span>}&lt;\/<span class=\"kc\">h3<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">p<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"price\"<\/span>&gt;\u20b9{<span class=\"n\">price<\/span>.<span class=\"nf\">toLocaleString<\/span>(<span class=\"s\">\"en-IN\"<\/span>)}&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">p<\/span>&gt;{<span class=\"n\">inStock<\/span> ? <span class=\"s\">\"In stock\"<\/span> : <span class=\"s\">\"Out of stock\"<\/span>}&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">p<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"tags\"<\/span>&gt;{<span class=\"n\">tags<\/span>.<span class=\"nf\">join<\/span>(<span class=\"s\">\", \"<\/span>)}&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">button<\/span> <span class=\"n\">disabled<\/span>={!<span class=\"n\">inStock<\/span>} <span class=\"n\">onClick<\/span>={() =&gt; <span class=\"nf\">onBuy<\/span>(<span class=\"n\">name<\/span>)}&gt;<\/span>\n<span class=\"l\">        <span class=\"n\">Buy<\/span> <span class=\"n\">now<\/span><\/span>\n<span class=\"l\">      &lt;\/<span class=\"kc\">button<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">article<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 16, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p2\">\n<div class=\"dd-vsc-crumbs\">mini-shop \u203a src \u203a App.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> <span class=\"n\">ProductCard<\/span> <span class=\"k\">from<\/span> <span class=\"s\">\".\/ProductCard.jsx\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">const<\/span> <span class=\"n\">products<\/span> = [<\/span>\n<span class=\"l\">  { <span class=\"n\">id<\/span>: <span class=\"m\">1<\/span>, <span class=\"n\">name<\/span>: <span class=\"s\">\"Wireless Mouse\"<\/span>, <span class=\"n\">price<\/span>: <span class=\"m\">899<\/span>, <span class=\"n\">inStock<\/span>: <span class=\"kc\">true<\/span>, <span class=\"n\">tags<\/span>: [<span class=\"s\">\"usb\"<\/span>, <span class=\"s\">\"office\"<\/span>] },<\/span>\n<span class=\"l\">  { <span class=\"n\">id<\/span>: <span class=\"m\">2<\/span>, <span class=\"n\">name<\/span>: <span class=\"s\">\"Mechanical Keyboard\"<\/span>, <span class=\"n\">price<\/span>: <span class=\"m\">3499<\/span>, <span class=\"n\">inStock<\/span>: <span class=\"kc\">true<\/span>, <span class=\"n\">tags<\/span>: [<span class=\"s\">\"rgb\"<\/span>, <span class=\"s\">\"gaming\"<\/span>] },<\/span>\n<span class=\"l\">  { <span class=\"n\">id<\/span>: <span class=\"m\">3<\/span>, <span class=\"n\">name<\/span>: <span class=\"s\">\"4K Monitor\"<\/span>, <span class=\"n\">price<\/span>: <span class=\"m\">24999<\/span>, <span class=\"n\">inStock<\/span>: <span class=\"kc\">false<\/span>, <span class=\"n\">tags<\/span>: [<span class=\"s\">\"display\"<\/span>] },<\/span>\n<span class=\"l\">];<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">handleBuy<\/span>(<span class=\"n\">name<\/span>) {<\/span>\n<span class=\"l\">  <span class=\"nb\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"s\">`Added ${<\/span><span class=\"n\">name<\/span><span class=\"s\">} to cart`<\/span>);<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">App<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">div<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"shop\"<\/span>&gt;<\/span>\n<span class=\"l\">      {<span class=\"n\">products<\/span>.<span class=\"nf\">map<\/span>((<span class=\"n\">p<\/span>) =&gt; (<\/span>\n<span class=\"l\">        &lt;<span class=\"nc\">ProductCard<\/span> <span class=\"n\">key<\/span>={<span class=\"n\">p<\/span>.<span class=\"n\">id<\/span>} <span class=\"n\">product<\/span>={<span class=\"n\">p<\/span>} <span class=\"n\">onBuy<\/span>={<span class=\"n\">handleBuy<\/span>} <span class=\"n\">showBadge<\/span>={<span class=\"n\">p<\/span>.<span class=\"n\">id<\/span> === <span class=\"m\">2<\/span>} \/&gt;<\/span>\n<span class=\"l\">      ))}<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js &amp;&amp; node out.js\n&lt;div class=\"shop\"&gt;\n&lt;article class=\"product\"&gt;\n&lt;h3&gt;Wireless Mouse&lt;\/h3&gt;\n&lt;p class=\"price\"&gt;\u20b9899&lt;\/p&gt;\n&lt;p&gt;In stock&lt;\/p&gt;\n&lt;p class=\"tags\"&gt;usb, office&lt;\/p&gt;\n&lt;button&gt;Buy now&lt;\/button&gt;\n&lt;\/article&gt;\n&lt;article class=\"product\"&gt;\n&lt;span class=\"badge\"&gt;Best seller&lt;\/span&gt;\n&lt;h3&gt;Mechanical Keyboard&lt;\/h3&gt;\n&lt;p class=\"price\"&gt;\u20b93,499&lt;\/p&gt;\n&lt;p&gt;In stock&lt;\/p&gt;\n&lt;p class=\"tags\"&gt;rgb, gaming&lt;\/p&gt;\n&lt;button&gt;Buy now&lt;\/button&gt;\n&lt;\/article&gt;\n&lt;article class=\"product\"&gt;\n&lt;h3&gt;4K Monitor&lt;\/h3&gt;\n&lt;p class=\"price\"&gt;\u20b924,999&lt;\/p&gt;\n&lt;p&gt;Out of stock&lt;\/p&gt;\n&lt;p class=\"tags\"&gt;display&lt;\/p&gt;\n&lt;button disabled=\"\"&gt;Buy now&lt;\/button&gt;\n&lt;\/article&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 21, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Open the <strong>App.jsx<\/strong> tab and click \u25b6 Run. The disabled button and the &#8220;Best seller&#8221; badge both come from props.<\/p>\n<p>Look at the output: the same component produced three different cards. The price is formatted in Indian style with <code>toLocaleString(\"en-IN\")<\/code>, the out-of-stock monitor has <code>disabled<\/code> on its button, and only the keyboard shows the badge. In the browser, clicking &#8220;Buy now&#8221; calls <code>handleBuy<\/code> in the parent, which logs <code>Added Mechanical Keyboard to cart<\/code> in the console.<\/p>\n<p>To use it in your Vite app, save <code>ProductCard.jsx<\/code> in <code>src\/components\/<\/code>, put the <code>App<\/code> code in <code>src\/App.jsx<\/code> (adjust the import path to <code>.\/components\/ProductCard.jsx<\/code>) and run <code>npm run dev<\/code>.<\/p>\n\n<h2 id=\"errors\">Common errors and fixes<\/h2>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>Problem or message<\/th><th>Why it happens<\/th><th>Fix<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>Component does not show, warning &#8220;The tag &lt;greeting&gt; is unrecognized in this browser&#8221;<\/td><td>Component name starts with a lowercase letter<\/td><td>Rename to <code>Greeting<\/code> (PascalCase)<\/td><\/tr>\n<tr><td>&#8220;does not provide an export named &#8216;default'&#8221;<\/td><td>The file uses a named export (<code>export function Card<\/code>) but you import it as default<\/td><td>Use <code>import { Card } from \".\/Card.jsx\"<\/code>, or add <code>export default<\/code><\/td><\/tr>\n<tr><td>&#8220;Cannot read properties of undefined (reading &#8216;name&#8217;)&#8221;<\/td><td>The parent forgot to pass the <code>product<\/code> prop, or misspelled it<\/td><td>Check the prop name on both sides; add a default or a guard<\/td><\/tr>\n<tr><td>&#8220;Cannot assign to read only property&#8221;<\/td><td>The component tried to change its props<\/td><td>Make a new variable, or move the value into state (Part 4)<\/td><\/tr>\n<tr><td>Prop is <code>undefined<\/code> even though you passed it<\/td><td>You wrote <code>function Card(title)<\/code> instead of <code>function Card({ title })<\/code><\/td><td>Add the curly braces to destructure, or use <code>props.title<\/code><\/td><\/tr>\n<tr><td>Function runs on load, or &#8220;Too many re-renders&#8221;<\/td><td>You passed <code>onBuy={handleBuy()}<\/code> (called it) instead of the function<\/td><td>Pass <code>onBuy={handleBuy}<\/code> or <code>onBuy={() =&gt; handleBuy(id)}<\/code><\/td><\/tr>\n<tr><td>&#8220;Each child in a list should have a unique key prop&#8221;<\/td><td>Rendering an array with <code>map()<\/code> without <code>key<\/code><\/td><td>Add <code>key={item.id}<\/code> to the outer element<\/td><\/tr>\n<\/tbody>\n<\/table><\/div>\n\n<h2 id=\"best-practices\">Best practices for React components and props<\/h2>\n<ul>\n<li><strong>One component per file<\/strong>, file name equals component name: <code>ProductCard.jsx<\/code> exports <code>ProductCard<\/code>.<\/li>\n<li><strong>Keep components small<\/strong> and focused on one job. If you scroll a lot inside one component, split it.<\/li>\n<li><strong>Destructure props<\/strong> in the signature and give defaults for optional ones.<\/li>\n<li><strong>Name props clearly<\/strong>: <code>isOpen<\/code>, <code>hasError<\/code> for booleans; <code>onSomething<\/code> for functions.<\/li>\n<li><strong>Pass only what a component needs.<\/strong> Prefer <code>name<\/code> and <code>price<\/code> over a huge object with fifty fields when the card uses two.<\/li>\n<li><strong>Use <code>children<\/code> for layout<\/strong> instead of many props like <code>bodyText<\/code>, <code>bodyList<\/code>, <code>bodyImage<\/code>.<\/li>\n<li><strong>Keep components pure<\/strong>: same props in, same JSX out. No changing props or outside variables during render. This also lets the <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/\">React Compiler<\/a> optimise your code automatically later.<\/li>\n<\/ul>\n\n<h2 id=\"practice\">Practice task<\/h2>\n<p>Build a small &#8220;Team&#8221; page in your Vite project:<\/p>\n<ol class=\"dd-steps\">\n<li>Create <code>src\/components\/Avatar.jsx<\/code> that takes <code>name<\/code> and <code>size<\/code> (default <code>48<\/code>) and shows a circle with the person&#8217;s first letter.<\/li>\n<li>Create <code>TeamMemberCard.jsx<\/code> that takes <code>name<\/code>, <code>role<\/code> and <code>isLead<\/code>, renders <code>&lt;Avatar \/&gt;<\/code> and shows a &#8220;Team lead&#8221; label only when <code>isLead<\/code> is true.<\/li>\n<li>Create a <code>Section<\/code> wrapper that takes a <code>title<\/code> and uses <code>children<\/code>.<\/li>\n<li>In <code>App.jsx<\/code>, store four team members in an array and render them inside <code>&lt;Section title=\"Our team\"&gt;<\/code> with <code>map()<\/code> and a <code>key<\/code>.<\/li>\n<li>Bonus: add an <code>onSayHi<\/code> function prop that logs &#8220;Hi, &lt;name&gt;!&#8221; when a card&#8217;s button is clicked.<\/li>\n<\/ol>\n\n<h2 id=\"faq\">FAQ<\/h2>\n<details><summary>What is the difference between a component and an element?<\/summary><p>A component is the function you write, such as <code>Greeting<\/code>. An element is the small object that is created when you use it, <code>&lt;Greeting \/&gt;<\/code>. One component can produce many elements.<\/p><\/details>\n<details><summary>Why must component names start with a capital letter?<\/summary><p>JSX uses the first letter to decide: lowercase tags like <code>&lt;div&gt;<\/code> are HTML elements, capitalised tags like <code>&lt;Card&gt;<\/code> are your components. A lowercase component name is treated as an unknown HTML tag.<\/p><\/details>\n<details><summary>Can a child component change its props?<\/summary><p>No. Props are read-only. If a value needs to change, the parent keeps it in state and passes the new value down, or passes a function prop that the child calls.<\/p><\/details>\n<details><summary>What is prop drilling?<\/summary><p>Passing a prop through many layers of components that do not use it, just to reach a deep child. It is fine for two or three levels. For deeper trees, React offers <code>useContext<\/code>, covered in Part 12.<\/p><\/details>\n<details><summary>Should I use PropTypes in React 19?<\/summary><p>No. React 19 removed PropTypes checks for function components. For type safety use TypeScript, which we cover in Part 18 of this series.<\/p><\/details>\n<details><summary>Named export or default export?<\/summary><p>Both work. Default exports are common for one main component per file. Named exports are handy when a file has several small components. Just make the import match the export.<\/p><\/details>\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>You now know the two building blocks behind every React app. <strong>React components and props<\/strong> let you write a piece of UI once and reuse it with different data. You learned how to create and export a component, how to split a page into a component tree, how props arrive as one read-only object, how to set default values, how the <code>children<\/code> prop lets you build wrappers, and how to pass objects, booleans and functions to build a real <code>ProductCard<\/code>.<\/p>\n<p>Need a refresher on curly braces and the JSX rules? Go back to <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/\">React Part 2: JSX Explained<\/a>. Want to read more on the official docs? See <a href=\"https:\/\/react.dev\/learn\/passing-props-to-a-component\" rel=\"noopener\" target=\"_blank\">Passing Props to a Component on react.dev<\/a>.<\/p>\n\n<div class=\"dd-next\"><strong>Next part \u2013 React Part 4: State with useState: Making Components Interactive.<\/strong> Props come from the parent, but what about data that changes when a user clicks? We will add memory to components with <code>useState<\/code>, build a counter and a like button, and learn why React re-renders.<\/div>\n\n<div class=\"dd-cta\">\n<h3>New posts every day on DevDojo<\/h3>\n<p>Follow the full <strong>React series<\/strong> \u2013 30 parts from &#8220;what is React&#8221; to building and deploying a complete app. Bookmark <a href=\"https:\/\/devdojo.co.in\/\">devdojo.co.in<\/a> and share your Practice task solution in the comments.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.<\/p>\n","protected":false},"author":1,"featured_media":293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[96,77,156,125,157,124],"class_list":["post-294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-reactjs","tag-frontend-tutorial","tag-react","tag-react-components","tag-react-for-beginners","tag-react-props","tag-series-react"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lokendra\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"DevDojo - Empowering Developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"React Components and Props: Build Reusable UI\" \/>\n\t\t<meta property=\"og:description\" content=\"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-11-06T13:58:34+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-11-06T13:58:34+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"React Components and Props: Build Reusable UI\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#blogposting\",\"name\":\"React Components and Props: Build Reusable UI\",\"headline\":\"React Part 3: Components and Props: Building Reusable UI\",\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/react-series-part-3-components-and-props.jpg\",\"width\":1200,\"height\":630,\"caption\":\"React Part 3 banner: an App component passing props down to reusable Card components\"},\"datePublished\":\"2026-11-06T13:58:34+00:00\",\"dateModified\":\"2026-11-06T13:58:34+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#webpage\"},\"articleSection\":\"Frontend, ReactJS, Frontend Tutorial, React, React Components, React for Beginners, React Props, Series: React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"position\":3,\"name\":\"ReactJS\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#listItem\",\"name\":\"React Part 3: Components and Props: Building Reusable UI\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#listItem\",\"position\":4,\"name\":\"React Part 3: Components and Props: Building Reusable UI\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/\",\"name\":\"Lokendra\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Lokendra\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/\",\"name\":\"React Components and Props: Build Reusable UI\",\"description\":\"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/react-series-part-3-components-and-props.jpg\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#mainImage\",\"width\":1200,\"height\":630,\"caption\":\"React Part 3 banner: an App component passing props down to reusable Card components\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/11\\\/06\\\/react-series-part-3-components-and-props\\\/#mainImage\"},\"datePublished\":\"2026-11-06T13:58:34+00:00\",\"dateModified\":\"2026-11-06T13:58:34+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"React Components and Props: Build Reusable UI","description":"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#blogposting","name":"React Components and Props: Build Reusable UI","headline":"React Part 3: Components and Props: Building Reusable UI","author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/11\/react-series-part-3-components-and-props.jpg","width":1200,"height":630,"caption":"React Part 3 banner: an App component passing props down to reusable Card components"},"datePublished":"2026-11-06T13:58:34+00:00","dateModified":"2026-11-06T13:58:34+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#webpage"},"articleSection":"Frontend, ReactJS, Frontend Tutorial, React, React Components, React for Beginners, React Props, Series: React"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","position":1,"name":"Home","item":"https:\/\/devdojo.co.in\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","position":2,"name":"Frontend","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","position":3,"name":"ReactJS","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#listItem","name":"React Part 3: Components and Props: Building Reusable UI"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#listItem","position":4,"name":"React Part 3: Components and Props: Building Reusable UI","previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"}}]},{"@type":"Organization","@id":"https:\/\/devdojo.co.in\/#organization","name":"DevDojo","description":"Empowering Developers","url":"https:\/\/devdojo.co.in\/"},{"@type":"Person","@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author","url":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/","name":"Lokendra","image":{"@type":"ImageObject","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g","width":96,"height":96,"caption":"Lokendra"}},{"@type":"WebPage","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/","name":"React Components and Props: Build Reusable UI","description":"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#breadcrumblist"},"author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"creator":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/11\/react-series-part-3-components-and-props.jpg","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#mainImage","width":1200,"height":630,"caption":"React Part 3 banner: an App component passing props down to reusable Card components"},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/#mainImage"},"datePublished":"2026-11-06T13:58:34+00:00","dateModified":"2026-11-06T13:58:34+00:00"},{"@type":"WebSite","@id":"https:\/\/devdojo.co.in\/#website","url":"https:\/\/devdojo.co.in\/","name":"DevDojo","description":"Empowering Developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"}}]},"og:locale":"en_US","og:site_name":"DevDojo - Empowering Developers","og:type":"article","og:title":"React Components and Props: Build Reusable UI","og:description":"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.","og:url":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/","article:published_time":"2026-11-06T13:58:34+00:00","article:modified_time":"2026-11-06T13:58:34+00:00","twitter:card":"summary_large_image","twitter:title":"React Components and Props: Build Reusable UI","twitter:description":"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard."},"aioseo_meta_data":{"post_id":"294","title":"React Components and Props: Build Reusable UI","description":"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.","keywords":null,"keyphrases":{"focus":{"keyphrase":"React components and props","score":69},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"React Components and Props: Build Reusable UI","og_description":"Learn React components and props step by step: create reusable components, pass data with props, use children and defaults, and build a ProductCard.","og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-11-05 13:23:02","updated":"2026-11-06 13:58:34","focus_keyword":"React components and props","additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/\" title=\"Frontend\">Frontend<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/\" title=\"ReactJS\">ReactJS<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tReact Part 3: Components and Props: Building Reusable UI\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/devdojo.co.in\/"},{"label":"Frontend","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/"},{"label":"ReactJS","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/"},{"label":"React Part 3: Components and Props: Building Reusable UI","link":"https:\/\/devdojo.co.in\/index.php\/2026\/11\/06\/react-series-part-3-components-and-props\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":1,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/294\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/294\/revisions\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}