.red {
  padding: 1rem;
  border: 3px solid red
}

.orange {
  padding: 1rem;
  border: 3px solid orange
}

.green {
  padding: 1rem;
  border: 3px solid green
}

.blue {
  padding: 1rem;
  border: 3px solid blue
}

const MyComponent3 = () => <div className="green"><p>Component - 3</p></div>

const MyComponent2 = () => (
    <div className="blue">
      <p>Component - 2</p>
      <MyComponent3/>
    </div>
)

const MyComponent1 = () => (
   <div className="orange">
    <p>Component - 1</p>
    <MyComponent2/>
  </div>
)

const App = () => {
  return (
    <div className="red">
      <p>Hello Ray.</p>
      <MyComponent1 />
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);