React Features

In the last lesson, Why Learn React?, we talked about why so many teams pick React. Now let’s look at the features inside React that make it feel different from plain JavaScript.

🤔 Why Should You Know React’s Features?

Here is the pain you hit if you skip this part:

• You can copy React code and make it run, sure.
• But if you do not know why React works the way it does, every new concept feels random.
• So you end up memorizing things without really understanding them.

The fix is simple, and here is how it works:

• Learn the few core ideas first.
• Every React feature you meet later is built on top of these.
• So think of this lesson as the map for the whole journey.

🧩 React Is Built From Components

The first big idea is components. Here is what that means:

• A component is a small, self-contained piece of your user interface.
• Think of a like button, a search bar, or a navigation menu. Each one is its own little block.
• You build a whole page by joining these blocks together.
• It is a bit like building with toy blocks. You make small pieces, then you join them into something big.

Here is a tiny component that shows a greeting.

function Greeting() {
  return <h1>Hello, Alex!</h1>;
}

So that Greeting is one block, and here is what you can do with it:

• You can drop it into a page.
• You can use it again and again.
• We will go much deeper into components in their own module.
• For now, just hold this thought: in React, your interface is made of small pieces.

🎨 JSX Lets You Write HTML Inside JavaScript

Look at the code above again. See the <h1>Hello, Alex!</h1> part sitting inside a JavaScript function? That is JSX, and here is the idea:

• JSX lets you write markup that looks like HTML right inside your JavaScript.
• Without JSX, you would have to call awkward functions to build every element.
• With JSX, you just write what you want the screen to look like.
• It reads almost like normal HTML, so your code stays close to the thing it describes.

JSX has a few rules of its own, and it gets a whole module later in this course. For now, just know that this HTML-looking syntax inside JavaScript is a real React feature, and it has a name.

⚡ The Virtual DOM Keeps Things Fast

Now for the feature people talk about the most. The virtual DOM.

First, the problem:

• The real DOM is the live page in your browser.
• Changing the real DOM directly is slow.
• So if your app updates the page a lot, doing it the simple way makes everything feel sluggish.

React’s answer is to keep a lightweight copy of the page in memory. That copy is the virtual DOM. When your data changes, React does this:

• It builds a fresh virtual copy of what the page should look like now.
• It compares that new copy to the previous one.
• It finds the exact spots that changed.
• Then it updates only those spots in the real page.

So instead of redrawing the whole page, React touches just the parts that are different. That is why React apps can update so fast.

➡️ One-Way Data Flow Keeps Apps Predictable

The next feature is about how information moves through your app. In React, data flows in one direction. Here is the picture:

• Data goes down, from a parent component to its child components.
• Picture a family tree. The component at the top holds some data.
• It passes pieces of that data down to the components below it.
• Those children cannot reach up and secretly change the parent’s data. They just receive what they are given.

Why is this a good thing? Because it makes problems easy to track down:

• When something looks wrong on the screen, you know where to look.
• The data came from above, so you trace it upward to find the source.
• This makes apps much easier to understand and to fix.

We pass data down using something called props, which has its own lesson. The key idea here is the direction. Data goes down, predictably.

♻️ Reusability Saves You From Repeating Work

The last feature ties the others together: reusability. Here is what it buys you:

• Because your interface is made of components, you can write a piece once and use it in many places.
• Say you build a nice button component. You can use that same button on your home page, your login page, and your settings page.
• If you need to change how the button looks, you change it in one spot, and every place that uses it updates too.
• This saves time, and it keeps your app consistent. The same button behaves the same way everywhere, because it is literally the same component.

📋 The Features At A Glance

Here is a quick summary of each feature and what it gives you.

⚠️ Common Mistakes

A few things trip people up when they first meet these features:

• Thinking React is a full framework like Angular. React is a library focused on building the interface. It does not force a way to do routing or data fetching out of the box.
• Believing you must hand-write virtual DOM logic. You do not. React handles the comparing and updating for you.
• Trying to make a child component change its parent’s data directly. Data flows down, not up. A child asks the parent to change things in a controlled way instead.
• Copying and pasting the same chunk of interface again and again. That is exactly what components are meant to replace.

✅ Best Practices

• Build your interface as small components from the start. Small pieces are easier to read, test, and reuse.
• Let data flow down. Keep the source of truth in a parent and pass what each child needs.
• Trust the virtual DOM. Focus on describing what the screen should look like for the current data, and let React do the updating.
• Give each component one clear job. If you struggle to name it, it is probably doing too much.

🧩 What You’ve Learned

You now understand the main features of React:

• ✅ React builds interfaces from small, self-contained components.
• ✅ JSX lets you write HTML-like markup inside JavaScript.
• ✅ The virtual DOM makes updates fast by changing only what is different.
• ✅ One-way data flow sends data down from parent to child, which keeps apps predictable.
• ✅ Reusability means you write a component once and use it in many places.

🚀 What’s Next?

You know the core features now. Next we will look at how React actually puts them to work when it runs your app.

How React Works