Hello! Welcome to your first lesson in the "Build a Course for React" program. I'm excited to get started.
Given your background as a frontend developer, you're already skilled in using JavaScript to build user interfaces. This lesson will build on that foundation by introducing React and, most importantly, the fundamental shift in thinking it represents. We'll explore what React is and how its declarative approach to building UIs differs from the more traditional imperative method you're likely used to with vanilla JavaScript.
This is the first step in our journey toward your goal of building complete web applications from scratch with React. Understanding this core conceptual difference is crucial, as it underpins everything else you'll learn.
What is React?
At its core, React is a JavaScript library for building user interfaces. Created and maintained by Facebook, it has become one of the most popular tools for frontend development.
The central idea in React is to build your UI out of small, isolated, and reusable pieces called components. Imagine a social media page: you could have a NavBar component, a ProfileInfo component, a Feed component, and each post in the feed could be a Post component. We'll dive deep into components soon, but for now, just think of them as the building blocks of a React application.
To get a quick overview, let's watch a short video.
What Is React (React js) & Why Is It So Popular?
This video from Programming with Mosh provides a concise and clear introduction to what React is and its component-based architecture.
Please watch the video from the beginning until the timestamp 01:48. Pay attention to the definition of React and the concept of breaking a UI into a tree of components.
The Challenge with Vanilla JavaScript: The Imperative Approach
As an experienced developer, you know how to manipulate the DOM using vanilla JavaScript. You select an element using document.getElementById() or querySelector(), create new elements with document.createElement(), and append them using appendChild(). You directly tell the browser, step-by-step, how to change the UI.
This is called the imperative approach. You command the DOM.
This works well for simple tasks. However, as applications grow, managing the state of your application and ensuring the UI correctly reflects that state becomes incredibly complex.
- You have to manually track every piece of data.
- When data changes, you must remember to find and update every single part of the DOM that depends on that data.
- Forgetting a single step can lead to bugs where the UI becomes out of sync with the application's state—a classic and frustrating problem.
To see a practical demonstration of this complexity, the following video walks through building a simple to-do list with vanilla JavaScript. It vividly illustrates how quickly the imperative code can become difficult to manage.
The UI Engineering channel does an excellent job demonstrating the challenges of imperative UI programming. This segment also includes a famous anecdote from Facebook about how this complexity led to persistent bugs in their chat system.
Watch the segment from 05:28 to 08:59. As you watch the vanilla JS to-do list example, notice how every new feature requires adding more specific DOM manipulation instructions. You don't need to write the code, just observe the pattern of increasing complexity.
The React Solution: The Declarative Approach
React flips this paradigm on its head. Instead of telling the browser how to update the UI, you simply declare what the UI should look like for any given state.
Imperative: "Here are the step-by-step instructions to change the view."
Declarative: "For this state, the view should look like this."
You describe the final result, and React takes care of the "how." It handles all the complex and error-prone DOM manipulations for you.
This is a powerful abstraction. It allows you to focus on your application's logic and state, rather than the tedious details of DOM updates.
Let's solidify this concept. The following reading from a Stack Overflow discussion offers several excellent, easy-to-understand analogies and code comparisons.
Difference between declarative and imperative in React.js?
This Stack Overflow thread, 'Difference between declarative and imperative in React.js?', has some of the clearest explanations of this concept you'll find.
Read the first two answers (by Nathan Hagen and Ahmed Eid). Pay attention to the 'butler' analogy and the 'Like button' code example. They perfectly capture the essence of the difference.
Now, let's see this declarative approach in action by revisiting the to-do list example from the UI Engineering video, but this time, built with React.
This clip shows the same to-do list, but implemented declaratively in React. The contrast with the previous vanilla JS code is striking.
Watch the segment from 08:59 to 10:55. Notice how the code no longer contains direct DOM manipulation like appendChild or element.innerText. Instead, it describes the final HTML structure based on the application's state (the array of todos).
As you saw, the React code is much more concise and easier to reason about. We just manage an array of todos (the state), and the UI automatically "reacts" to changes in that array.
How Does React Do It? The Virtual DOM
You might be wondering, "If I'm not touching the DOM, how do the updates actually happen? And is it efficient?"
The magic behind React's declarative power is the Virtual DOM (VDOM).
- The Virtual DOM is a lightweight copy of the real browser DOM, kept in memory as a JavaScript object. It's cheap and fast to create and manipulate.
- When your component's state changes, React creates a new Virtual DOM tree describing the updated UI.
- React then compares this new Virtual DOM with the previous one. This comparison process is called "diffing."
- After calculating the differences, React determines the most efficient, minimal set of changes needed to bring the real DOM in sync with the new Virtual DOM.
- Finally, it applies only those specific changes to the real browser DOM.
This process, called reconciliation, means that instead of re-rendering large parts of the page, React performs targeted, surgical updates, which is highly efficient.
This video from Programming with Mosh explains the Virtual DOM very effectively.
What Is React (React js) & Why Is It So Popular?
Let's return to Mosh's video to get a clear explanation of the Virtual DOM and why React is named 'React'.
Watch the section from 01:48 to 03:31. Focus on how React uses the Virtual DOM to avoid direct, expensive manipulation of the real DOM.
Test your understanding!
Imagine you have a list of 100 items displayed on a webpage. You use JavaScript to delete the 50th item.
- How would you typically do this imperatively with vanilla JavaScript?
- How does React's declarative approach with the Virtual DOM handle this differently? What is the main benefit?
Show answer
-
Imperative (Vanilla JS): You would need to write code to specifically find the 50th list item in the DOM (e.g., using its ID or a selector like
:nth-child(50)) and then call a method likeelement.remove()to explicitly remove it from the DOM. You are giving a direct command to the browser. -
Declarative (React): In React, you wouldn't touch the DOM at all. The list of 100 items would be stored in your component's state (likely as an array). To delete the 50th item, you would simply update the state by removing that item from the array. React would then "see" that the state has changed, create a new Virtual DOM, "diff" it with the old one, identify that one list item is missing, and then issue the single command to the real DOM to remove that specific element.
The main benefit is that you, the developer, only had to worry about updating your data (the array). React handled the complex and potentially error-prone task of figuring out exactly how to update the UI efficiently.
For a more in-depth written explanation of these concepts, you can review the following article.
A Comprehensive Guide to React.js
This article from DEV Community provides a great written summary of the topics we've covered, including the problems React solves, the Virtual DOM, and the declarative vs. imperative paradigms.
Skim through the sections 'The Problem React Solves', 'How React.js Works', and especially 'Declarative UI vs. Imperative UI'. This will help reinforce what you've learned from the videos.
Conclusion
This lesson covered the most fundamental difference between React and vanilla JavaScript for building UIs. Let's summarize the key takeaways:
- React is a JavaScript library for building user interfaces using a component-based architecture.
- Vanilla JS DOM manipulation is imperative: you write step-by-step instructions telling the browser how to change the UI. This can become complex and error-prone.
- React is declarative: you describe what the UI should look like based on its current state, and React handles the "how."
- React achieves this efficiently using a Virtual DOM. It calculates the minimal changes needed and applies them to the real DOM, abstracting away the complex DOM manipulation from the developer.
This shift from an imperative to a declarative mindset is a powerful one that enables you to build complex, scalable applications more easily and with fewer bugs.
In our next lesson, we'll get our hands dirty. You'll learn how to set up a modern React development environment using Vite, which will prepare us to start building our first components.