If you’re new to web coding, you hear “JavaScript” and “React” a lot. JavaScript makes websites do cool stuff. But what’s React? Why do we need it if JavaScript was fine? It’s like asking, “We had bikes, so why make cars?” Let’s explain it simply,
Before React: Coding Was Tough
Imagine you’re making a Facebook dashboard. It has:
- A notification bell with 5 alerts.
- A friend list showing who’s online.
- A news feed with new posts.
- A “like” button that turns blue when clicked.
Focus on the bell. A new notification comes, and the number changes from 5 to 6. With plain JavaScript, you’d:
- Find the bell on the page (document.getElementById(‘notification-bell’)).
- Change the text to “6” (notificationBell.innerText = ‘6’).
Easy for one thing. But what if the number is also in the page title? Or a menu? You have to update all those spots. Miss one, and your app shows wrong info. This is called imperative coding—you tell the browser every step.
For a big app like Facebook, with likes, comments, and messages changing all the time, this was a mess. The code got super messy, like tangled wires. Developers called it “spaghetti code.” Fixing one thing could break others. They needed a better way.
Facebook’s Idea: Make It Easy
Facebook’s team was tired of this mess. They thought, “Why tell the browser every step? Why not just say what the page should look like?” This is called declarative coding, and it’s what React is all about.
Instead of “find the bell and change it,” you say, “The bell has 6 notifications. Show it.” React does the rest. Here’s how it works with three big ideas.
Idea 1: Components (Like Toy Blocks)
React splits your webpage into small pieces called components. Think of toy blocks:
- Old Way (JavaScript): You build a house by putting every piece. Change one, and the house might fall.
- React Way (Components): You have ready-made blocks—a door, a window, a wall. Stack them to make a house.
For the Facebook dashboard, you’d have:
- A <NotificationBell /> component.
- A <FriendList /> component.
- A <LikeButton /> component.
Each component has its own HTML, CSS, and JavaScript. The <LikeButton /> doesn’t care about the bell. This keeps your code neat, reusable, and easy to fix, like organizing your clothes in separate drawers.
Idea 2: State (The Component’s Brain)
How do components know what to show? Like, how does <LikeButton /> know if it’s liked? That’s where state comes in. State is a simple JavaScript object that holds a component’s data.
For <LikeButton />, state might be:
{
likeCount: 100,
isLiked: false
}
This state is the truth. The button depends on it:
- If isLiked is false, the button is gray.
- If isLiked is true, it’s blue.
- It shows likeCount.
When you click, you don’t touch the button’s look. You update the state: “Set isLiked to true and make likeCount 101.” React sees the change and updates the button. It’s like telling a chef you want pizza, and they handle the rest.
Idea 3: Virtual DOM (The Fast Helper)
You might think, “Redrawing the button every time sounds slow.” Changing the webpage (called the DOM) is slow. Doing it a lot would make your app lag.
React’s Virtual DOM fixes this. Think of it like this:
- The real DOM is a big, fancy painting. Changing it takes time.
- The Virtual DOM is a quick sketch on paper. It’s fast to update.
- When data changes (like a new like), React updates the sketch, checks what’s different, and only changes that part in the real DOM.
This makes React apps super fast, like a speedy bike weaving through traffic.
Why React Is Awesome
React started at Facebook but now it’s everywhere. It’s not just for websites:
- React Native builds mobile apps for iOS and Android.
- Tools like Next.js make web apps easier.
Why do we need React? JavaScript was like building a house with just a hammer. React gives you tools—components, state, Virtual DOM—to build big apps without a headache. It lets you focus on making cool stuff.
Learn JavaScript first—it’s the base. Then React is like getting a shiny new car. It’s fast, easy, and lets you build awesome apps. So, open your laptop and start coding something great!
If you want to learn about some best tools for Frontend Developers, here are Top 10 must have Frontend Developer Tools