.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 MyComponent1 = (props) => {
  return (
   <div className="orange">
    <p>我的名字是：{ props.data.name }</p>
    <p>我的部落格網址是：{ props.data.url }</p>
  </div>
  )
}

const App = () => {
  const data = {
      name: 'Ray',
      url: 'https://israynotarray.com/'
    }
  return (
    <div className="red">
      { JSON.stringify(data) }
      <MyComponent1 data={ data } />
    </div>
  )
}

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