August 4, 2019

3. Hello Component

      const rootElement = document.getElementById('root')

      // This version uses a `msg` prop
      // const Message = (props) => <div>{props.msg}</div>

      // const element = (
      //   <div className="container">
      //     <Message msg="Hello World" />
      //     <Message msg="Goodbye World" />
      //   </div>
      // )

      // This version uses the `children` prop, which allows us to
      // use <Message> similarly to HTML, allowing us to nest components:

      const Message = props => <div>{props.children}</div>

      const element = (
        <div className="container">
          <Message>
            Hello World
            <Message>Goodbye World</Message>
          </Message>
        </div>
      )

      ReactDOM.render(element, rootElement)

Tags: react