What is React?
- React course
- Beginner
- Lesson 1/84
- 4 min
Learn that React is a component-based library and why it is so common on the web.
What is React?
React is an open-source JavaScript library developed by Facebook (today's Meta). You build user interfaces out of small, reusable pieces called components.
At its heart sits the Virtual DOM. React keeps a copy of the UI in memory and, when something changes, applies only the changed part to the real DOM. That makes updates fast.
Today, big products such as Netflix, Airbnb and Instagram are written with React. React alone is not a framework but a library; with tools like react-router and Next.js it can act like a full framework.
Components and the Virtual DOM
A component is a function that produces a piece of UI. For example, Button, Avatar and Header can each be a component. You nest them to build the whole page.
The Virtual DOM is React's trick: before touching the real DOM, React applies a change to a virtual copy first, then diffs it against the real one. Only the changed spot is updated.
This way you say what you want to see; React figures out how to update. This approach is called declarative programming.
Practice Write an empty React component
Complete the skeleton. Define a function called Greeting that returns <h1>Hello</h1>. Make sure the function is exported.
Starter code
// Define the Greeting component hereSample solution
function Greeting() {
return <h1>Hello</h1>;
}
export default Greeting;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where was React born?
- At Facebook (Meta) Correct answer
- At Google
- At Microsoft
- At Apple
Explanation: React was built by engineers at Facebook (today's Meta).
2 Match the concepts
| Term | Meaning |
|---|---|
React |
Library |
Component |
UI piece |
Virtual DOM |
In-memory copy |
Meta |
Company |
3 The key benefit of the Virtual DOM
React updates the ____ first instead of the real DOM; then applies the diff.React updates the Virtual DOM first instead of the real DOM; then applies the diff.Explanation: The Virtual DOM is updated in memory first, then the diff is applied to the real DOM.