add fragments extra credit

rhefner · Mar 23, 2020 · 63d53b6 · 63d53b6
1 parent 9280104
commit 63d53b6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/exercise/04.html b/src/exercise/04.html
@@ -10,15 +10,15 @@
     // 🐨 Make a function called `message` which returns the JSX we want to share
 
     // 🐨 use that function in place of the divs below with:
-    // {message({children: 'Hello World'})} {message({children: 'Goodbye World'})}
+    // 💰 {message({children: 'Hello World'})} {message({children: 'Goodbye World'})}
     const element = (
       <div className="container">
         <div className="message">Hello World</div>
         <div className="message">Goodbye World</div>
       </div>
     )
 
-    // This is only the first step to making actual React components. The rest is in the extra credit!
+    // 💯 This is only the first step to making actual React components. The rest is in the extra credit!
     ReactDOM.render(element, document.getElementById('root'))
 
     // P.S. Please don't forget to ask me about React Fragments here!!

diff --git a/src/exercise/04.md b/src/exercise/04.md
@@ -76,6 +76,17 @@ ui = <lower_snake_case /> // React.createElement('lower_snake_case')
 See if you can change your component function name so people can use it with JSX
 more easily!
 
+### 💯 using React Fragments
+
+One feature of JSX that you'll find useful is called
+["React Fragments"](https://reactjs.org/docs/fragments.html). It's a special
+kind of component from React which allows you to position two elements
+side-by-side rather than just nested.
+
+The component is available via `<React.Fragment>`. Replace the
+`<div className="container">` with a fragment and inspect the DOM to notice that
+the elements are both rendered as direct children of `root`.
+
 ## Notes
 
 📜 Read more

diff --git a/src/final/04.extra-3.html b/src/final/04.extra-3.html
@@ -0,0 +1,24 @@
+<!-- Creating custom components -->
+<!-- 💯 using React Fragments -->
+<!-- http://localhost:3000/isolated/final/04.extra-3.html -->
+
+<body>
+  <div id="root"></div>
+  <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone@7.9.3/babel.js"></script>
+  <script type="text/babel">
+    function Message({children}) {
+      return <div className="message">{children}</div>
+    }
+
+    const element = (
+      <>
+        <Message>Hello World</Message>
+        <Message>Goodbye World</Message>
+      </>
+    )
+
+    ReactDOM.render(element, document.getElementById('root'))
+  </script>
+</body>