Aereli
10/23/2019 - 11:46 AM

rendering-component-with-props

rendering-component-with-props

rendering-component-with-props.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>React Practice</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <!--
      INSTRUCTIONS:

      We have created a functional Person component.

      1)  Use ReactDOM to render a person inside the root div.
      2)  Add your own name, age and mood as props,
          and make sure you can see them on the screen.
    -->
    <script type="text/babel">
      const Person = (props) => {
        return(
          <div>
            <h1>My name is {props.name}</h1>
            <p>I am {props.age} years old</p>
            <p>and today I am feeling {props.mood}</p>
          </div>
        )
      }
      // your code goes here...
        ReactDOM.render(
            <Person 
              name="Eric"
              age="29"
              mood="happy"
            />, 
          document.getElementById('root'))
    </script>
  </body>
</html>