{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreifxxku7bb7pefthpjfiqw2vljhz3636qenspxr6cgdn2nxmnlpjse",
"uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3movngicob2y2"
},
"coverImage": {
"$type": "blob",
"ref": {
"$link": "bafkreicdtasy4lfqiwfbg46fyaikqhrhhni5ieez4nrnsbkf2y2pfnjchy"
},
"mimeType": "image/webp",
"size": 196604
},
"path": "/bismay-exe/day-1-of-learning-react-why-react-exists-the-real-dom-virtual-dom-react-elements-5b61",
"publishedAt": "2026-06-22T19:28:37.000Z",
"site": "https://dev.to",
"tags": [
"react",
"javascript",
"webdev",
"beginners",
"GitHub"
],
"textContent": "Today marks **Day 1** of my React journey.\n\nI've decided to document everything I learn—not because I'm an expert, but because I believe sharing the learning process can help other beginners while also helping me understand concepts better.\n\nToday's goal wasn't to build an app.\n\nIt was to answer one simple question:\n\n> **Why was React created in the first place? 🤔**\n\nLet's dive in.\n\n## 💡 Why Was React Created?\n\nBefore React existed, developers built interactive websites by directly manipulating the browser's DOM using JavaScript or jQuery.\n\nFor example:\n\n\n\n const heading = document.querySelector(\"h1\");\n heading.textContent = \"Hello World\";\n\n\nThis works perfectly for small applications.\n\nBut imagine building something like Facebook.\n\n * 📰 News Feed\n * 💬 Messages\n * ❤️ Likes\n * 🔔 Notifications\n * 💭 Comments\n * 👥 Friends List\n\n\n\nEach part of the page can update independently.\n\nAs applications grow larger, manually deciding:\n\n * Which DOM node should update\n * When it should update\n * What else depends on it\n\n\n\nbecomes increasingly difficult.\n\nThat's where React changed everything.\n\nInstead of manually updating the UI, React introduced a much simpler idea:\n\n> **UI = Function(State)**\n\nYou describe **what the UI should look like** , and React figures out **how to efficiently update the browser.**\n\nI think that's a really elegant way to think about building user interfaces.\n\n## 🌳 What Is the Real DOM?\n\nWhen the browser reads your HTML, it creates a tree-like structure called the **Document Object Model (DOM).**\n\nFor example:\n\n\n\n <body>\n <main>\n <h1>Hello</h1>\n </main>\n </body>\n\n\nThe browser sees something like this:\n\n\n\n Document\n └── body\n └── main\n └── h1\n └── Hello\n\n\nThis is called the **Real DOM** because it's managed directly by the browser.\n\nWhenever something changes, the browser may need to:\n\n * 📐 Recalculate layouts\n * 🎨 Repaint elements\n * 🖥️ Update the screen\n\n\n\nThese operations become expensive in large applications.\n\n## ⚛️ What Is a React Element?\n\nOne thing that surprised me today was learning that React doesn't immediately create HTML elements.\n\nWhen we write:\n\n\n\n const element = React.createElement(\n \"h1\",\n {},\n \"Hello React\"\n );\n\n\nReact actually creates a plain JavaScript object like this:\n\n\n\n {\n type: \"h1\",\n props: {\n children: \"Hello React\"\n }\n }\n\n\nThis object is called a **React Element**.\n\nA React Element is simply a **description of what the UI should look like.**\n\nIt isn't a real DOM node.\n\nThat small distinction helped me understand React much better.\n\n## 🧠 What Is the Virtual DOM?\n\nThe **Virtual DOM** is another concept I finally understood today.\n\nIt's basically a JavaScript representation of the UI that lives entirely in memory.\n\nFor example:\n\n\n\n <div>\n <h1>Hello</h1>\n <p>World</p>\n </div>\n\n\nReact internally represents it as something similar to:\n\n\n\n {\n type: \"div\",\n children: [\n {\n type: \"h1\",\n children: [\"Hello\"]\n },\n {\n type: \"p\",\n children: [\"World\"]\n }\n ]\n }\n\n\nThe important thing I learned is:\n\n> **The Virtual DOM doesn't exist inside the browser. It only exists in JavaScript memory.**\n\nReact compares changes in this virtual representation and updates only the parts of the Real DOM that actually changed.\n\nThat's one of the reasons React applications stay efficient.\n\n## 🎯 What Happens During the First Render?\n\nWhen React renders an application for the first time:\n\n\n\n const root = ReactDOM.createRoot(\n document.querySelector(\"main\")\n );\n\n root.render(\n React.createElement(\n \"h1\",\n {},\n \"Hello React\"\n )\n );\n\n\nThe process looks something like this:\n\n\n\n React Element\n ↓\n Virtual DOM\n ↓\n Real DOM\n ↓\n Browser Screen\n\n\nReact creates the necessary DOM nodes and finally displays them in the browser.\n\n## ✨ My Biggest Takeaway Today\n\nToday's lesson completely changed how I thought about React.\n\nBefore today I assumed React was simply another JavaScript library.\n\nNow I realize it's actually **a different way of thinking about building user interfaces.**\n\nInstead of telling the browser _how_ to update every single element...\n\nReact lets us describe _what_ we want the UI to look like.\n\nThat shift in mindset is what makes React so powerful.\n\n## 📚 What I'm Learning Next\n\nTomorrow I'm planning to learn:\n\n * ⚛️ Components\n * 🧩 JSX\n * 📦 Props\n\n\n\nI'll continue documenting everything I learn as I go.\n\n## 📖 Learning Source\n\nI'm currently learning React through the React course by **Devendra Dhote** at **Sheriyans Coding School**. These posts are my own notes and understanding of each day's lessons, written in my own words as I continue learning.\n\nIf I misunderstand any concept, feel free to correct me in the comments—I'm here to learn. 😊\n\n## 🙌 Final Thoughts\n\nThis is only **Day 1** , but I'm already enjoying the journey.\n\nI'm sure there will be confusing concepts, bugs, and plenty of mistakes along the way—but that's part of learning.\n\nIf you're also starting React from scratch, let's learn together.\n\nSee you in **Day 2! 🚀**\n\n💬 **What was the hardest React concept for you when you started?**\n\nI'd love to hear your experience in the comments. 😊\n\nIf you're also learning React, consider following along—I'll be sharing what I learn every day. You can also find me on GitHub, where I'll be sharing my projects and documenting my progress.\n\nThanks for reading! 🚀",
"title": "🚀 Day 1 of Learning React: Why React Exists, the Real DOM, Virtual DOM & React Elements"
}