exercise 3

src/exercise/03.html

@@ -6,26 +6,63 @@
   <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>
 
-  <!-- 💣 remove this line
   <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
-  💣 remove this line -->
 
-  <script type="module">
+  <script type="text/babel">
     // 🐨 on the script tag above, change `type="module"`
     // to `type="text/babel"` so babel will compile this code for the browser to run.
 
     // 🐨 re-implement this using JSX!
-    const element = React.createElement('div', {
-      className: 'container',
-      children: 'Hello World',
-    })
+    // const element = React.createElement('div', {
+    //   className: 'container',
+    //   children: 'Hello World',
+    // });
+
+    const element = <div className="container">Hello World</div>;
 
     // 💰 there are a few subtle differences between JSX and HTML. One such
     // difference is how you apply a class to an element in JSX is by using
     // `className` rather than `class`!
     // 📜 You can learn the differences between JSX and HTML syntax from the React docs here:
     // https://reactjs.org/docs/dom-elements.html#differences-in-attributes
 
-    ReactDOM.render(element, document.getElementById('root'))
+    ReactDOM.render(element, document.getElementById('root'));
+  </script>
+
+  <!-- EXTRA CREDIT -->
+  <div id="root2"></div>
+
+  <script type="text/babel">
+    // See if you can figure out how to extract the className ("container") and children
+    // ("Hello World") to variables and interpolate them in the JSX.
+    // const className = 'container'
+    // const children = 'Hello World'
+    // const element = <div className="hmmm">how do I make this work?</div>
+
+    const className = 'container'
+    const children = 'Hello World'
+    const element = <div className={className}>{children}</div>;
+
+    ReactDOM.render(element, document.getElementById('root2'));
+  </script>
+
+  <!-- EXTRA CREDIT -->
+  <div id="root3"></div>
+
+  <script type="text/babel">
+    // See if you can figure out how to make that work with JSX.
+    const children = 'Hello World';
+    const className = 'container';
+    const props = {children, className};
+    //const element = <div /> // how do I apply props to this div?
+
+    function Div(props) {
+      const {children, ...other} = props; 
+      return <div {...other}>{children}</div>;
+    }
+    const element = <Div {...props}/>;
+
+    ReactDOM.render(element, document.getElementById('root3'));
+
   </script>
 </body>