Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Latest commit

 

History

History
51 lines (40 loc) · 1.73 KB

06-react-create-a-simple-reusable-react-component-50d59130.md

File metadata and controls

51 lines (40 loc) · 1.73 KB

06. Create a Simple Reusable React Component

📹 Video

💻 CodeSandbox

Notes

  • One of the biggest paradigm shifts that React offered to the UI ecosystem was the component model.
  • Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    // creating a function component, that accepts a props object and returns a React Element
    // it passes JSX attributes and children to this component as a single object “props”
    function Message({ children }) {
      return <div className="message">{children}</div>;
    }

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

    ReactDOM.render(element, document.getElementById('root'));
  </script>
</body>
  • Rendering a Component:
//  capitalized to ensure that babel passes the function rather than the string message
const element = (
  <div className="container">
    <Message>Hello World</Message>
    <Message>Goodbye World</Message>
  </div>
);

Additional resource