diff --git a/README.md b/README.md index 6236408..bd7849c 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,8 @@ This workshop starts as a very high level introduction to the core principles of - Current version of [Node/NPM](https://nodejs.org/en/) - Install [Git](https://git-scm.com/downloads) - [VSCode Editor](https://code.visualstudio.com) -- Up to date browser with dev tools (some demos will be shown using Chrome) +- Up to date browser with React Developer Tools +- React Developer Tools: [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) ### Getting Set Up @@ -48,13 +49,13 @@ This workshop starts as a very high level introduction to the core principles of - [Exercise](step1-03/exercise) 4. [React Introduction](step1-04) - [Demo](step1-04/demo) -5. [Thinking in React: Building a Static Page](step1-05) +5. [Building a Static Page](step1-05) - [Demo](step1-05/demo) - [Exercise](step1-05/exercise) -6. [Thinking in React: State Driven UI](step1-06) +6. [State Driven UI](step1-06) - [Demo](step1-06/demo) - [Exercise](step1-06/exercise) -7. [Thinking in React: UI Driven State](step1-07) +7. [Types & UI Driven State](step1-07) - [Demo](step1-07/demo) - [Exercise](step1-07/exercise) diff --git a/assets/track.js b/assets/scripts.js similarity index 100% rename from assets/track.js rename to assets/scripts.js diff --git a/index.html b/index.html index abddfc3..8400b40 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@
  • - UI-Driven State + Types &
    UI-Driven State
    demo | exercise | final @@ -165,6 +165,6 @@
  • Playground
    • - + diff --git a/step1-01/html-demo/html-demo.html b/step1-01/html-demo/html-demo.html index 2fe26b0..f15f393 100644 --- a/step1-01/html-demo/html-demo.html +++ b/step1-01/html-demo/html-demo.html @@ -13,7 +13,18 @@

    Document Meta Data

    -

    head, title, link, style

    + 
    +    <head>
+      <title>Intro to HTML</title>
+      <link rel="stylesheet" href="./style.css" />
+      
+      <style>
+        hr {
+          margin: 40px;
+        }
+      </style>
+    </head>
+
    diff --git a/step1-01/index.html b/step1-01/index.html index e46ae19..05c4cb9 100644 --- a/step1-01/index.html +++ b/step1-01/index.html @@ -15,5 +15,6 @@
    + diff --git a/step1-01/js-demo/js-demo-final.html b/step1-01/js-demo/js-demo-final.html index eb4eb17..ff57981 100644 --- a/step1-01/js-demo/js-demo-final.html +++ b/step1-01/js-demo/js-demo-final.html @@ -1,6 +1,6 @@ - +
    diff --git a/step1-02/index.html b/step1-02/index.html deleted file mode 100644 index a245e9e..0000000 --- a/step1-02/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-03/index.html b/step1-03/index.html deleted file mode 100644 index a245e9e..0000000 --- a/step1-03/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-04/index.html b/step1-04/index.html deleted file mode 100644 index dadfb94..0000000 --- a/step1-04/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-05/index.html b/step1-05/index.html deleted file mode 100644 index dadfb94..0000000 --- a/step1-05/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-06/demo/README.md b/step1-06/demo/README.md index 1722863..c82d7e5 100644 --- a/step1-06/demo/README.md +++ b/step1-06/demo/README.md @@ -71,10 +71,10 @@ I've already pulled out our props into `filter` and `todos` variables, and writt } ``` -- A JavaScript map takes in an array and transforms it into a new array -- We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes. -- The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later. -- Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values. +- **map**: A JavaScript map takes in an array (filteredTodos) and transforms it into a new array (our rendered TodoListItems) +- **key**: We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes. +- **id**: The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later. +- **todos[id]**: Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values. > This spread operator is the same as saying `label={todos[id].label} completed={todos[id].completed}`. Pretty obvious why spread is so handy! ### State Driven and Stateful Header @@ -87,9 +87,9 @@ In CSS based styling, visual states are applied by adding and removing classes. ```jsx ``` diff --git a/step1-06/demo/src/components/TodoFooter.tsx b/step1-06/demo/src/components/TodoFooter.tsx index c936963..ae4bf06 100644 --- a/step1-06/demo/src/components/TodoFooter.tsx +++ b/step1-06/demo/src/components/TodoFooter.tsx @@ -1,7 +1,7 @@ import React from 'react'; export const TodoFooter = (props: any) => { - const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; + // const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; return (
    ); diff --git a/step1-06/final/src/components/TodoHeader.tsx b/step1-06/final/src/components/TodoHeader.tsx index 17a8b3e..f606f4a 100644 --- a/step1-06/final/src/components/TodoHeader.tsx +++ b/step1-06/final/src/components/TodoHeader.tsx @@ -5,7 +5,7 @@ export class TodoHeader extends React.Component { super(props); this.state = { labelInput: '' }; } - + render() { const { filter } = this.props; @@ -17,9 +17,9 @@ export class TodoHeader extends React.Component { ); diff --git a/step1-07/demo/README.md b/step1-07/demo/README.md index 0222dd5..7a2d569 100644 --- a/step1-07/demo/README.md +++ b/step1-07/demo/README.md @@ -160,8 +160,12 @@ const { label, completed, complete, id } = this.props; And then use the input's `onChange` event to fire our `complete` callback. We can see in the signature that we expect and `id` of type string, so we'll pass our `id` prop in. +> A [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) is a function passed into a component as a prop + ```tsx complete(id)} /> ``` > Note that the function param and prop name just happen to be the same. This isn't required. + +Now that our todos are firing the `onChange` callback, give them a click and take look at how the app response. Since our footer text is driven off of the number of unchecked todos, the footer will automatically update to reflect the new state. diff --git a/step1-07/demo/src/TodoApp.tsx b/step1-07/demo/src/TodoApp.tsx index bfcbe22..7c67e87 100644 --- a/step1-07/demo/src/TodoApp.tsx +++ b/step1-07/demo/src/TodoApp.tsx @@ -10,7 +10,24 @@ export class TodoApp extends React.Component { constructor(props) { super(props); this.state = { - todos: {}, + todos: { + '04': { + label: 'Todo 4', + completed: true + }, + '03': { + label: 'Todo 3', + completed: false + }, + '02': { + label: 'Todo 2', + completed: false + }, + '01': { + label: 'Todo 1', + completed: false + } + }, filter: 'all' }; } diff --git a/step1-07/exercise/src/TodoApp.tsx b/step1-07/exercise/src/TodoApp.tsx index b24da27..c8ec119 100644 --- a/step1-07/exercise/src/TodoApp.tsx +++ b/step1-07/exercise/src/TodoApp.tsx @@ -10,7 +10,24 @@ export class TodoApp extends React.Component { } _onFilter = evt => { - this.props.setFilter(evt.target.textContet); + this.props.setFilter(evt.target.innerText); }; _onChange = evt => { diff --git a/step1-07/final/src/components/TodoHeader.tsx b/step1-07/final/src/components/TodoHeader.tsx index d1f18e3..9526319 100644 --- a/step1-07/final/src/components/TodoHeader.tsx +++ b/step1-07/final/src/components/TodoHeader.tsx @@ -44,7 +44,7 @@ export class TodoHeader extends React.Component { - this.props.setFilter(evt.target.textContet); + this.props.setFilter(evt.target.innerText); }; _onChange = evt => { diff --git a/step1-07/index.html b/step1-07/index.html deleted file mode 100644 index dadfb94..0000000 --- a/step1-07/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step2-01/demo/index.html b/step2-01/demo/index.html index 51959a8..b0857bf 100644 --- a/step2-01/demo/index.html +++ b/step2-01/demo/index.html @@ -8,6 +8,6 @@
    Nothing to show here, just look at your console window for output. Hit F12 to open console window.
    - + diff --git a/step2-01/exercise/index.html b/step2-01/exercise/index.html index 51959a8..b0857bf 100644 --- a/step2-01/exercise/index.html +++ b/step2-01/exercise/index.html @@ -8,6 +8,6 @@
    Nothing to show here, just look at your console window for output. Hit F12 to open console window.
    - + diff --git a/step2-02/demo/index.html b/step2-02/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-02/demo/index.html +++ b/step2-02/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-02/exercise/index.html b/step2-02/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-02/exercise/index.html +++ b/step2-02/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-03/demo/index.html b/step2-03/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-03/demo/index.html +++ b/step2-03/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-03/exercise/index.html b/step2-03/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-03/exercise/index.html +++ b/step2-03/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-04/demo/index.html b/step2-04/demo/index.html index f6ea247..50d9fb4 100644 --- a/step2-04/demo/index.html +++ b/step2-04/demo/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-04/exercise/index.html b/step2-04/exercise/index.html index f6ea247..50d9fb4 100644 --- a/step2-04/exercise/index.html +++ b/step2-04/exercise/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-05/demo/index.html b/step2-05/demo/index.html index f6ea247..50d9fb4 100644 --- a/step2-05/demo/index.html +++ b/step2-05/demo/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-05/exercise/index.html b/step2-05/exercise/index.html index f6ea247..50d9fb4 100644 --- a/step2-05/exercise/index.html +++ b/step2-05/exercise/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-06/demo/index.html b/step2-06/demo/index.html index f6ea247..50d9fb4 100644 --- a/step2-06/demo/index.html +++ b/step2-06/demo/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-06/exercise/index.html b/step2-06/exercise/index.html index f6ea247..50d9fb4 100644 --- a/step2-06/exercise/index.html +++ b/step2-06/exercise/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-07/demo/index.html b/step2-07/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-07/demo/index.html +++ b/step2-07/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-07/exercise/index.html b/step2-07/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-07/exercise/index.html +++ b/step2-07/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-08/demo/index.html b/step2-08/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-08/demo/index.html +++ b/step2-08/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-08/exercise/index.html b/step2-08/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-08/exercise/index.html +++ b/step2-08/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-09/demo/index.html b/step2-09/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-09/demo/index.html +++ b/step2-09/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-09/exercise/index.html b/step2-09/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-09/exercise/index.html +++ b/step2-09/exercise/index.html @@ -6,6 +6,6 @@
    - +