.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) => {
  console.log('props：', props);
  return (
    <div>
      <p>name： { props.name }, type： { typeof props.name }</p>
      <p>data： { props.data.myName }, type： { typeof props.data }</p>
      <p>arr： { props.arr[0] }, type： { typeof props.arr }</p>
      <p>numStr： { props.numStr }, type： { typeof props.numStr }</p>
      <p>num： { props.num }, type： { typeof props.num }</p>
      <p>dom：{ props.dom }, type： { typeof props.dom }</p>
    </div>
  )
}

const App = () => {
  return (
    <div>
      <MyComponent1
        name="Ray"
        data={ { myName: 'Ray' } }
        arr={ [1, 2, 3] }
        numStr="1"
        num={ 1 }
        dom={ <h1>這是一段文字</h1> }
        />
    </div>
  )
}

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