What is React?
Build complex, interactive interfaces from small reusable pieces called components — the modern way to build front-ends.
What you will learn
- Explain what React is and why it is popular
- Understand components and the idea of reusable UI
- See a React component render live
React in one idea
React is a JavaScript library (a ready-made toolkit of code you build on top of) for building user interfaces out of components — small, reusable pieces of UI (UI is just short for user interface: the buttons, text and boxes a person sees and clicks). Instead of manually updating the DOM (the Document Object Model — the live, in-memory tree of all the elements on your page, which you edited by hand in the JS course), you describe what the UI should look like for the current data, and React efficiently updates the page for you.
It was built by Facebook/Meta and is the most popular front-end tool in the world — it is the R in MERN.
A component renders live
function App() {
return (
<div>
<h1>Hello from React! ⚛️</h1>
<p>This heading was rendered by a React component.</p>
</div>
);
}Read it top to bottom: function App() defines a component (just a function whose name starts with a capital letter). It returns some HTML-like markup — a <div> holding an <h1> and a <p>. React takes whatever the function returns and paints it on the page. That is the whole job of a component: a function that returns what you want to see.
Note: Output: A big heading reading Hello from React! ⚛️, with the line “This heading was rendered by a React component.” underneath. You did not touch the page yourself — you described the UI in a function and React drew it for you.
Note: This preview really runs React (loaded from a CDN — a Content Delivery Network, just a fast public web server that hosts ready-to-use code like React). In your own projects you will use a tool called Vite to build React apps — that is the next lesson.
Tip: Why components? Build a <Button> or <Card> once, then reuse it everywhere. Change it in one place and it updates everywhere. This is how huge apps stay manageable.
Q. What is the core building block of a React app?
✍️ Practice
- Change the example to show your own name and a short bio.
- Add a second heading and a list inside the component.
🏠 Homework
- Write two sentences on what a “component” is and why reusable UI is useful.