React Deep Dive: From Beginner to Advanced/

...

/

Component Composition: Multiple Components in One

Component Composition: Multiple Components in One

Learn about components and the various forms through which components can be returned.

We'll cover the following...

So far, we have only really included DOM elements in our example components. However, React components can also include other nested React components. By defining the component in the same scope or by using CommonJS or the ES-Modules imports withrequire() or import, we can use multiple components in the same scope.

Let’s look at an example to illustrate this:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

The <App /> function returns a <div>, which contains the Hello component that is used to greet both Manuel and Tom. The result:

<div>
    <div>Hello
...