React Components Aren't Magic—They're Built on a JavaScript Mindset

Before You Learn React, Master This JavaScript Habit

When I first started learning React, everyone kept talking about components.

Components this.

Components that.

At first, I thought components were something unique to React.

But after spending more time with vanilla JavaScript, I realized something.

The mindset behind React components already exists in JavaScript.

React didn't invent reusability—it simply gave it a better structure.

If you're planning to learn React after JavaScript, there's one habit worth building now:

Write reusable code.

Why Reusability Matters

Imagine you're building a dashboard.

It has five buttons.

Every button shares the same styling and almost the same behavior.

One approach would be to copy and paste the same code five times.

It works...

Until you want to change something.

Now you're editing five different places.

Maybe you decide to change the button color.

Or the padding.

Or add an icon.

Now every copy needs to be updated.

This is where reusable code shines.

Write it once.

Use it everywhere.

Besides saving time, reusable code makes your projects:

• Easier to maintain
• Easier to debug
• Easier to extend
• Easier for other developers to understand

JavaScript Already Supports This

When people hear the word component, they immediately think of React.

But JavaScript has supported reusable logic for years through functions.

For example:

function createButton(text) {
  const button = document.createElement("button");

  button.textContent = text;
  button.className = "btn";

  return button;
}

Instead of writing this repeatedly:

const saveBtn = document.createElement("button");
saveBtn.textContent = "Save";

const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";

const cancelBtn = document.createElement("button");
cancelBtn.textContent = "Cancel";

You simply reuse your function:

document.body.append(
  createButton("Save"),
  createButton("Delete"),
  createButton("Cancel")
);

One function.

Multiple buttons.

Same logic.

This Is The Mindset React Builds On

Now look at React.

<Button text="Save" />
<Button text="Delete" />
<Button text="Cancel" />

Different syntax.

Same principle.

React components are simply reusable pieces of UI.

Instead of returning DOM elements directly, React components return JSX.

The idea, however, is exactly the same:

Create something once.

Reuse it whenever you need it.

React Isn't Magic

One thing that slowed me down when learning React was thinking it introduced an entirely new way of programming.

It doesn't.

React is still JavaScript.

It simply encourages you to organize your UI into reusable, self-contained pieces called components.

Once I stopped thinking of components as something magical, React became much easier to understand.

What You Should Practice Before React

If you're currently learning vanilla JavaScript, I think there are a few habits worth developing before moving to React.

• Write reusable functions.
• Break large problems into smaller ones.
• Avoid copying and pasting code.
• Keep related logic together.
• Think about maintainability instead of just making things work.

These habits transfer directly into React development.

Final Thoughts

Many beginners rush into React because it's popular.

There's nothing wrong with that.

But if you spend time mastering reusable functions in vanilla JavaScript first, React starts to feel much more familiar.

You'll spend less time wondering "What is a component?"

And more time appreciating why components exist.

React didn't invent reusability.

It simply built an entire library around a mindset JavaScript already encourages.

What do you think?

If you've already learned React, did understanding JavaScript functions make components easier to understand?

I'd love to hear your thoughts.