Module 31: Introduction to React
Why React exists
🏠The everyday picture
In Level 2 you changed the page by hand: find this element, change its text, add that class. That's like repainting a building one brick at a time whenever anything changes. React lets you describe how the whole building should look for the current situation, and it works out which bricks to repaint.
📘What it really is
-
React is a JavaScript library for building user interfaces from components: reusable pieces like a button, a product card, a search bar or a whole page.
-
It's declarative: you describe what the screen should show for the current data, and when the data changes, React updates the page to match. You don't write "find element, change text" by hand (Module 19's way).
-
Why it's popular:
- big interfaces stay manageable when split into components;
- the same component is reused across pages;
-
a huge ecosystem of tools and help, and AI knows it very well.
-
React runs in the browser (the frontend). It doesn't store data or check passwords; the backend does that (Course 4.3).
-
Alternatives exist (Vue, Svelte, Angular) with similar ideas. What you learn here transfers.
🖱️Try it
Open a site you use daily, such as an online shop. Draw boxes around the parts you'd make into components: the header, the search bar, one product card (used many times), the filters, the cart button. Name each box.
✅Quick check
What does "declarative" mean in React?
Show the answer
You describe what the screen should look like for the current data, and React makes the page match.
Does React store your app's data permanently?
Show the answer
No. It runs in the browser; storing data needs a backend and database.