From 7e95e81beb7b7a30290745451e1a1df596d6602c Mon Sep 17 00:00:00 2001 From: Matt Pham Date: Thu, 28 Feb 2019 20:16:16 -0800 Subject: [PATCH 1/7] add clarification and corrections to step 1-6 - change description of react having two-way to one-way data flow - clarified where changes were taking place in the demo --- step1-06/demo/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/step1-06/demo/README.md b/step1-06/demo/README.md index d559ab7..a724d50 100644 --- a/step1-06/demo/README.md +++ b/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 => ); + filteredTodos.map(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: +Lets 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: From b23675e69ea0aeecccc8cb550f40db9e6d06bd68 Mon Sep 17 00:00:00 2001 From: Kenneth Chau Date: Thu, 28 Feb 2019 22:02:34 -0800 Subject: [PATCH 2/7] Update step1-06/demo/README.md Co-Authored-By: mattpham --- step1-06/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-06/demo/README.md b/step1-06/demo/README.md index a724d50..dacd424 100644 --- a/step1-06/demo/README.md +++ b/step1-06/demo/README.md @@ -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. -Lets 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: +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: From e7fb20433fba06dc570dd3362f87c40d1103bbc3 Mon Sep 17 00:00:00 2001 From: Ronald Martin Date: Fri, 1 Mar 2019 08:57:02 -0800 Subject: [PATCH 3/7] Update Step 1-0 exercise to match instructions --- step1-03/demo/README.md | 3 +-- step1-03/exercise/README.md | 2 +- step1-03/exercise/index.html | 4 ---- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index d10254a..b98e467 100644 --- a/step1-03/demo/README.md +++ b/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(); } ``` diff --git a/step1-03/exercise/README.md b/step1-03/exercise/README.md index b02cdb7..3b66acd 100644 --- a/step1-03/exercise/README.md +++ b/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. diff --git a/step1-03/exercise/index.html b/step1-03/exercise/index.html index aaee51a..7daf894 100644 --- a/step1-03/exercise/index.html +++ b/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 From 55fac891d2dd9e477e6912e839a944d901e6f661 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 10:40:28 -0800 Subject: [PATCH 4/7] Update README.md --- README.md | 60 +++++++++++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index cb4f4e2..5cd3158 100644 --- a/README.md +++ b/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,55 +20,49 @@ 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: + +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 ``` +Both of these above commands will load the following site: + + + ## Course material ### Day one +Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript. + +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 'demo' folder for the given exercise. + 1. [Introduction to HTML, CSS and JavaScript](step1-01) - [HTML Demo](step1-01/html-demo) - [CSS Demo](step1-01/css-demo) From f50e86ee3611d60510e307993d3a4d35c2e220f5 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 11:23:27 -0800 Subject: [PATCH 5/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5cd3158..d4671b0 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an 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 'demo' folder for the given exercise. +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. 1. [Introduction to HTML, CSS and JavaScript](step1-01) - [HTML Demo](step1-01/html-demo) From 6a6323f6c6e9401383b3a327a24437935b972cfb Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 11:26:51 -0800 Subject: [PATCH 6/7] Update README.md --- README.md | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index d4671b0..ce0442c 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Both of these above commands will load the following site: -## Course material +## What to Expect ### Day one @@ -63,27 +63,16 @@ 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 From 39cdb584f4aca6c440ed086d0b85079a7df4a9f4 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 11:27:48 -0800 Subject: [PATCH 7/7] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ce0442c..04a50e0 100644 --- a/README.md +++ b/README.md @@ -58,12 +58,14 @@ Both of these above commands will load the following site: 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 +#### Course Material 1. [Introduction to HTML, CSS and JavaScript](step1-01) 2. [Writing a Todo App: HTML and CSS](step1-02)