第四周：You may not need a bundler for your NPM library

const App = () => {
  return <p>Hello React</p>
}

console.log(App())
// {
//   $$typeof: Symbol(react.element),
//   "type": "p",
//   "key": null,
//   "ref": null,
//   "props": {
//     "children": "Hello React"
//   },
//   "_owner": null,
//   "_store": {}
// }

console.log(<App />)
// {
//   $$typeof: Symbol(react.element),
//   "key": null,
//   "ref": null,
//   "props": {},
//   "type": () => {…},
//   "_owner": null,
//   "_store": {}
// }

const Text = ({ children }) => {
  console.log('I am calling as an instance of Text')

  return <p>{children}</p>
}

console.log('I am a component', Text)

const App = () => {
  console.log('I am calling as an instance of App')

  const paragraphOne = <p>You rock, React!</p>
  const paragraphTwo = <Text>Bye!</Text>

  console.log('I am an element:', paragraphOne)
  console.log('I am an element too:', paragraphTwo)

  return (
    <div>
      <p>Hello React</p>
      {paragraphOne}
      {paragraphTwo}
    </div>
  )
}

console.log('I am a component', App)
console.log('I am an element', <App />)
console.log('I am an element', <p>too</p>)