Posted in React

Understanding Nested Components and JSX Composition in React (With Examples)

Estimated read time 4 min read

When I first started learning React, I kept hearing the word “components” everywhere. People said things like “React is all about components” or “Just break things into smaller components.” Honestly, it sounded simple, but I didn’t fully get it at the start.

So in this post, I just want to explain in a very normal way — what is a nested component, what is composition, and how you can use them without overthinking.

What is a Nested Component in React?

Think of nesting components like nesting boxes. One box inside another box. In React, it’s the same idea. You write one small component, and then you can put it inside a bigger one.

Here’s an example. This is a small Title component that just shows a heading:

const Title = () => {
  return <h1>Hello React World!</h1>;
};

And here’s a bigger component that uses it:

const Header = () => {
  return (
    <div>
      <Title />
      <p>This is my header component.</p>
    </div>
  );
};

So Title is nested inside Header. That’s it. Nothing fancy. Nesting just means putting one thing inside another.

Why Do We Do This?

Because it makes life easier. Instead of writing one giant chunk of code that handles everything, you break it into smaller, reusable pieces. Like building something out of LEGO. Small bricks, one by one.

What is Composition?

Composition is really just combining multiple small components together to build something larger. Again, nothing complicated here.

Imagine you are building a simple website layout. You can break it down like this:

  • A Header
  • A Footer
  • A Main section
  • Maybe a Sidebar

Each one is its own small component. Then you bring them together inside the main App component.

const App = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

Now App is composed of smaller components. That’s all composition is — combining things.

Writing JavaScript Inside JSX

React lets you write JavaScript inside your JSX by using curly braces {}. This is super handy when you want to make your UI dynamic.

For example, if you have a username:

const userName = "TechCanva";

const Welcome = () => {
  return <h2>Welcome, {userName}!</h2>;
};

Or if you want to do something quick like math:

<h3>{50 + 50}</h3>

Or even use a function:

const getYear = () => new Date().getFullYear();

<p>Year: {getYear()}</p>

Just remember: you can only put expressions inside {}, not full statements like if or loops.

Using JSX as Variables

Another nice thing is you can store JSX in variables. This helps keep your return statements clean.

const heading = <h1>React is Fun!</h1>;

const Header = () => {
  return (
    <div>
      {heading}
      <p>This is my header content.</p>
    </div>
  );
};

You can even store little things like badges or labels:

const badge = <span>New!</span>;

const Title = () => {
  return (
    <h1>
      {badge} Welcome to React
    </h1>
  );
};

A Few Simple Best Practices

If you want your React code to be easy to read and maintain, these small habits help:

  • Define your variables before you use them.
  • Always start component names with a capital letter (React expects this).
  • Keep logic outside your JSX if possible — it makes things neater.
  • Reuse components when you notice you’re repeating the same UI.

Trust me, this makes things less painful later.

Why This Stuff Matters

When you work on bigger projects, it’s easy for things to get messy fast. One big file, too many lines, hard to read… it happens. Breaking things down into smaller components keeps everything organized and clean.

It also makes it easier to:

  • Reuse parts of your app
  • Work with others
  • Fix bugs faster

React is flexible, but if you don’t organize things well from the start, it becomes a headache later.

Final Thoughts

If you’re learning React, don’t stress too much about these terms. Just keep practicing writing small components and putting them together.

That’s really what React is about at its core — small pieces that make a bigger thing. Once this feels natural, moving to props, state, hooks, and other stuff becomes much easier.

React is like LEGO. Build small, reuse often, and keep it simple.

📺 Want to See It in Action?

👉 Watch the full beginner-friendly React tutorial here:
https://youtu.be/bvk1h2i1h5k

🎬 Like the content? Subscribe, Share, and Drop a Comment to help others learn React the easy way!

Related