Merge branch 'master' of github.com:Microsoft/frontend-bootcamp

README.md

@@ -10,7 +10,7 @@ The first day provides an introduction to the fundamentals of the web: HTML, CSS
 
 ## Getting set up
 
-### Required software
+### 1. Required software
 
 Before starting, make sure your computer has the following installed:
 
@@ -20,76 +20,61 @@ Before starting, make sure your computer has the following installed:
   - If using a Mac, also follow [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) to install the `code` terminal command.
 - React Developer Tools for [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/)
 
-### Installing and running the project
+### 2. Installing and opening the project
 
-#### 1. Find a good terminal program--we're going to use it a LOT!
+- Open VS Code and then press `ctrl + ~` to open the built in terminal
+- Use the `cd` (change directory) command to find an appropriate place for your code 
+- Type `git clone https://github.com/Microsoft/frontend-bootcamp.git` into the terminal, this will pull down a copy of the workshop code
+- Type `cd bootcamp` to change your current directory to the bootcamp folder
+- Type `npm install` to install of the project dependencies
+- Type `code ./` to open the bootcamp code in VS Code
+> If on a Mac, be sure you've followed [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) first to make the `code` command available.
 
-- On a PC, you can do this with `cmd.exe` (or some terminal programs such as [cmder](https://cmder.net/))
+### 3. Run the "inner loop" build
 
-- On a Mac, bring up a Terminal (inside `/Applications/Utilities` folder).
+Now that we have VS Code open with the bootcamp code, open the terminal again `ctrl + ~` and your project should look like this
 
-- For those who really want something fancy looking: [hyper](https://hyper.is/)
-
-#### 2. Clone repo and npm install
-
-First, `cd` to a good place to put your copy of the Git repo.
-
-- Windows: run `cd %USERPROFILE%` (if using `cmd.exe`) or `cd ~` (if using Bash)
-- Mac: Terminal automatically opens to your user directory (`/Users/you`)
-
-Then run the following to make a local copy of the repo and get it ready to run:
-
-```
-git clone https://github.com/Microsoft/frontend-bootcamp.git
-cd frontend-bootcamp
-npm install
-```
-
-If you have VS Code installed, type the following command to open a VS Code window where you can browse and open all the files in the project. (If on a Mac, be sure you've followed [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) first to make the `code` command available.)
-
-```
-code .
-```
-
-#### 3. Run the "inner loop" build
-
-For steps 1-3 on Day 1:
+<img src="https://user-images.githubusercontent.com/1434956/53654442-9c379400-3c02-11e9-8768-d19e092b606d.png" width=500 />
 
+To run the dev "inner loop" for the first 3 lessons type:
 ```
 npm run static
 ```
 
-For everything else:
+When we get to lesson 4, and React we will stop the static inner loop and start:
+1. press `ctrl + c` to stop the static inner loop
 
 ```
-npm start
+npm run start
 ```
 
-## Course material
+Both of these above commands will load the following site:
+
+<img src="https://user-images.githubusercontent.com/1434956/53656239-88426100-3c07-11e9-8456-e3d958aa4def.png" width=500 />
+
+## What to Expect
 
 ### Day one
 
+Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.
+
+#### How we'll work
+
+The format of this day is the following:
+
+1. I will walk through some demo code to teach some core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readme's listed below.
+2. In the excercise portion return to VS Code and open the 'exercise' folder for the given exercise. The demo folder will include a README file with directions and a link to the demo page.
+
+#### Course Material
+
 1. [Introduction to HTML, CSS and JavaScript](step1-01)
-   - [HTML Demo](step1-01/html-demo)
-   - [CSS Demo](step1-01/css-demo)
-   - [JavaScript Demo](step1-01/js-demo)
 2. [Writing a Todo App: HTML and CSS](step1-02)
-   - [Demo](step1-02/demo)
-   - [Exercise](step1-02/exercise)
 3. [Writing a Todo App: JavaScript](step1-03)
-   - [Demo](step1-03/demo)
-   - [Exercise](step1-03/exercise)
 4. [React Introduction](step1-04)
-   - [Demo](step1-04/demo)
 5. [Building a Static Page](step1-05)
-   - [Demo](step1-05/demo)
-   - [Exercise](step1-05/exercise)
 6. [State Driven UI](step1-06)
-   - [Demo](step1-06/demo)
-   - [Exercise](step1-06/exercise)
 7. [Types & UI Driven State](step1-07)
-   - [Demo](step1-07/demo)
-   - [Exercise](step1-07/exercise)
+
 
 ### Day two
 

step1-03/demo/README.md

@@ -74,13 +74,12 @@ function addTodo() {
 
 ### Cleanup
 
-Now that our todo has been inserted into the DOM, we can clear the text input and call `updateRemaining()`.
+Now that our todo has been inserted into the DOM, we can clear the text input. In the exercise, we'll also update the count of the remaining todos in the footer from here.
 
 ```js
 function addTodo() {
   ...
   clearInput('.textfield');
-  updateRemaining();
 }
 ```
 

step1-03/exercise/README.md

@@ -7,7 +7,7 @@ If you don't already have the app running, start it with `npm run static` from t
 1. Add an `onclick` attribute to all three buttons in the navigation.
 2. In each `onclick` call the `filter` function. In our function we need a reference to the clicked button, so pass in the keyword `this` as the only parameter.
 
-### Write an `updateRemaining` function
+### Complete the `updateRemaining` function
 
 1. Get a reference to the span with the `remaining` class, and store it in a variable.
 2. Use [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.

step1-03/exercise/index.html

@@ -47,9 +47,6 @@
     }
 
     function updateRemaining() {
-      const remaining = document.querySelector('.remaining');
-      const todos = document.querySelectorAll('.todo').length;
-      remaining.innerText = todos;
     }
 
     function addTodo() {
@@ -59,7 +56,6 @@
       todo.parentElement.insertBefore(newTodo, todo);
 
       clearInput('.textfield');
-      updateRemaining();
     }
 
     // clearCompleted

step1-06/demo/README.md

@@ -1,6 +1,6 @@
 # Creating a State-Driven UI
 
-In React, data travels two directions: top-down in the form of state propagating throughout controls, and bottom-up as interacting with the UI flows back up to modify the state. When writing an application it's often helpful to think of these two directions as separate parts of the development process.
+In React, the data travels in one direction: top-down in the form of state propagating down the component hierarchy. Only the component containing the state can change the state itself. When a UI interaction occurs, a stateful component must pass down an event handler to the UI component triggering the event in order to signal a state change.
 
 ## Demo
 
@@ -8,7 +8,7 @@ In React, data travels two directions: top-down in the form of state propagating
 
 ### Adding State to App
 
-For our minimal state, we're going to include just two keys: `todos` and `filter`. We don't need to worry about a `remaining` value because we can calculate that by looking at the number of unchecked todos.
+Inside our `TodoApp` class, we will add the minimal state for our application, which includes just two keys: `todos` and `filter`. We don't need to worry about a `remaining` value because it can be calculated by counting the number of todos where the `completed` field is set to `false`.
 
 So here is our full constructor:
 
@@ -69,12 +69,12 @@ I've already pulled out our props into `filter` and `todos` variables, and writt
 
 ```jsx
 {
-  filteredTodos.map(id => <TodoListItem key={id} id={id} {...todos[id]} />);
+  filteredTodos.map(id => <TodoListItem key={id} id={id} {...todos[id]} />)
 }
 ```
 
-- [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map): This method transforms the array it's called on into a new array (our rendered TodoListItems).
-- `key`: We use the `id` from the `filterTodos` array as the [list item key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes and the component re-renders.
+- [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map): This method iterates over the array it's called on, transforming each value with the passed in function and returning the values in a new array (our rendered TodoListItems).
+- `key`: We use the `id` from the `filterTodos` array as the [list item key](https://reactjs.org/docs/lists-and-keys.html) The keys should be unique as they help React track which items are added, removed, or updated and determine whether an instance of an item should be rerendered or a new one created.
 - `id`: The `key` is not actually passed into the component, so we pass the same value 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!
@@ -109,7 +109,7 @@ Typically, a controlled input's current value is stored in the parent component'
 
 > 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:
+Let's try changing the text field in our `TodoHeader` component to a controlled input. To add a controlled input, we need two things, which our demo already provides:
 
 1. A state variable to hold the input's value: