More day 1 updates

step1-06/demo/README.md

@@ -99,11 +99,17 @@ In CSS-based styling, visual states are applied by adding and removing classes.
 
 #### Adding a Controlled Input
 
-In traditional HTML forms, users interact with the form, and on submit, those values are captured and transmitted. Those are called **uncontrolled inputs**.
+In React, form elements such as `<input>`, `<textarea>`, and `<select>` can be used as either **uncontrolled** or **controlled**. (This paradigm also applies to UI Fabric's customized implementations of form components, which we'll use later.)
 
-A **controlled input** is one whose value is defined by state, and interaction with that input updates state with each keystroke. This round trip process might sound inefficient, but in reality it has little to no impact, and it makes forms much easier to work with.
+An **uncontrolled input** maintains its current value internally and updates it based on user interactions (entering text, choosing options, etc). The code only pulls the value from the input when it's needed, such as on submit. This is similar to how inputs in a plain HTML form work.
 
-To create a controlled component, we need two things, which our demo already provides:
+A **controlled input** takes its current value from a prop and use a callback to notify the parent component of changes made by the user. The input's value doesn't change until the parent component updates the input's props in response to the callback.
+
+Typically, a controlled input's current value is stored in the parent component's state (then passed to the input as a prop during render). The parent updates its state in response to the callback, which causes the input to be re-rendered with a new prop value. This round trip process might sound inefficient, but in reality it has little to no impact and helps enable some advanced form functionality.
+
+> The distinction between controlled and uncontrolled is important to understand when writing or using form components, and misunderstandings of this concept are a very common source of bugs. See [this article](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) for a more detailed explanation.
+
+To add a controlled input, we need two things, which our demo already provides:
 
 1. A state variable to hold the input's value:
 

step1-06/exercise/README.md

@@ -2,11 +2,11 @@
 
 ### TodoFooter
 
-1. Use the provided `itemCount` value drive the number of items left.
-2. Use a ternary operator to print `item` vs `items` based on if `itemCount === 1`
+1. Use the provided `itemCount` value to display the current number of items left.
+2. Use a ternary operator to print "item" vs "item**s**" based on whether `itemCount === 1`.
 
 ### TodoListItem
 
 1. Pull in `label` and `completed` from props using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
 2. Set the todo's text to `label` and the `checked` prop to `completed`
-   > Note that this is only half the work we need to do to make these controlled inputs. What is the other half?
+   > Note that this is only half the work we need to do to make these controlled inputs work. What is the other half?

step1-06/final/src/components/TodoListItem.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 export class TodoListItem extends React.Component<any, any> {
   render() {
     const { label, completed } = this.props;
+    // The "no-op" onChange handler prevents a console warning from React at runtime
     return (
       <li className="todo">
         <label>
-          <input type="checkbox" checked={completed} /> {label}
+          <input type="checkbox" checked={completed} onChange={() => undefined} /> {label}
         </label>
       </li>
     );