Reactを学ぶ前に、このJavaScript習慣を身につけよう

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.

なぜ再利用性が重要なのか

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はすでにこれをサポートしている

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;
}

Enter fullscreen mode Exit fullscreen mode

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";

Enter fullscreen mode Exit fullscreen mode

You simply reuse your function:

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

Enter fullscreen mode Exit fullscreen mode

One function.

Multiple buttons.

Same logic.

Reactが基盤とする考え方

Now look at React.

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

Enter fullscreen mode Exit fullscreen mode

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は魔法ではない

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.

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.

最後に

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.