Merge pull request #1 from NicoleA/exercises

Exercises 1-3
NicoleA · Jun 11, 2021 · 22e1e16 · 22e1e16
2 parents 7569c47 + 9b6dfe7
commit 22e1e16
Show file tree

Hide file tree

Showing 11 changed files with 24,004 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/exercise/01.html b/src/exercise/01.html
@@ -16,3 +16,19 @@
 <!-- 🐨 Append the div to the root div using `append` -->
 <!--   💰 document.getElementById('root') -->
 <!--   📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append -->
+<html>
+    <head>
+        <title>Lesson one</title>
+    </head>
+    <body>
+        <script type="module">
+            var rootDiv = document.createElement('div');
+            rootDiv.setAttribute('id', 'root');
+            document.body.append(rootDiv);
+
+            var myDiv = document.createElement('div');
+            myDiv.textContent = 'Hello World';
+            rootDiv.append(myDiv);
+        </script>
+    </body>
+</html>
diff --git a/src/exercise/01.md b/src/exercise/01.md
@@ -68,4 +68,4 @@ using JavaScript as well.
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=01%3A%20Basic%20JavaScript-rendered%20Hello%20World&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=01%3A%20Basic%20JavaScript-rendered%20Hello%20World&em=nicole%40alley.co).
diff --git a/src/exercise/02.html b/src/exercise/02.html
@@ -4,25 +4,64 @@
 <body>
   <div id="root"></div>
 
-  <!-- 💣 remove this line
   <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 type="module">
     const rootElement = document.getElementById('root')
 
     // You're going to re-implement this code using React!
     // 💣 So go ahead and delete this implementation (or comment it out for now)
     // These three lines are similar to React.createElement
-    const element = document.createElement('div')
-    element.textContent = 'Hello World' // 💰 in React, you set this with the "children" prop
-    element.className = 'container' // 💰 in React, this is also called the "className" prop
+    // const element = document.createElement('div')
+    // element.textContent = 'Hello World' // 💰 in React, you set this with the "children" prop
+    // element.className = 'container' // 💰 in React, this is also called the "className" prop
     // This is similar to ReactDOM.render
-    rootElement.append(element)
+    // rootElement.append(element)
 
     // 🐨 Please re-implement the regular document.createElement code above
     // with these React API calls
     // 💰 The example in the markdown file should be a good hint for you.
+    const elementProps = {children: 'Hello world!'};
+    const elementType = 'div';
+    const reactElement = React.createElement(elementType, elementProps);
+    ReactDOM.render(reactElement, rootElement);
+  </script>
+
+<!-- EXTRA CREDIT -->
+  <div id="root2"></div>
+
+  <script type="module">
+    // See if you can figure out how to write the JavaScript + React code to generate this DOM output:
+    // <body>
+    //   <div id="root">
+    //     <div class="container">
+    //       <span>Hello</span>
+    //       <span>World</span>
+    //     </div>
+    //   </div>
+    // </body>
+
+    // Get the root element where we want to append our content.
+    const rootElement = document.getElementById('root2')
+
+    // Create the span elements.
+    const elProps = [
+      {key:1,children:'Hello'},
+      {key:2,children:'World'},
+    ];
+    const spans = elProps.map((props) =>
+      React.createElement('span', props)
+    );
+
+    // Create the container div with the span elements as children.
+    const containerElement = React.createElement('div', {
+      className: 'container',
+      children: spans,
+    });
+
+    // Render the elements to the DOM.
+    ReactDOM.render(containerElement, rootElement);
+
   </script>
 </body>
diff --git a/src/exercise/02.md b/src/exercise/02.md
@@ -86,4 +86,4 @@ this DOM output:
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=02%3A%20Intro%20to%20raw%20React%20APIs&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=02%3A%20Intro%20to%20raw%20React%20APIs&em=nicole%40alley.co).
diff --git a/src/exercise/03.html b/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>
diff --git a/src/exercise/03.md b/src/exercise/03.md
@@ -111,4 +111,4 @@ See if you can figure out how to make that work with JSX.
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=03%3A%20Using%20JSX&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=03%3A%20Using%20JSX&em=nicole%40alley.co).
diff --git a/src/exercise/04.md b/src/exercise/04.md
@@ -191,4 +191,4 @@ the elements are both rendered as direct children of `root`.
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=04%3A%20Creating%20custom%20components&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=04%3A%20Creating%20custom%20components&em=nicole%40alley.co).
diff --git a/src/exercise/05.md b/src/exercise/05.md
@@ -127,4 +127,4 @@ originally for
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=05%3A%20Styling&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=05%3A%20Styling&em=nicole%40alley.co).
diff --git a/src/exercise/06.md b/src/exercise/06.md
@@ -152,4 +152,4 @@ to enter an invalid value!
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=06%3A%20Forms&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=06%3A%20Forms&em=nicole%40alley.co).
diff --git a/src/exercise/07.md b/src/exercise/07.md
@@ -178,4 +178,4 @@ future workshop so look forward to it!
 ## 🦉 Feedback
 
 Fill out
-[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=07%3A%20Rendering%20Arrays&em=).
+[the feedback form](https://ws.kcd.im/?ws=React%20Fundamentals%20%E2%9A%9B&e=07%3A%20Rendering%20Arrays&em=nicole%40alley.co).