{"id":232,"date":"2026-10-22T17:08:25","date_gmt":"2026-10-22T17:08:25","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=232"},"modified":"2026-10-22T17:08:25","modified_gmt":"2026-10-22T17:08:25","slug":"react-series-part-1-what-is-react","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/","title":{"rendered":"React Part 1: What Is React and How to Build Your First React App"},"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 1 banner: a React atom logo with orbiting dots next to a small component tree of App, Header, Greeting and Counter\">\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=\"920\" cy=\"250\" r=\"270\" 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 1<\/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=\"148\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"52\" font-weight=\"800\" fill=\"#ffffff\">What Is React?<\/text>\n<text x=\"60\" y=\"206\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"52\" font-weight=\"800\" fill=\"#ffffff\">Your First React App<\/text>\n<text x=\"60\" y=\"250\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"24\" fill=\"#c9d1ff\">Components, JSX and state, set up with Vite in minutes<\/text>\n<g transform=\"translate(920 240)\">\n<path id=\"ddo1\" d=\"M-190 0 A190 72 0 1 1 190 0 A190 72 0 1 1 -190 0 Z\" fill=\"none\" stroke=\"url(#ddac)\" stroke-width=\"5\" opacity=\".9\"\/>\n<path id=\"ddo2\" d=\"M-190 0 A190 72 0 1 1 190 0 A190 72 0 1 1 -190 0 Z\" fill=\"none\" stroke=\"url(#ddac)\" stroke-width=\"5\" opacity=\".9\" transform=\"rotate(60)\"\/>\n<path id=\"ddo3\" d=\"M-190 0 A190 72 0 1 1 190 0 A190 72 0 1 1 -190 0 Z\" fill=\"none\" stroke=\"url(#ddac)\" stroke-width=\"5\" opacity=\".9\" transform=\"rotate(-60)\"\/>\n<g class=\"node\"><circle r=\"34\" fill=\"#61dafb\"\/><text y=\"8\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"22\" font-weight=\"800\" letter-spacing=\"1\" fill=\"#0b1020\">UI<\/text><\/g>\n<circle r=\"9\" fill=\"#ffffff\"><animateMotion dur=\"5s\" repeatCount=\"indefinite\"><mpath href=\"#ddo1\"\/><\/animateMotion><\/circle>\n<g transform=\"rotate(60)\"><circle r=\"8\" fill=\"#7c5cff\"><animateMotion dur=\"6s\" repeatCount=\"indefinite\"><mpath href=\"#ddo1\"\/><\/animateMotion><\/circle><\/g>\n<g transform=\"rotate(-60)\"><circle r=\"8\" fill=\"#61dafb\"><animateMotion dur=\"7s\" begin=\"1s\" repeatCount=\"indefinite\"><mpath href=\"#ddo1\"\/><\/animateMotion><\/circle><\/g>\n<\/g>\n<path d=\"M120 352 V380 M120 380 H520 M120 380 V398 M253 380 V398 M386 380 V398 M520 380 V398\" stroke=\"#7c5cff\" stroke-width=\"2.5\" fill=\"none\" opacity=\".8\"\/>\n<g class=\"node\"><rect x=\"70\" y=\"310\" width=\"100\" height=\"42\" rx=\"12\" fill=\"url(#ddac)\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"120\" y=\"336.76\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" font-weight=\"700\" fill=\"#fff\">&lt;App \/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"66\" y=\"398\" width=\"110\" height=\"40\" rx=\"12\" fill=\"#0b1020\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"121\" y=\"423.4\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#c9d1ff\">&lt;Header \/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"193\" y=\"398\" width=\"120\" height=\"40\" rx=\"12\" fill=\"#0b1020\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"253\" y=\"423.4\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#c9d1ff\">&lt;Greeting \/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"326\" y=\"398\" width=\"120\" height=\"40\" rx=\"12\" fill=\"#0b1020\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"386\" y=\"423.4\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#c9d1ff\">&lt;Greeting \/&gt;<\/text><\/g>\n<g class=\"node\"><rect x=\"460\" y=\"398\" width=\"120\" height=\"40\" rx=\"12\" fill=\"#0b1020\" stroke=\"#3178c6\" stroke-width=\"2\"\/><text x=\"520\" y=\"423.4\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" font-weight=\"700\" fill=\"#c9d1ff\">&lt;Counter \/&gt;<\/text><\/g>\n<path id=\"ddtree\" d=\"M120 352 V380 H520 V398\" fill=\"none\" stroke=\"none\"\/>\n<circle r=\"6\" fill=\"#61dafb\"><animateMotion dur=\"3s\" repeatCount=\"indefinite\"><mpath href=\"#ddtree\"\/><\/animateMotion><\/circle>\n<text x=\"620\" y=\"424\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"17\" fill=\"#aab4e8\">Small pieces \u2192 one app<\/text>\n<text x=\"60\" y=\"505\" 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 1 of 30<\/span><\/div>\n<p class=\"dd-prereq\"><strong>What you should know first:<\/strong> this is the first part, so no earlier part is needed. You should be comfortable with basic HTML, CSS and JavaScript (variables, functions, arrays, objects and arrow functions). If promises and <code>async<\/code> code still feel new, keep our <a href=\"https:\/\/devdojo.co.in\/index.php\/2024\/08\/12\/mastering-javascript-promises-a-guide-to-asynchronous-programming\/\">JavaScript Promises guide<\/a> open for later parts.<\/p>\n\n<p>React is the most popular way to build user interfaces for the web, and it shows up in a huge number of frontend job posts in India and around the world. But what exactly is it, and why do so many teams choose it? In this first part of the React series you will learn, in simple words, <strong>what is React<\/strong>, the three ideas it is built on (components, JSX and state), and how React updates the page for you. Then you will build and run your <strong>first React app with Vite<\/strong>, look at every file it creates, and write your own components.<\/p>\n\n<div class=\"dd-summary\">\n<strong class=\"lbl\">Quick Summary<\/strong>\n<ul>\n<li><strong>React<\/strong> is a free, open-source JavaScript <strong>library for building user interfaces<\/strong> out of small, reusable pieces called <strong>components<\/strong>.<\/li>\n<li>A <strong>component<\/strong> is a JavaScript function that returns <strong>JSX<\/strong>, an HTML-like syntax that describes what should appear on the screen.<\/li>\n<li><strong>State<\/strong> is data that can change (like a counter). When state changes, React re-runs the component and updates only the parts of the page that changed.<\/li>\n<li>React is <strong>declarative<\/strong>: you describe the UI for the current data (<em>UI = f(state)<\/em>) instead of writing step-by-step DOM updates.<\/li>\n<li>The quickest way to start is <strong>Vite<\/strong>: <code>npm create vite@latest my-app -- --template react<\/code>, then <code>npm install<\/code> and <code>npm run dev<\/code>.<\/li>\n<\/ul>\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>What Is React and How to Build Your First React App <span class=\"here\">You are here<\/span><\/li>\n<li>JSX Explained: Writing HTML-Like Code in JavaScript <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Components and Props: Building Reusable UI <span class=\"soon\">Coming soon<\/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<nav class=\"dd-toc\" aria-label=\"Table of contents\">\n<strong>In this part<\/strong>\n<ol>\n<li><a href=\"#what-is-react\">What is React?<\/a><\/li>\n<li><a href=\"#why-react\">The problem React solves<\/a><\/li>\n<li><a href=\"#core-ideas\">The 3 core ideas of React<\/a><\/li>\n<li><a href=\"#how-react-updates\">How React updates the page<\/a><\/li>\n<li><a href=\"#react-ecosystem\">React, frameworks and React Native<\/a><\/li>\n<li><a href=\"#setup\">Create your first React app with Vite<\/a><\/li>\n<li><a href=\"#project-structure\">Project structure tour<\/a><\/li>\n<li><a href=\"#first-component\">Write your first components<\/a><\/li>\n<li><a href=\"#what-is-jsx-really\">What JSX turns into<\/a><\/li>\n<li><a href=\"#build\">Build for production<\/a><\/li>\n<li><a href=\"#common-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<\/ol>\n<\/nav>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"what-is-react\">What is React? (simple definition)<\/h2>\n<p><strong>React<\/strong> is a JavaScript library for building user interfaces. It was created at Facebook (now Meta) and released as open source in 2013. Today it is maintained by Meta together with a large community, and it powers apps such as Facebook, Instagram, WhatsApp Web, Netflix and many Indian startups and product companies.<\/p>\n<div class=\"dd-note\"><strong>In one line:<\/strong> React lets you build a web page out of small, reusable <strong>components<\/strong>, and it automatically keeps the page in sync with your data.<\/div>\n<p>Notice the word <strong>library<\/strong>. React focuses on one job, the UI (what the user sees and clicks). It does not decide how you route between pages, talk to a database or deploy your app. That is why you will often hear about React <em>together with<\/em> other tools, like Vite for development, React Router for pages, or Next.js as a full framework. We will meet all of them in this series.<\/p>\n<p>The official documentation at <a href=\"https:\/\/react.dev\/learn\" target=\"_blank\" rel=\"noopener\">react.dev<\/a> is excellent and free, and this series follows the same modern style it teaches: function components and hooks (no old class components).<\/p>\n\n<h2 id=\"why-react\">The problem React solves<\/h2>\n<p>Imagine a simple counter: a line of text and a button. In plain JavaScript you have to <strong>find<\/strong> the elements, <strong>listen<\/strong> for clicks, <strong>change<\/strong> a variable and then <strong>remember to update<\/strong> every place on the page that shows that variable. That style is called <strong>imperative<\/strong>: you give the browser step-by-step orders.<\/p>\n<p>For one counter this is fine. For a real app (a shopping cart, a chat window, a dashboard with filters) there are hundreds of pieces of data and thousands of elements. Forgetting a single update leads to bugs like \u201cthe cart icon says 3 items but the cart page shows 2\u201d.<\/p>\n<figure>\n<svg viewBox=\"0 0 1000 380\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Imperative versus declarative UI. Plain JavaScript: you find elements and change them step by step. React: you describe the UI for the current state and React updates the page.\">\n<rect width=\"1000\" height=\"380\" rx=\"14\" fill=\"#0b1020\"\/>\n<line x1=\"500\" y1=\"20\" x2=\"500\" y2=\"360\" stroke=\"#2a3366\" stroke-width=\"2\" stroke-dasharray=\"6 6\"\/>\n<text x=\"250\" y=\"46\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"22\" font-weight=\"800\" fill=\"#ffb27a\">Plain JavaScript (imperative)<\/text>\n<text x=\"750\" y=\"46\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"22\" font-weight=\"800\" fill=\"#7ee2a8\">React (declarative)<\/text>\n<g font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#e6e9f5\">\n<rect x=\"60\" y=\"76\" width=\"380\" height=\"44\" rx=\"10\" fill=\"#1b2250\" stroke=\"#3178c6\"\/><text x=\"80\" y=\"104\">1. Find the button and the text<\/text>\n<rect x=\"60\" y=\"132\" width=\"380\" height=\"44\" rx=\"10\" fill=\"#1b2250\" stroke=\"#3178c6\"\/><text x=\"80\" y=\"160\">2. Listen for a click<\/text>\n<rect x=\"60\" y=\"188\" width=\"380\" height=\"44\" rx=\"10\" fill=\"#1b2250\" stroke=\"#3178c6\"\/><text x=\"80\" y=\"216\">3. Change a variable<\/text>\n<rect x=\"60\" y=\"244\" width=\"380\" height=\"44\" rx=\"10\" fill=\"#1b2250\" stroke=\"#3178c6\"\/><text x=\"80\" y=\"272\">4. Manually update every element<\/text>\n<\/g>\n<text x=\"250\" y=\"330\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#ffb27a\">Easy to forget a step as the app grows<\/text>\n<rect x=\"560\" y=\"86\" width=\"150\" height=\"64\" rx=\"14\" fill=\"url(#ddac)\"\/>\n<text x=\"635\" y=\"114\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"17\" font-weight=\"800\" fill=\"#fff\">state<\/text>\n<text x=\"635\" y=\"136\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#eef\">count = 3<\/text>\n<path id=\"ddsf\" d=\"M710 118 H800\" stroke=\"#7c5cff\" stroke-width=\"3\" fill=\"none\"\/>\n<text x=\"755\" y=\"106\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#c4b5ff\">render<\/text>\n<rect x=\"800\" y=\"86\" width=\"150\" height=\"64\" rx=\"14\" fill=\"#151b3b\" stroke=\"#7c5cff\" stroke-width=\"2\"\/>\n<text x=\"875\" y=\"114\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"17\" font-weight=\"800\" fill=\"#fff\">UI<\/text>\n<text x=\"875\" y=\"136\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#c9d1ff\">&#8220;Clicked 3 times&#8221;<\/text>\n<circle r=\"6\" fill=\"#7ee2a8\"><animateMotion dur=\"1.8s\" repeatCount=\"indefinite\"><mpath href=\"#ddsf\"\/><\/animateMotion><\/circle>\n<text x=\"750\" y=\"210\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"34\" font-weight=\"800\" fill=\"#ffffff\">UI = f(state)<\/text>\n<text x=\"750\" y=\"250\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#c9d1ff\">You change the state.<\/text>\n<text x=\"750\" y=\"276\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#c9d1ff\">React works out what to update on the page.<\/text>\n<text x=\"750\" y=\"330\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#7ee2a8\">Same input \u2192 same screen, every time<\/text>\n<\/svg>\n<figcaption>Figure 1: With plain JavaScript you give the browser step-by-step orders. With React you describe what the screen should look like for the current state, and React does the updating.<\/figcaption>\n<\/figure>\n<p>React flips this around. You write a function that says <em>\u201cfor this data, the screen looks like this\u201d<\/em>. When the data changes, React calls your function again and updates the page for you. This style is called <strong>declarative<\/strong>, and it is often written as <strong>UI = f(state)<\/strong>. Compare the two versions of the same counter:<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: counter.html, Counter.jsx\">\n<input type=\"radio\" name=\"v1\" id=\"v1f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v1\" id=\"v1f2\" class=\"f2\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">2 files \u2014 react-part1 \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v1f1\" class=\"t1\"><b class=\"ic html\">&lt;\/&gt;<\/b>counter.html<\/label>\n<label for=\"v1f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>Counter.jsx<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">vanilla \u203a counter.html<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">&lt;!-- index.html: a counter in plain JavaScript --&gt;<\/span><\/span>\n<span class=\"l\">&lt;<span class=\"kc\">p<\/span> <span class=\"n\">id<\/span>=<span class=\"s\">\"label\"<\/span>&gt;Clicked 0 times&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">&lt;<span class=\"kc\">button<\/span> <span class=\"n\">id<\/span>=<span class=\"s\">\"btn\"<\/span>&gt;Click me&lt;\/<span class=\"kc\">button<\/span>&gt;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">&lt;<span class=\"kc\">script<\/span>&gt;<\/span>\n<span class=\"l\">  <span class=\"k\">let<\/span> <span class=\"n\">count<\/span> = <span class=\"m\">0<\/span>;<\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> <span class=\"n\">label<\/span> = <span class=\"nb\">document<\/span>.<span class=\"n\">getElementById<\/span>(<span class=\"s\">\"label\"<\/span>);<\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> <span class=\"n\">btn<\/span> = <span class=\"nb\">document<\/span>.<span class=\"n\">getElementById<\/span>(<span class=\"s\">\"btn\"<\/span>);<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">  <span class=\"n\">btn<\/span>.<span class=\"n\">addEventListener<\/span>(<span class=\"s\">\"click\"<\/span>, () =&gt; {<\/span>\n<span class=\"l\">    <span class=\"n\">count<\/span> = <span class=\"n\">count<\/span> + <span class=\"m\">1<\/span>;<\/span>\n<span class=\"l\">    <span class=\"c\">\/\/ We must remember to update the page ourselves<\/span><\/span>\n<span class=\"l\">    <span class=\"n\">label<\/span>.<span class=\"n\">textContent<\/span> = <span class=\"s\">\"Clicked \"<\/span> + <span class=\"n\">count<\/span> + <span class=\"s\">\" times\"<\/span>;<\/span>\n<span class=\"l\">  });<\/span>\n<span class=\"l\">&lt;\/<span class=\"kc\">script<\/span>&gt;<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 15, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>HTML<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p2\">\n<div class=\"dd-vsc-crumbs\">my-first-react \u203a src \u203a Counter.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">useState<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react\"<\/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\">Counter<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> [<span class=\"n\">count<\/span>, <span class=\"n\">setCount<\/span>] = <span class=\"nf\">useState<\/span>(<span class=\"m\">0<\/span>);<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">  <span class=\"c\">\/\/ We only describe the UI. React keeps the page in sync.<\/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=\"kc\">p<\/span>&gt;Clicked {<span class=\"n\">count<\/span>} times&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">button<\/span> <span class=\"n\">onClick<\/span>={() =&gt; <span class=\"nf\">setCount<\/span>(<span class=\"n\">count<\/span> + <span class=\"m\">1<\/span>)}&gt;Click me&lt;\/<span class=\"kc\">button<\/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-status\"><span>\u2387 main<\/span><span>Ln 13, 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 two tabs to compare the same counter written in plain JavaScript and in React.<\/p>\n<p>The React version has no <code>getElementById<\/code> and no manual <code>textContent<\/code> update. You only say what the paragraph and button should show for the current <code>count<\/code>. If you add a second place that shows the count, it stays correct automatically.<\/p>\n\n<h2 id=\"core-ideas\">The 3 core ideas of React<\/h2>\n<p>Almost everything in React comes back to three ideas. Each one gets its own part later in this series, so for now just get the big picture:<\/p>\n<div class=\"dd-cards\">\n<div class=\"dd-card\"><b>1. Components<\/b>Small, reusable pieces of UI, written as JavaScript functions: a <code>Navbar<\/code>, a <code>ProductCard<\/code>, a <code>LoginForm<\/code>. You combine them like LEGO blocks to build a whole page.<\/div>\n<div class=\"dd-card\"><b>2. JSX<\/b>An HTML-like syntax inside JavaScript, such as <code>&lt;h1&gt;Hello&lt;\/h1&gt;<\/code>. It makes components easy to read. A build tool turns it into normal JavaScript.<\/div>\n<div class=\"dd-card\"><b>3. State and props<\/b><strong>Props<\/strong> are inputs you pass into a component (like function arguments). <strong>State<\/strong> is data a component remembers and can change, like a counter or form text.<\/div>\n<\/div>\n<p>There is one more word you will see everywhere: <strong>hooks<\/strong>. Hooks are special functions whose names start with <code>use<\/code>, such as <code>useState<\/code> and <code>useEffect<\/code>. They let a function component remember state, run side effects and more. (If you are curious, we already have a deep dive on <a href=\"https:\/\/devdojo.co.in\/index.php\/2024\/04\/02\/useeffect-the-most-powerful-react-hook\/\">the useEffect hook<\/a>, which Part 8 builds on.)<\/p>\n\n<h2 id=\"how-react-updates\">How React updates the page<\/h2>\n<p>When state changes, React does not reload the page and does not rebuild everything. It follows four quick steps:<\/p>\n<ol class=\"dd-steps\">\n<li><strong>Trigger:<\/strong> something calls a state setter, for example <code>setCount(count + 1)<\/code> after a click.<\/li>\n<li><strong>Render:<\/strong> React calls your component function again. It returns a new description of the UI (React elements).<\/li>\n<li><strong>Compare:<\/strong> React compares the new description with the previous one. People often call this the <em>virtual DOM<\/em> diff; React\u2019s own word is <em>reconciliation<\/em>.<\/li>\n<li><strong>Commit:<\/strong> React changes only the real DOM nodes that are different. Everything else is left alone.<\/li>\n<\/ol>\n<figure>\n<svg viewBox=\"0 0 1000 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"How a React update works: a click calls setCount, React re-runs the component, compares the new virtual DOM with the old one, and changes only the button text in the real DOM.\">\n<rect width=\"1000\" height=\"400\" rx=\"14\" fill=\"#0b1020\"\/>\n<text x=\"30\" y=\"44\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"800\" fill=\"#fff\">What happens when you click the button<\/text>\n<path id=\"ddrf\" d=\"M120 238 H860\" stroke=\"url(#ddac)\" stroke-width=\"3\" fill=\"none\" stroke-dasharray=\"8 8\"\/>\n<g font-family=\"Segoe UI,Arial,sans-serif\">\n<rect x=\"30\" y=\"120\" width=\"180\" height=\"100\" rx=\"14\" fill=\"url(#ddac)\"\/><text x=\"120\" y=\"158\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">1. Event<\/text><text x=\"120\" y=\"184\" text-anchor=\"middle\" font-size=\"14\" fill=\"#eef\">user clicks button<\/text><text x=\"120\" y=\"204\" text-anchor=\"middle\" font-size=\"14\" fill=\"#eef\">setCount(count + 1)<\/text>\n<rect x=\"270\" y=\"120\" width=\"180\" height=\"100\" rx=\"14\" fill=\"#1b2250\" stroke=\"#3178c6\" stroke-width=\"2\"\/><text x=\"360\" y=\"158\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">2. Render<\/text><text x=\"360\" y=\"184\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">React calls App()<\/text><text x=\"360\" y=\"204\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">again with count = 1<\/text>\n<rect x=\"510\" y=\"120\" width=\"180\" height=\"100\" rx=\"14\" fill=\"#1b2250\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"600\" y=\"158\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">3. Compare<\/text><text x=\"600\" y=\"184\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">new elements vs old<\/text><text x=\"600\" y=\"204\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">(&#8220;virtual DOM&#8221; diff)<\/text>\n<rect x=\"750\" y=\"120\" width=\"220\" height=\"100\" rx=\"14\" fill=\"#13361f\" stroke=\"#28c840\" stroke-width=\"2\"\/><text x=\"860\" y=\"158\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">4. Commit<\/text><text x=\"860\" y=\"184\" text-anchor=\"middle\" font-size=\"14\" fill=\"#b6f5c4\">update only what changed<\/text><text x=\"860\" y=\"204\" text-anchor=\"middle\" font-size=\"14\" fill=\"#b6f5c4\">in the real DOM<\/text>\n<\/g>\n<circle r=\"7\" fill=\"#ffffff\"><animateMotion dur=\"4s\" repeatCount=\"indefinite\"><mpath href=\"#ddrf\"\/><\/animateMotion><\/circle>\n<g font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">\n<rect x=\"200\" y=\"262\" width=\"385\" height=\"104\" rx=\"12\" fill=\"#151b3b\" stroke=\"#2a3366\"\/>\n<text x=\"215\" y=\"290\" fill=\"#8b93c9\">old<\/text><text x=\"255\" y=\"290\" fill=\"#c9d1ff\">&lt;h1&gt;My First React App&lt;\/h1&gt;<\/text>\n<text x=\"255\" y=\"316\" fill=\"#c9d1ff\">&lt;p&gt;Namaste, Asha!&lt;\/p&gt;<\/text>\n<text x=\"255\" y=\"342\" fill=\"#ff8a8a\">&lt;button&gt;Clicked 0 times&lt;\/button&gt;<\/text>\n<rect x=\"600\" y=\"262\" width=\"370\" height=\"104\" rx=\"12\" fill=\"#151b3b\" stroke=\"#2a3366\"\/>\n<text x=\"612\" y=\"290\" fill=\"#8b93c9\">new<\/text><text x=\"652\" y=\"290\" fill=\"#c9d1ff\">&lt;h1&gt;My First React App&lt;\/h1&gt;  \u2713 same<\/text>\n<text x=\"652\" y=\"316\" fill=\"#c9d1ff\">&lt;p&gt;Namaste, Asha!&lt;\/p&gt;  \u2713 same<\/text>\n<text x=\"652\" y=\"342\" fill=\"#7ee2a8\">&lt;button&gt;Clicked 1 time&lt;\/button&gt;  \u270e<\/text>\n<\/g>\n<text x=\"30\" y=\"300\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#aab4e8\">Only the button<\/text>\n<text x=\"30\" y=\"322\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#aab4e8\">text is touched.<\/text>\n<\/svg>\n<figcaption>Figure 2: A state change makes React re-run your component, compare the result with the previous one, and update only the parts of the page that changed.<\/figcaption>\n<\/figure>\n<div class=\"dd-tip\"><strong>Remember:<\/strong> \u201crender\u201d in React means <em>calling your component function<\/em>, not painting pixels. A component can render many times; that is normal and cheap. Part 21 explains rendering in depth.<\/div>\n\n<h2 id=\"react-ecosystem\">React, frameworks and React Native<\/h2>\n<p>Beginners often get confused by all the names around React. Click the tabs to see how they fit together:<\/p>\n<div class=\"dd-tabs\" role=\"group\" aria-label=\"Compare React, React frameworks, React Native and alternatives\">\n<input type=\"radio\" name=\"ddrx\" id=\"ti1\" checked>\n<input type=\"radio\" name=\"ddrx\" id=\"ti2\">\n<input type=\"radio\" name=\"ddrx\" id=\"ti3\">\n<input type=\"radio\" name=\"ddrx\" id=\"ti4\">\n<div class=\"labels\"><label for=\"ti1\">React (library)<\/label><label for=\"ti2\">React frameworks<\/label><label for=\"ti3\">React Native<\/label><label for=\"ti4\">Angular &amp; Vue<\/label><\/div>\n<div class=\"panel p1\"><p><strong>React itself<\/strong> is a <strong>library for building user interfaces<\/strong>. It gives you components, JSX, state and hooks, and it updates the page efficiently.<\/p><ul><li><strong>Does not include:<\/strong> page routing, data fetching rules or a server. You add these with other packages when you need them.<\/li><li><strong>Best for:<\/strong> learning React, single-page apps, dashboards and widgets.<\/li><li><strong>Setup in this series:<\/strong> React + Vite.<\/li><\/ul><\/div>\n<div class=\"panel p2\"><p><strong>Frameworks<\/strong> such as <strong>Next.js<\/strong> and <strong>React Router (framework mode)<\/strong> are built on top of React and add the missing pieces.<\/p><ul><li><strong>Add:<\/strong> file-based routing, server rendering, data loading, React Server Components and deployment tooling.<\/li><li><strong>Best for:<\/strong> full websites and products that need SEO and a server.<\/li><li><strong>Tip:<\/strong> learn plain React first. Everything you learn here works inside Next.js too (see our <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/05\/nextjs-use-cache\/\">Next.js caching guide<\/a>).<\/li><\/ul><\/div>\n<div class=\"panel p3\"><p><strong>React Native<\/strong> uses the same React ideas (components, props, state, hooks) to build <strong>real Android and iOS apps<\/strong>.<\/p><ul><li><strong>Difference:<\/strong> instead of <code>&lt;div&gt;<\/code> and <code>&lt;p&gt;<\/code> you use <code>&lt;View&gt;<\/code> and <code>&lt;Text&gt;<\/code>, which become native mobile views.<\/li><li><strong>Good news:<\/strong> once you know React, React Native feels familiar. It has its own series later on DevDojo.<\/li><\/ul><\/div>\n<div class=\"panel p4\"><p><strong>Angular<\/strong> and <strong>Vue.js<\/strong> solve the same problem (building UIs from components) in different ways.<\/p><ul><li><strong>Angular:<\/strong> a complete framework from Google with TypeScript, dependency injection and lots built in.<\/li><li><strong>Vue:<\/strong> a progressive framework with HTML-like templates that many beginners find gentle.<\/li><li><strong>React:<\/strong> smaller core, \u201cjust JavaScript\u201d, and the largest job market in India and abroad.<\/li><\/ul><\/div>\n<\/div>\n<p>For this series we use <strong>React with Vite<\/strong>. Vite is a fast build tool and development server. It starts in milliseconds, reloads the browser instantly when you save a file (this is called <em>Hot Module Replacement<\/em>, or HMR), and creates an optimised build for production. The old <code>create-react-app<\/code> tool is deprecated, so do not use it in new projects.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"setup\">Create your first React app with Vite<\/h2>\n<p>You need two things installed: <strong>Node.js<\/strong> (which also gives you <code>npm<\/code>) and a code editor such as <strong>VS Code<\/strong>. Vite 8 needs Node.js <strong>20.19 or newer<\/strong>, or <strong>22.12 or newer<\/strong>. Download the LTS version from <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">nodejs.org<\/a> if <code>node -v<\/code> shows an older version.<\/p>\n<p>Open a terminal and run these commands. The output below is real, from creating the project for this post:<\/p>\n<div class=\"dd-vsc dd-vsc-termonly\" role=\"group\" aria-label=\"Terminal: my-first-react \u2014 bash\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">my-first-react \u2014 bash<\/span><\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\"># 1. Check Node.js (Vite 8 needs Node.js 20.19+ or 22.12+)<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> node -v<\/span>\n<span class=\"l\">v22.22.0<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\"># 2. Create a new React project with Vite<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm create vite@latest my-first-react -- --template react<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">create-vite v9.3.1<\/span>\n<span class=\"l\">|<\/span>\n<span class=\"l\">o  Scaffolding project in ~\/projects\/my-first-react...<\/span>\n<span class=\"l\">|<\/span>\n<span class=\"l\">\u2014  Done. Now run:<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">  cd my-first-react<\/span>\n<span class=\"l\">  npm install<\/span>\n<span class=\"l\">  npm run dev<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\"># 3. Install packages and start the dev server<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> cd my-first-react<\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm install<\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm run dev<\/span><\/code><\/pre>\n<\/div>\n<p>Open <code>http:\/\/localhost:5173<\/code> in your browser and you will see the Vite + React welcome page with a working counter. Keep the dev server running while you work: every time you save a file, the browser updates in under a second.<\/p>\n<div class=\"dd-note\"><strong>Prefer TypeScript?<\/strong> Use <code>--template react-ts<\/code> instead. We start with JavaScript to keep things simple and switch to TypeScript in Part 18. Our <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/07\/typescript-7-migration-guide\/\">TypeScript 7 guide<\/a> covers the new compiler.<\/div>\n<figure>\n<svg viewBox=\"0 0 1000 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"How a Vite React app starts: index.html loads main.jsx, main.jsx calls createRoot on the root div and renders App, App renders Greeting components, and the browser shows the result.\">\n<rect width=\"1000\" height=\"300\" rx=\"14\" fill=\"#0b1020\"\/>\n<text x=\"30\" y=\"44\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"800\" fill=\"#fff\">How your React app starts<\/text>\n<path id=\"ddbt\" d=\"M130 228 H860\" stroke=\"url(#ddac)\" stroke-width=\"3\" fill=\"none\" stroke-dasharray=\"8 8\"\/>\n<g font-family=\"Segoe UI,Arial,sans-serif\">\n<rect x=\"30\" y=\"110\" width=\"200\" height=\"100\" rx=\"14\" fill=\"#1b2250\" stroke=\"#e44d26\" stroke-width=\"2\"\/><text x=\"130\" y=\"146\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">index.html<\/text><text x=\"130\" y=\"172\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">&lt;div id=&#8221;root&#8221;&gt;<\/text><text x=\"130\" y=\"192\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">loads main.jsx<\/text>\n<rect x=\"270\" y=\"110\" width=\"200\" height=\"100\" rx=\"14\" fill=\"#1b2250\" stroke=\"#61dafb\" stroke-width=\"2\"\/><text x=\"370\" y=\"146\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">main.jsx<\/text><text x=\"370\" y=\"172\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">createRoot(#root)<\/text><text x=\"370\" y=\"192\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">.render(&lt;App \/&gt;)<\/text>\n<rect x=\"510\" y=\"110\" width=\"200\" height=\"100\" rx=\"14\" fill=\"#1b2250\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"610\" y=\"146\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">App.jsx<\/text><text x=\"610\" y=\"172\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">returns JSX, uses<\/text><text x=\"610\" y=\"192\" text-anchor=\"middle\" font-size=\"14\" fill=\"#aab4e8\">&lt;Greeting \/&gt;<\/text>\n<rect x=\"750\" y=\"110\" width=\"220\" height=\"100\" rx=\"14\" fill=\"#13361f\" stroke=\"#28c840\" stroke-width=\"2\"\/><text x=\"860\" y=\"146\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">Browser<\/text><text x=\"860\" y=\"172\" text-anchor=\"middle\" font-size=\"14\" fill=\"#b6f5c4\">real HTML on screen<\/text><text x=\"860\" y=\"192\" text-anchor=\"middle\" font-size=\"14\" fill=\"#b6f5c4\">localhost:5173<\/text>\n<\/g>\n<circle r=\"7\" fill=\"#61dafb\"><animateMotion dur=\"3.5s\" repeatCount=\"indefinite\"><mpath href=\"#ddbt\"\/><\/animateMotion><\/circle>\n<text x=\"500\" y=\"260\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" fill=\"#c9d1ff\">Vite serves these files in development and bundles them for production with npm run build.<\/text>\n<\/svg>\n<figcaption>Figure 3: The start-up chain of a Vite + React project. Every file in this chain is only a few lines long.<\/figcaption>\n<\/figure>\n\n<h2 id=\"project-structure\">Project structure tour<\/h2>\n<p>Here is what Vite created. You will spend most of your time inside <code>src\/<\/code>:<\/p>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>File or folder<\/th><th>What it is for<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>index.html<\/code><\/td><td>The single HTML page of your app. It has an empty <code>&lt;div id=\"root\"&gt;<\/code> where React draws everything.<\/td><\/tr>\n<tr><td><code>src\/main.jsx<\/code><\/td><td>The entry point. It finds <code>#root<\/code> and tells React to render the <code>&lt;App \/&gt;<\/code> component inside it.<\/td><\/tr>\n<tr><td><code>src\/App.jsx<\/code><\/td><td>Your main (root) component. Start editing here.<\/td><\/tr>\n<tr><td><code>src\/index.css<\/code><\/td><td>Global styles for the whole app.<\/td><\/tr>\n<tr><td><code>src\/assets\/<\/code><\/td><td>Images and other files you import from your code.<\/td><\/tr>\n<tr><td><code>public\/<\/code><\/td><td>Files copied as they are, like <code>favicon.svg<\/code>. Refer to them with a leading <code>\/<\/code>.<\/td><\/tr>\n<tr><td><code>vite.config.js<\/code><\/td><td>Vite settings. The React plugin adds JSX support and fast refresh.<\/td><\/tr>\n<tr><td><code>package.json<\/code><\/td><td>Project name, scripts (<code>dev<\/code>, <code>build<\/code>, <code>lint<\/code>, <code>preview<\/code>) and dependencies such as <code>react<\/code> and <code>react-dom<\/code>.<\/td><\/tr>\n<tr><td><code>node_modules\/<\/code><\/td><td>Installed packages. Never edit it, and never commit it to Git.<\/td><\/tr>\n<\/tbody><\/table><\/div>\n<p>Now look at the three files that connect everything. They are exactly as Vite generated them:<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: index.html, main.jsx, vite.config.js\">\n<input type=\"radio\" name=\"v2\" id=\"v2f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v2\" id=\"v2f2\" class=\"f2\">\n<input type=\"radio\" name=\"v2\" id=\"v2f3\" class=\"f3\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">3 files \u2014 my-first-react \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v2f1\" class=\"t1\"><b class=\"ic html\">&lt;\/&gt;<\/b>index.html<\/label>\n<label for=\"v2f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>main.jsx<\/label>\n<label for=\"v2f3\" class=\"t3\"><b class=\"ic js\">JS<\/b>vite.config.js<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">my-first-react \u203a index.html<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">&lt;!doctype html&gt;<\/span><\/span>\n<span class=\"l\">&lt;<span class=\"kc\">html<\/span> <span class=\"n\">lang<\/span>=<span class=\"s\">\"en\"<\/span>&gt;<\/span>\n<span class=\"l\">  &lt;<span class=\"kc\">head<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">meta<\/span> <span class=\"n\">charset<\/span>=<span class=\"s\">\"UTF-8\"<\/span> \/&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">link<\/span> <span class=\"n\">rel<\/span>=<span class=\"s\">\"icon\"<\/span> <span class=\"n\">type<\/span>=<span class=\"s\">\"image\/svg+xml\"<\/span> <span class=\"n\">href<\/span>=<span class=\"s\">\"\/favicon.svg\"<\/span> \/&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">meta<\/span> <span class=\"n\">name<\/span>=<span class=\"s\">\"viewport\"<\/span> <span class=\"n\">content<\/span>=<span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">title<\/span>&gt;my-first-react&lt;\/<span class=\"kc\">title<\/span>&gt;<\/span>\n<span class=\"l\">  &lt;\/<span class=\"kc\">head<\/span>&gt;<\/span>\n<span class=\"l\">  &lt;<span class=\"kc\">body<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">div<\/span> <span class=\"n\">id<\/span>=<span class=\"s\">\"root\"<\/span>&gt;&lt;\/<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">script<\/span> <span class=\"n\">type<\/span>=<span class=\"s\">\"module\"<\/span> <span class=\"n\">src<\/span>=<span class=\"s\">\"\/src\/main.jsx\"<\/span>&gt;&lt;\/<span class=\"kc\">script<\/span>&gt;<\/span>\n<span class=\"l\">  &lt;\/<span class=\"kc\">body<\/span>&gt;<\/span>\n<span class=\"l\">&lt;\/<span class=\"kc\">html<\/span>&gt;<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 13, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>HTML<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p2\">\n<div class=\"dd-vsc-crumbs\">my-first-react \u203a src \u203a main.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"nc\">StrictMode<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">'react'<\/span><\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">createRoot<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">'react-dom\/client'<\/span><\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> <span class=\"s\">'.\/index.css'<\/span><\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> <span class=\"nc\">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=\"nf\">createRoot<\/span>(<span class=\"nb\">document<\/span>.<span class=\"nf\">getElementById<\/span>(<span class=\"s\">'root'<\/span>)).<span class=\"nf\">render<\/span>(<\/span>\n<span class=\"l\">  &lt;<span class=\"nc\">StrictMode<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"nc\">App<\/span> \/&gt;<\/span>\n<span class=\"l\">  &lt;\/<span class=\"nc\">StrictMode<\/span>&gt;,<\/span>\n<span class=\"l\">)<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 10, 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\">my-first-react \u203a vite.config.js<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> <span class=\"n\">react<\/span> <span class=\"k\">from<\/span> <span class=\"s\">'@vitejs\/plugin-react'<\/span><\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">defineConfig<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">'vite'<\/span><\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\">\/\/ https:\/\/vite.dev\/config\/<\/span><\/span>\n<span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">defineConfig<\/span>({<\/span>\n<span class=\"l\">  <span class=\"n\">plugins<\/span>: [<span class=\"nf\">react<\/span>()],<\/span>\n<span class=\"l\">})<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 7, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">These three files come from the Vite template exactly as generated. Click the tabs to read each one.<\/p>\n<p>Two details worth knowing:<\/p>\n<ul>\n<li><strong><code>createRoot(...).render(...)<\/code><\/strong> comes from <code>react-dom\/client<\/code>. <code>react<\/code> is the core library, and <code>react-dom<\/code> connects it to the browser\u2019s DOM. (React Native uses a different renderer for mobile.)<\/li>\n<li><strong><code>&lt;StrictMode&gt;<\/code><\/strong> is a development helper. It runs some extra checks and may call your components twice <em>in development only<\/em> to help you find bugs. This is expected; it does not happen in production.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"first-component\">Write your first components<\/h2>\n<p>Let us replace the welcome page with our own small app. Delete <code>src\/App.css<\/code>, then create <code>src\/Greeting.jsx<\/code> and replace <code>src\/App.jsx<\/code> and <code>src\/index.css<\/code> with the code below:<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: Greeting.jsx, App.jsx, index.css\">\n<input type=\"radio\" name=\"v3\" id=\"v3f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v3\" id=\"v3f2\" class=\"f2\">\n<input type=\"radio\" name=\"v3\" id=\"v3f3\" class=\"f3\">\n<input type=\"checkbox\" id=\"v3r2\" class=\"r2\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">3 files \u2014 my-first-react \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v3f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>Greeting.jsx<\/label>\n<label for=\"v3f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>App.jsx<\/label>\n<label for=\"v3f3\" class=\"t3\"><b class=\"ic css\">CSS<\/b>index.css<\/label>\n<label for=\"v3r2\" class=\"run run2\" title=\"Show the output in the terminal\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">my-first-react \u203a src \u203a Greeting.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">\/\/ A component is just a function that returns JSX (UI).<\/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 class=\"n\">name<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> &lt;<span class=\"kc\">p<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"greeting\"<\/span>&gt;Namaste, {<span class=\"n\">name<\/span>}! \ud83d\udc4b&lt;\/<span class=\"kc\">p<\/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\">my-first-react \u203a src \u203a App.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">useState<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react\"<\/span>;<\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> <span class=\"nc\">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=\"c\">\/\/ count = current value, setCount = function to change it<\/span><\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> [<span class=\"n\">count<\/span>, <span class=\"n\">setCount<\/span>] = <span class=\"nf\">useState<\/span>(<span class=\"m\">0<\/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\">main<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"app\"<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h1<\/span>&gt;My First React App&lt;\/<span class=\"kc\">h1<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">Greeting<\/span> <span class=\"n\">name<\/span>=<span class=\"s\">\"Asha\"<\/span> \/&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"nc\">Greeting<\/span> <span class=\"n\">name<\/span>=<span class=\"s\">\"Rahul\"<\/span> \/&gt;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">button<\/span> <span class=\"n\">onClick<\/span>={() =&gt; <span class=\"nf\">setCount<\/span>(<span class=\"n\">count<\/span> + <span class=\"m\">1<\/span>)}&gt;<\/span>\n<span class=\"l\">        Clicked {<span class=\"n\">count<\/span>} {<span class=\"n\">count<\/span> === <span class=\"m\">1<\/span> ? <span class=\"s\">\"time\"<\/span> : <span class=\"s\">\"times\"<\/span>}<\/span>\n<span class=\"l\">      &lt;\/<span class=\"kc\">button<\/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 (Vite 8.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npm run dev\n\n&gt; my-first-react@0.0.0 dev\n&gt; vite\n\n\n  VITE v8.3.5  ready in 254 ms\n\n  \u279c  Local:   http:\/\/localhost:5173\/\n  \u279c  Network: use --host to expose<\/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 class=\"dd-vsc-pane p3\">\n<div class=\"dd-vsc-crumbs\">my-first-react \u203a src \u203a index.css<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"kc\">body<\/span> { <span class=\"k\">font-family<\/span>: <span class=\"n\">system-ui<\/span>, <span class=\"kc\">sans-serif<\/span>; <span class=\"k\">margin<\/span>: <span class=\"m\">0<\/span>; <span class=\"k\">background<\/span>: <span class=\"m\">#0b1020<\/span>; <span class=\"k\">color<\/span>: <span class=\"m\">#e8ebff<\/span>; }<\/span>\n<span class=\"l\">.<span class=\"nc\">app<\/span> { <span class=\"k\">max-width<\/span>: <span class=\"m\">480<\/span><span class=\"k\">px<\/span>; <span class=\"k\">margin<\/span>: <span class=\"m\">60<\/span><span class=\"k\">px<\/span> <span class=\"kc\">auto<\/span>; <span class=\"k\">text-align<\/span>: <span class=\"kc\">center<\/span>; }<\/span>\n<span class=\"l\">.<span class=\"nc\">greeting<\/span> { <span class=\"k\">font-size<\/span>: <span class=\"m\">1.2<\/span><span class=\"k\">rem<\/span>; <span class=\"k\">color<\/span>: <span class=\"m\">#a99bff<\/span>; }<\/span>\n<span class=\"l\"><span class=\"kc\">button<\/span> { <span class=\"k\">font-size<\/span>: <span class=\"m\">1<\/span><span class=\"k\">rem<\/span>; <span class=\"k\">padding<\/span>: <span class=\"m\">10<\/span><span class=\"k\">px<\/span> <span class=\"m\">18<\/span><span class=\"k\">px<\/span>; <span class=\"k\">border-radius<\/span>: <span class=\"m\">10<\/span><span class=\"k\">px<\/span>; <span class=\"k\">border<\/span>: <span class=\"m\">0<\/span>;<\/span>\n<span class=\"l\">  <span class=\"k\">background<\/span>: <span class=\"m\">#3178c6<\/span>; <span class=\"k\">color<\/span>: <span class=\"m\">#fff<\/span>; <span class=\"k\">cursor<\/span>: <span class=\"kc\">pointer<\/span>; }<\/span><\/code><\/pre>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 5, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>CSS<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Open the <strong>App.jsx<\/strong> tab and click <strong>\u25b6 Run<\/strong> to see the dev server start. In the browser the page shows two greetings and a button; after two clicks it reads \u201cClicked 2 times\u201d.<\/p>\n<p>Save the files and look at the browser. You should see a heading, two greetings and a button. Click the button and the text changes from \u201cClicked 0 times\u201d to \u201cClicked 1 time\u201d and then \u201cClicked 2 times\u201d. We tested this exact app in a real browser before publishing.<\/p>\n<p>Let us read the code line by line:<\/p>\n<ul>\n<li><strong><code>Greeting<\/code><\/strong> is a component: a normal function whose name starts with a <strong>capital letter<\/strong> and which returns JSX. It receives <strong>props<\/strong> as an object, and we pull out <code>name<\/code> with destructuring: <code>{ name }<\/code>.<\/li>\n<li><strong><code>&lt;Greeting name=\"Asha\" \/&gt;<\/code><\/strong> uses the component like an HTML tag. <code>name=\"Asha\"<\/code> is a prop. Using it twice with different props gives two different greetings; that is <em>reusability<\/em>.<\/li>\n<li><strong>Curly braces <code>{ }<\/code><\/strong> inside JSX switch back to JavaScript. <code>{name}<\/code> shows a variable and <code>{count === 1 ? \"time\" : \"times\"}<\/code> runs a small expression.<\/li>\n<li><strong><code>useState(0)<\/code><\/strong> creates a piece of state starting at <code>0<\/code>. It returns the current value (<code>count<\/code>) and a function to change it (<code>setCount<\/code>).<\/li>\n<li><strong><code>onClick={() =&gt; setCount(count + 1)}<\/code><\/strong> passes a function to run on click. Calling <code>setCount<\/code> triggers a re-render with the new value.<\/li>\n<li><strong><code>className<\/code><\/strong> is used instead of <code>class<\/code>, because <code>class<\/code> is a reserved word in JavaScript.<\/li>\n<\/ul>\n<div class=\"dd-warn\"><strong>Do not change state directly.<\/strong> Writing <code>count = count + 1<\/code> will not update the screen. Always use the setter function (<code>setCount<\/code>) so React knows something changed.<\/div>\n\n<h2 id=\"what-is-jsx-really\">What JSX turns into<\/h2>\n<p>Browsers do not understand JSX. During development and build, Vite\u2019s React plugin turns every JSX tag into a function call that creates a <strong>React element<\/strong>, a plain JavaScript object that describes a piece of UI. You can see this yourself without any build tool by calling <code>createElement<\/code> directly. Create <code>jsx-demo.mjs<\/code> in the project folder:<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: jsx-demo.mjs\">\n<input type=\"radio\" name=\"v4\" id=\"v4f1\" class=\"f1\" checked>\n<input type=\"checkbox\" id=\"v4r1\" class=\"r1\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">jsx-demo.mjs \u2014 my-first-react \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v4f1\" class=\"t1\"><b class=\"ic js\">JS<\/b>jsx-demo.mjs<\/label>\n<label for=\"v4r1\" class=\"run run1\" title=\"Show the output in the terminal\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">my-first-react \u203a jsx-demo.mjs<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\">\/\/ What does JSX turn into? Let's look at a React element.<\/span><\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">createElement<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react\"<\/span>;<\/span>\n<span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">renderToString<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react-dom\/server\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\">\/\/ &lt;h1 className=\"title\"&gt;Hello React&lt;\/h1&gt;  is compiled to:<\/span><\/span>\n<span class=\"l\"><span class=\"k\">const<\/span> <span class=\"n\">element<\/span> = <span class=\"nf\">createElement<\/span>(<span class=\"s\">\"h1\"<\/span>, { <span class=\"n\">className<\/span>: <span class=\"s\">\"title\"<\/span> }, <span class=\"s\">\"Hello React\"<\/span>);<\/span>\n<span class=\"l\"><span class=\"n\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"n\">element<\/span>.<span class=\"n\">type<\/span>, <span class=\"n\">element<\/span>.<span class=\"n\">props<\/span>);<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\">\/\/ A component is a function that returns elements.<\/span><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">Greeting<\/span>({ <span class=\"n\">name<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> <span class=\"nf\">createElement<\/span>(<span class=\"s\">\"p\"<\/span>, <span class=\"kc\">null<\/span>, <span class=\"s\">\"Namaste, \"<\/span>, <span class=\"n\">name<\/span>, <span class=\"s\">\"!\"<\/span>);<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\">\/\/ React turns elements into real HTML (here, as a string).<\/span><\/span>\n<span class=\"l\"><span class=\"n\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"nf\">renderToString<\/span>(<span class=\"nf\">createElement<\/span>(<span class=\"n\">Greeting<\/span>, { <span class=\"n\">name<\/span>: <span class=\"s\">\"Asha\"<\/span> })));<\/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> node jsx-demo.mjs\nh1 { className: 'title', children: 'Hello React' }\n&lt;p&gt;Namaste, &lt;!-- --&gt;Asha&lt;!-- --&gt;!&lt;\/p&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 15, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click <strong>\u25b6 Run<\/strong> to see what a React element really is, and the HTML React produces from a component.<\/p>\n<p>The first line of output shows that a React element is just an object with a <code>type<\/code> (<code>\"h1\"<\/code>) and <code>props<\/code>. The second line shows React turning a component into real HTML. (The <code>&lt;!-- --&gt;<\/code> comments are markers React uses to separate text pieces.) You never need to write <code>createElement<\/code> by hand, but knowing that <strong>JSX is just JavaScript<\/strong> makes many rules easier to understand. Part 2 covers all the JSX rules.<\/p>\n\n<h2 id=\"build\">Build for production<\/h2>\n<p>The dev server is for development only. When you are ready to deploy, create an optimised build. Vite bundles and minifies your code into the <code>dist\/<\/code> folder, which you can upload to any static host (Netlify, Vercel, GitHub Pages, Firebase Hosting or your own server):<\/p>\n<div class=\"dd-vsc dd-vsc-termonly\" role=\"group\" aria-label=\"Terminal: my-first-react \u2014 bash\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">my-first-react \u2014 bash<\/span><\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\"># Create an optimised production build in the dist\/ folder<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm run build<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">&gt; my-first-react@0.0.0 build<\/span>\n<span class=\"l\">&gt; vite build<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">vite v8.3.5 building client environment for production...<\/span>\n<span class=\"l\">transforming...<\/span>\n<span class=\"l\">\u2713 17 modules transformed.<\/span>\n<span class=\"l\">rendering chunks...<\/span>\n<span class=\"l\">computing gzip size...<\/span>\n<span class=\"l\">dist\/index.html                   0.46 kB \u2502 gzip:  0.30 kB<\/span>\n<span class=\"l\">dist\/assets\/index-CuXkAzXh.css    0.29 kB \u2502 gzip:  0.21 kB<\/span>\n<span class=\"l\">dist\/assets\/index-DO-ZuKAz.js   219.88 kB \u2502 gzip: 68.76 kB<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">\u2713 built in 152ms<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"c\"># Preview the production build locally<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm run preview<\/span><\/code><\/pre>\n<\/div>\n<p>Your whole app, including React itself, is about 69 kB after gzip compression. File names include a hash (like <code>index-DO-ZuKAz.js<\/code>) so browsers can cache them safely. Want a styling framework next? Our <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/\">Tailwind CSS v4 tutorial<\/a> works with this exact Vite setup.<\/p>\n<p>One more helpful tool: install the <strong>React Developer Tools<\/strong> extension for Chrome, Edge or Firefox. It adds a <em>Components<\/em> tab to the browser DevTools where you can see your component tree, props and state while the app runs.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"common-errors\">Common errors and fixes<\/h2>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>Error or problem<\/th><th>Why it happens<\/th><th>How to fix it<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>'npm' is not recognized<\/code> \/ <code>command not found: npm<\/code><\/td><td>Node.js is not installed, or the terminal was opened before installing it.<\/td><td>Install Node.js LTS from nodejs.org, then open a new terminal and check <code>node -v<\/code>.<\/td><\/tr>\n<tr><td>Vite says your Node.js version is not supported<\/td><td>Vite 8 needs Node.js 20.19+ or 22.12+.<\/td><td>Upgrade Node.js (or use a version manager like nvm or fnm).<\/td><\/tr>\n<tr><td>Blank white page, error in the browser console<\/td><td>A JavaScript error stopped React from rendering.<\/td><td>Open DevTools (F12) \u2192 Console. Read the first red error; it usually names the file and line.<\/td><\/tr>\n<tr><td><code>Adjacent JSX elements must be wrapped in an enclosing tag<\/code><\/td><td>A component returned two elements side by side.<\/td><td>Wrap them in one parent, such as a <code>&lt;div&gt;<\/code> or a fragment <code>&lt;&gt;...&lt;\/&gt;<\/code>.<\/td><\/tr>\n<tr><td>My component does not show, or React warns about an unknown tag<\/td><td>The component name starts with a small letter, so React treats it as an HTML tag.<\/td><td>Always start component names with a capital letter: <code>Greeting<\/code>, not <code>greeting<\/code>.<\/td><\/tr>\n<tr><td><code>Failed to resolve import \".\/greeting.jsx\"<\/code><\/td><td>Wrong path or wrong capitalisation in the import.<\/td><td>Match the file name exactly, including case and the <code>.\/<\/code> at the start.<\/td><\/tr>\n<tr><td>The screen does not change when I update a variable<\/td><td>You changed a normal variable or mutated state directly.<\/td><td>Keep changing data in <code>useState<\/code> and update it only with its setter.<\/td><\/tr>\n<tr><td>Port 5173 is already in use<\/td><td>Another dev server is still running.<\/td><td>Stop it with <kbd>Ctrl<\/kbd>+<kbd>C<\/kbd>, or let Vite pick the next free port it suggests.<\/td><\/tr>\n<\/tbody><\/table><\/div>\n\n<h2 id=\"best-practices\">Best practices for beginners<\/h2>\n<ul>\n<li><strong>One component per file<\/strong>, and name the file after the component (<code>Greeting.jsx<\/code>).<\/li>\n<li><strong>Keep components small.<\/strong> If a component does too many things, split it. Small components are easier to read, test and reuse.<\/li>\n<li><strong>Use function components and hooks.<\/strong> Class components still work, but new code and the official docs use functions.<\/li>\n<li><strong>Keep StrictMode on<\/strong> in development. It catches real bugs early.<\/li>\n<li><strong>Learn modern JavaScript well<\/strong>: arrow functions, destructuring, the spread operator, <code>map<\/code>\/<code>filter<\/code> and modules. React uses them everywhere.<\/li>\n<li><strong>Read the console.<\/strong> React\u2019s error and warning messages are clear and often include a link that explains the fix.<\/li>\n<li><strong>Commit early.<\/strong> Run <code>git init<\/code> in your project and commit after each working step (the Vite template already includes a <code>.gitignore<\/code>).<\/li>\n<\/ul>\n\n<h2 id=\"practice\">Practice task<\/h2>\n<div class=\"dd-tip\">\n<p><strong>Your mission (about 30 minutes):<\/strong><\/p>\n<ol>\n<li>Create the <code>my-first-react<\/code> project with Vite and get the dev server running.<\/li>\n<li>Add the <code>Greeting<\/code> and counter code from this post and check it works in the browser.<\/li>\n<li>Create a new component <code>ProfileCard.jsx<\/code> that takes <code>name<\/code>, <code>role<\/code> and <code>city<\/code> props, and show three cards for three different people.<\/li>\n<li>Add a second button, <strong>Reset<\/strong>, that sets the counter back to <code>0<\/code>.<\/li>\n<li><em>Bonus:<\/em> show the message \u201cYou are on fire! \ud83d\udd25\u201d only when the count is 10 or more. (Hint: <code>{count &gt;= 10 &amp;&amp; &lt;p&gt;...&lt;\/p&gt;}<\/code>.) Then run <code>npm run build<\/code> and <code>npm run preview<\/code>.<\/li>\n<\/ol>\n<\/div>\n\n<h2 id=\"faq\">Frequently asked questions<\/h2>\n<details><summary>Is React a framework or a library?<\/summary><p>React is a library for building user interfaces. It handles components, state and rendering. Frameworks such as Next.js and React Router (framework mode) are built on top of React and add routing, server rendering and data loading.<\/p><\/details>\n<details><summary>Do I need to know JavaScript before learning React?<\/summary><p>Yes, the basics. You should be comfortable with variables, functions, arrays, objects, arrow functions and modules (<code>import<\/code>\/<code>export<\/code>). You do not need to be an expert; you will get better at JavaScript while learning React.<\/p><\/details>\n<details><summary>Is React still worth learning?<\/summary><p>Yes. React remains one of the most used frontend tools, it has a huge job market, and its ideas (components, props, state, hooks) carry over to Next.js, React Native and even other frameworks.<\/p><\/details>\n<details><summary>Why Vite and not create-react-app?<\/summary><p>create-react-app is deprecated and no longer recommended. Vite is much faster, actively maintained and recommended in the React docs for building a React app from scratch.<\/p><\/details>\n<details><summary>What is the virtual DOM?<\/summary><p>It is a common name for the JavaScript objects (React elements) that describe your UI. React compares the new description with the previous one and updates only the parts of the real DOM that changed. This process is called reconciliation.<\/p><\/details>\n<details><summary>Should I learn React or Next.js first?<\/summary><p>Learn React first. Next.js is a React framework, so every React concept you learn here (components, props, state, hooks) is used directly inside Next.js.<\/p><\/details>\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>You now know <strong>what React is<\/strong>: a JavaScript library that builds user interfaces from components and keeps the page in sync with your data. You learned the three core ideas (components, JSX and state), saw how React updates only what changed, and understood where frameworks and React Native fit in. Most importantly, you created and ran a real React app with Vite, explored every file, wrote two components with props and state, and made a production build.<\/p>\n<p>Already comfortable with the basics? Try adding sign-in to this app with our <a href=\"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/\">Firebase Authentication with React<\/a> guide.<\/p>\n\n<div class=\"dd-next\"><strong>Next part \u2013 React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript.<\/strong> We will learn every JSX rule: expressions in curly braces, attributes like <code>className<\/code> and <code>style<\/code>, fragments, comments, and the mistakes that trip up beginners.<\/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 \u201cwhat is React\u201d to building and deploying a complete app. Bookmark <a href=\"https:\/\/devdojo.co.in\/\">devdojo.co.in<\/a> and tell us in the comments what you want to build with React.<\/p>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.<\/p>\n","protected":false},"author":1,"featured_media":231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[96,83,77,125,15,124,80],"class_list":["post-232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-reactjs","tag-frontend-tutorial","tag-javascript","tag-react","tag-react-for-beginners","tag-reactjs","tag-series-react","tag-vite"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.\" \/>\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\/10\/22\/react-series-part-1-what-is-react\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\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=\"What Is React? Your First React App with Vite\" \/>\n\t\t<meta property=\"og:description\" content=\"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-22T17:08:25+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-22T17:08:25+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"What Is React? Your First React App with Vite\" \/>\n\t\t<meta name=\"twitter:description\" content=\"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.\" \/>\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\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#blogposting\",\"name\":\"What Is React? Your First React App with Vite | DevDojo\",\"headline\":\"React Part 1: What Is React and How to Build Your First React App\",\"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\\\/10\\\/react-series-part-1-what-is-react.jpg\",\"width\":1200,\"height\":630,\"caption\":\"React series Part 1: What Is React? Your First React App, with a React atom and a component tree on a dark navy background\"},\"datePublished\":\"2026-10-22T17:08:25+00:00\",\"dateModified\":\"2026-10-22T17:08:25+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#webpage\"},\"articleSection\":\"Frontend, ReactJS, Frontend Tutorial, JavaScript, React, React for Beginners, ReactJS, Series: React, Vite\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#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\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#listItem\",\"name\":\"React Part 1: What Is React and How to Build Your First React App\"},\"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\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#listItem\",\"position\":4,\"name\":\"React Part 1: What Is React and How to Build Your First React App\",\"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\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#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\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/\",\"name\":\"What Is React? Your First React App with Vite | DevDojo\",\"description\":\"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#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\\\/10\\\/react-series-part-1-what-is-react.jpg\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#mainImage\",\"width\":1200,\"height\":630,\"caption\":\"React series Part 1: What Is React? Your First React App, with a React atom and a component tree on a dark navy background\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/22\\\/react-series-part-1-what-is-react\\\/#mainImage\"},\"datePublished\":\"2026-10-22T17:08:25+00:00\",\"dateModified\":\"2026-10-22T17:08:25+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":"What Is React? Your First React App with Vite | DevDojo","description":"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#blogposting","name":"What Is React? Your First React App with Vite | DevDojo","headline":"React Part 1: What Is React and How to Build Your First React App","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\/10\/react-series-part-1-what-is-react.jpg","width":1200,"height":630,"caption":"React series Part 1: What Is React? Your First React App, with a React atom and a component tree on a dark navy background"},"datePublished":"2026-10-22T17:08:25+00:00","dateModified":"2026-10-22T17:08:25+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#webpage"},"articleSection":"Frontend, ReactJS, Frontend Tutorial, JavaScript, React, React for Beginners, ReactJS, Series: React, Vite"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#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\/10\/22\/react-series-part-1-what-is-react\/#listItem","name":"React Part 1: What Is React and How to Build Your First React App"},"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\/10\/22\/react-series-part-1-what-is-react\/#listItem","position":4,"name":"React Part 1: What Is React and How to Build Your First React App","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\/10\/22\/react-series-part-1-what-is-react\/#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\/10\/22\/react-series-part-1-what-is-react\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/","name":"What Is React? Your First React App with Vite | DevDojo","description":"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#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\/10\/react-series-part-1-what-is-react.jpg","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#mainImage","width":1200,"height":630,"caption":"React series Part 1: What Is React? Your First React App, with a React atom and a component tree on a dark navy background"},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/#mainImage"},"datePublished":"2026-10-22T17:08:25+00:00","dateModified":"2026-10-22T17:08:25+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":"What Is React? Your First React App with Vite","og:description":"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.","og:url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/","article:published_time":"2026-10-22T17:08:25+00:00","article:modified_time":"2026-10-22T17:08:25+00:00","twitter:card":"summary_large_image","twitter:title":"What Is React? Your First React App with Vite","twitter:description":"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step."},"aioseo_meta_data":{"post_id":"232","title":"What Is React? Your First React App with Vite | DevDojo","description":"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.","keywords":null,"keyphrases":{"focus":{"keyphrase":"what is React","score":72},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"What Is React? Your First React App with Vite","og_description":"What is React? Learn React in simple words: components, JSX, state and the virtual DOM, then build your first React app with Vite, step by step.","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":"","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":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2026-10-22 14:21:16","updated":"2026-10-22 17:09:17","focus_keyword":"what is React","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 1: What Is React and How to Build Your First React App\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 1: What Is React and How to Build Your First React App","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/232","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=232"}],"version-history":[{"count":1,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/232\/revisions"}],"predecessor-version":[{"id":233,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/232\/revisions\/233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/231"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}