React is a JavaScript library created for building user interfaces, specifically the part of a web application that users see and interact with. Unlike full frameworks that dictate how you handle routing, data fetching, and more, React focuses exclusively on the view layer. This narrower scope is intentional — it gives developers the freedom to combine React with other tools that best fit their project's needs.
Before React, developers typically manipulated the DOM directly using vanilla JavaScript or libraries like jQuery. Every time data changed, code had to find the right HTML element and update it manually. This approach worked for small pages but became fragile and difficult to maintain as applications grew. Keeping the UI in sync with the underlying data was error-prone and required careful coordination.
React introduced a declarative programming model. Instead of writing step-by-step instructions for how to update the DOM, you describe what the UI should look like for a given state of data. React handles the update process automatically. When your data changes, React determines the most efficient way to update the screen — you simply define the desired output and React figures out how to get there.
Another foundational concept React introduced is the component model. A component is a self-contained piece of UI that manages its own structure, appearance, and behavior. You build complex interfaces by composing smaller components together, much like assembling a product from individual parts. This makes code easier to reason about, test, and reuse across a project.
React also introduced the Virtual DOM — an in-memory representation of the real DOM. When state changes, React first updates the Virtual DOM, compares it to the previous version (a process called reconciliation), and then applies only the necessary changes to the real DOM. This process is more efficient than re-rendering entire pages and is a key reason React-based applications feel responsive and fast.
Consider a social media feed. Every few seconds, new posts appear, likes are updated, and comments are added. With a traditional DOM-manipulation approach, a developer would need to write code that finds each post element, checks if it changed, and updates it manually. With React, the developer simply defines a Post component that renders based on data. When new data arrives, React automatically determines which posts changed and updates only those parts of the screen — keeping the UI consistent without manual DOM queries.
- React is a JavaScript library focused on building user interfaces, not a full framework.
- It uses a declarative model — you describe what the UI should look like, not how to update it.
- The component model breaks UIs into reusable, self-contained pieces.
- The Virtual DOM enables efficient updates by comparing changes before touching the real DOM.