From 2cdefd6f584fe8ad4bc97798c5ff968dc705b6b4 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 16:54:28 -0800 Subject: [PATCH 01/32] adding tracking for day 2 tracking goodness --- assets/track.js | 8 ++++++++ index.html | 11 +---------- step2-01/demo/index.html | 1 + step2-01/exercise/index.html | 1 + step2-02/demo/index.html | 1 + step2-02/exercise/index.html | 1 + step2-03/demo/index.html | 1 + step2-03/exercise/index.html | 1 + step2-04/demo/index.html | 1 + step2-04/exercise/index.html | 1 + step2-05/demo/index.html | 1 + step2-05/exercise/index.html | 1 + step2-06/demo/index.html | 1 + step2-06/exercise/index.html | 1 + step2-07/demo/index.html | 1 + step2-07/exercise/index.html | 1 + step2-08/demo/index.html | 1 + step2-08/exercise/index.html | 1 + step2-09/demo/index.html | 1 + step2-09/exercise/index.html | 1 + 20 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 assets/track.js diff --git a/assets/track.js b/assets/track.js new file mode 100644 index 0000000..f94f793 --- /dev/null +++ b/assets/track.js @@ -0,0 +1,8 @@ +// prettier-ignore +var appInsights=window.appInsights||function(a){ + function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c +}({ + instrumentationKey: "6ad37ae0-c4ab-4739-925c-1e2773c31f17" +}); +// prettier-ignore +window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView(); diff --git a/index.html b/index.html index 534e454..11baad6 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,6 @@ -
@@ -174,5 +164,6 @@
  • Playground
    • + diff --git a/step2-01/demo/index.html b/step2-01/demo/index.html index bec0a0d..51959a8 100644 --- a/step2-01/demo/index.html +++ b/step2-01/demo/index.html @@ -8,5 +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 bec0a0d..51959a8 100644 --- a/step2-01/exercise/index.html +++ b/step2-01/exercise/index.html @@ -8,5 +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 6025e9f..3bde031 100644 --- a/step2-02/demo/index.html +++ b/step2-02/demo/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-02/exercise/index.html b/step2-02/exercise/index.html index 6025e9f..3bde031 100644 --- a/step2-02/exercise/index.html +++ b/step2-02/exercise/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-03/demo/index.html b/step2-03/demo/index.html index 6025e9f..3bde031 100644 --- a/step2-03/demo/index.html +++ b/step2-03/demo/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-03/exercise/index.html b/step2-03/exercise/index.html index 6025e9f..3bde031 100644 --- a/step2-03/exercise/index.html +++ b/step2-03/exercise/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-04/demo/index.html b/step2-04/demo/index.html index 7990ebe..f6ea247 100644 --- a/step2-04/demo/index.html +++ b/step2-04/demo/index.html @@ -10,5 +10,6 @@ 
    npm test
    in the command line. + diff --git a/step2-04/exercise/index.html b/step2-04/exercise/index.html index 7990ebe..f6ea247 100644 --- a/step2-04/exercise/index.html +++ b/step2-04/exercise/index.html @@ -10,5 +10,6 @@ 
    npm test
    in the command line. + diff --git a/step2-05/demo/index.html b/step2-05/demo/index.html index 7990ebe..f6ea247 100644 --- a/step2-05/demo/index.html +++ b/step2-05/demo/index.html @@ -10,5 +10,6 @@ 
    npm test
    in the command line. + diff --git a/step2-05/exercise/index.html b/step2-05/exercise/index.html index 7990ebe..f6ea247 100644 --- a/step2-05/exercise/index.html +++ b/step2-05/exercise/index.html @@ -10,5 +10,6 @@ 
    npm test
    in the command line. + diff --git a/step2-06/demo/index.html b/step2-06/demo/index.html index 7990ebe..f6ea247 100644 --- a/step2-06/demo/index.html +++ b/step2-06/demo/index.html @@ -10,5 +10,6 @@ 
    npm test
    in the command line. + diff --git a/step2-06/exercise/index.html b/step2-06/exercise/index.html index 7990ebe..f6ea247 100644 --- a/step2-06/exercise/index.html +++ b/step2-06/exercise/index.html @@ -10,5 +10,6 @@ 
    npm test
    in the command line. + diff --git a/step2-07/demo/index.html b/step2-07/demo/index.html index 6025e9f..3bde031 100644 --- a/step2-07/demo/index.html +++ b/step2-07/demo/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-07/exercise/index.html b/step2-07/exercise/index.html index 6025e9f..3bde031 100644 --- a/step2-07/exercise/index.html +++ b/step2-07/exercise/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-08/demo/index.html b/step2-08/demo/index.html index 6025e9f..3bde031 100644 --- a/step2-08/demo/index.html +++ b/step2-08/demo/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-08/exercise/index.html b/step2-08/exercise/index.html index 6025e9f..3bde031 100644 --- a/step2-08/exercise/index.html +++ b/step2-08/exercise/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-09/demo/index.html b/step2-09/demo/index.html index 6025e9f..3bde031 100644 --- a/step2-09/demo/index.html +++ b/step2-09/demo/index.html @@ -6,5 +6,6 @@
    + diff --git a/step2-09/exercise/index.html b/step2-09/exercise/index.html index 6025e9f..3bde031 100644 --- a/step2-09/exercise/index.html +++ b/step2-09/exercise/index.html @@ -6,5 +6,6 @@
    + From 61d9cb35e6dd4e9e9ef7de62853f1c6b22522ada Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 17:05:00 -0800 Subject: [PATCH 02/32] adding ghpage deploy --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index dba2296..23d57c7 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build": "rimraf docs && webpack --progress --mode production", "start:server": "nodemon -w server server/index.js", "start": "run-p start:server start:client", - "static": "live-server --host=localhost" + "static": "live-server --host=localhost", + "deploy-ghpages": "git push origin :gh-pages && git subtree push --prefix docs origin gh-pages" }, "keywords": [], "author": "", From 3997173f45145d9fa050eaf710e339105d3c8d78 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 17:23:53 -0800 Subject: [PATCH 03/32] adding pipelines config for publishing docs --- azure-pipelines.yml | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 azure-pipelines.yml diff --git a/azure-pipelines.yml b/azure-pipelines.yml new file mode 100644 index 0000000..ed29a15 --- /dev/null +++ b/azure-pipelines.yml @@ -0,0 +1,26 @@ +# Node.js +# Build a general Node.js project with npm. +# Add steps that analyze code, save build artifacts, deploy, and more: +# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript + +trigger: + - master + +pool: + vmImage: 'Ubuntu-16.04' + +steps: + - task: NodeTool@0 + inputs: + versionSpec: '10.x' + displayName: 'Install Node.js' + + - script: | + git remote set-url origin https://kenotron:$(git.pat)@github.com/Microsoft/frontend-bootcamp.git + npm install + git checkout -b build_$(Build.BuildId) + npm run build + git add docs/ + git commit -m "adding docs" + git push origin `git subtree split --prefix docs master`:gh-pages --force + displayName: 'npm install, build and push docs to gh-pages' From e0430a413cc278b9401271ed0373fb5985ce637e Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 17:57:32 -0800 Subject: [PATCH 04/32] added a config for git --- azure-pipelines.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index ed29a15..7393258 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -16,6 +16,8 @@ steps: displayName: 'Install Node.js' - script: | + git config user.email "kchau@microsoft.com" + git config user.name "Ken Chau" git remote set-url origin https://kenotron:$(git.pat)@github.com/Microsoft/frontend-bootcamp.git npm install git checkout -b build_$(Build.BuildId) From 743f332c5ccd9f84a0d7990f3f6190376336a424 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 18:05:49 -0800 Subject: [PATCH 05/32] get on master branch to do this work --- azure-pipelines.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 7393258..47bf220 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -19,6 +19,7 @@ steps: git config user.email "kchau@microsoft.com" git config user.name "Ken Chau" git remote set-url origin https://kenotron:$(git.pat)@github.com/Microsoft/frontend-bootcamp.git + git checkout master npm install git checkout -b build_$(Build.BuildId) npm run build From 8b3efdcd7783c791268b8c8ddc4767165fa65704 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 20:47:14 -0800 Subject: [PATCH 06/32] backtick escaping --- azure-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 47bf220..3df5785 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -25,5 +25,5 @@ steps: npm run build git add docs/ git commit -m "adding docs" - git push origin `git subtree split --prefix docs master`:gh-pages --force + "git push origin `git subtree split --prefix docs master`:gh-pages --force" displayName: 'npm install, build and push docs to gh-pages' From 73f5cb8b1954702e6f4084597e9cc5bba0cd2c66 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 20:52:53 -0800 Subject: [PATCH 07/32] get rid of quote again --- azure-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 3df5785..47bf220 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -25,5 +25,5 @@ steps: npm run build git add docs/ git commit -m "adding docs" - "git push origin `git subtree split --prefix docs master`:gh-pages --force" + git push origin `git subtree split --prefix docs master`:gh-pages --force displayName: 'npm install, build and push docs to gh-pages' From e9dbc32fc58a908ff6d563083f65a0c31ee5fe25 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 20:55:51 -0800 Subject: [PATCH 08/32] gh-pages refs --- azure-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 47bf220..ce90c4b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -25,5 +25,5 @@ steps: npm run build git add docs/ git commit -m "adding docs" - git push origin `git subtree split --prefix docs master`:gh-pages --force + git push origin `git subtree split --prefix docs master`:refs/heads/gh-pages --force displayName: 'npm install, build and push docs to gh-pages' From 27747bfa9c9cfda416fc0fad1ba18d413fff4634 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 21:01:54 -0800 Subject: [PATCH 09/32] have it pull the latest --- azure-pipelines.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index ce90c4b..e507045 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -20,6 +20,7 @@ steps: git config user.name "Ken Chau" git remote set-url origin https://kenotron:$(git.pat)@github.com/Microsoft/frontend-bootcamp.git git checkout master + git pull npm install git checkout -b build_$(Build.BuildId) npm run build From 6ee37188f6a02846f960519b76e380a2d336a786 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 21:24:47 -0800 Subject: [PATCH 10/32] making a temp branch to do updates on the docs push --- azure-pipelines.yml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index e507045..c9d64d4 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -24,7 +24,8 @@ steps: npm install git checkout -b build_$(Build.BuildId) npm run build - git add docs/ + git add . git commit -m "adding docs" - git push origin `git subtree split --prefix docs master`:refs/heads/gh-pages --force + git subtree split --prefix docs -b temp_$(Build.BuildId) + git push origin temp_$(Build.BuildId):refs/heads/gh-pages --force displayName: 'npm install, build and push docs to gh-pages' From 0755ef17869edbac24690e01a2a05f088210e19d Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 21:47:15 -0800 Subject: [PATCH 11/32] okay we're not doing pr builds right now --- azure-pipelines.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index c9d64d4..d7a7af6 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -3,6 +3,8 @@ # Add steps that analyze code, save build artifacts, deploy, and more: # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript +pr: none + trigger: - master From 5044bd5f9d80570fb7aa984c2cfa2ab3d69c924e Mon Sep 17 00:00:00 2001 From: Rodger Jordas Date: Tue, 26 Feb 2019 13:49:38 +0800 Subject: [PATCH 12/32] Fix typos --- README.md | 4 ++-- index.html | 2 +- step1-01/js-demo/README.md | 6 +++--- step1-02/demo/README.md | 4 ++-- step1-03/demo/README.md | 8 ++++---- step1-04/demo/README.md | 8 ++++---- step1-06/demo/README.md | 12 ++++++------ step1-07/demo/README.md | 18 +++++++++--------- step2-01/README.md | 12 ++++++------ step2-01/demo/src/index.tsx | 2 +- step2-04/README.md | 4 ++-- 11 files changed, 40 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 0839ddf..1ef7156 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This repo is the content for a two day workshop focused on introducing you to th ## Who is this workshop for -This workshop starts as a very high level introduction to the core principles of the web: HTML, CSS and JavaScript. This section is targeted at new and experienced developers alike. The second day dives into more complex topics such as Typescript and state management within an application. The examples should be accessible to anyone, but you will get more out of the day if you have some foundational experience in programing or web technologies. +This workshop starts as a very high level introduction to the core principles of the web: HTML, CSS and JavaScript. This section is targeted at new and experienced developers alike. The second day dives into more complex topics such as TypeScript and state management within an application. The examples should be accessible to anyone, but you will get more out of the day if you have some foundational experience in programing or web technologies. ## Web Workshop Setup @@ -62,7 +62,7 @@ This workshop starts as a very high level introduction to the core principles of Demo and Exercises are combined -1. [Introduction to Typescript](step2-01) +1. [Introduction to TypeScript](step2-01) 2. [UI Fabric Component Library](step2-02) 3. [Theming and Styling](step2-03) 4. [Testing with Jest](step2-04) diff --git a/index.html b/index.html index 11baad6..0986473 100644 --- a/index.html +++ b/index.html @@ -83,7 +83,7 @@
  • - Typescript Basics + TypeScript Basics
    demo | exercise
    diff --git a/step1-01/js-demo/README.md b/step1-01/js-demo/README.md index 1395eac..cf36a30 100644 --- a/step1-01/js-demo/README.md +++ b/step1-01/js-demo/README.md @@ -29,7 +29,7 @@ We can create a new variable with the keywords `var, let, const` and use them wi 4. array 5. object -> Javascript is a loosly typed language so if start a variable off as a number `let myVar = 0`, you can change it to a string by simply writing `myVar = 'hello'` without any trouble. +> JavaScript is a loosely typed language so if start a variable off as a number `let myVar = 0`, you can change it to a string by simply writing `myVar = 'hello'` without any trouble. Lets start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) @@ -40,7 +40,7 @@ let matches = 0; ### Functions -Functions are resuable pieces of functionality. Functions can take inputs (parameters), and return values. Functions can be called from within your program, from within other functions, or invoked from within the DOM itself. +Functions are reusable pieces of functionality. Functions can take inputs (parameters), and return values. Functions can be called from within your program, from within other functions, or invoked from within the DOM itself. In our example we'll create a function called displayMatches (camelCase is typical for functions) and we'll invoke this function anytime that our submit button is clicked. For now we'll simply call a console log (a function that prints values to the browser console); @@ -89,7 +89,7 @@ function displayMatches() { Now that we have a function performing all of our logic, it's time to connect this to our DOM by using some of the browsers built in functions. -First we need to get a reference to the email field in our app. To do this, I've added an `id` to the input, and we will call one of JavaScripts oldest methods (IE 5.5), getElementyId, which we find on the browser provided `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable. +First we need to get a reference to the email field in our app. To do this, I've added an `id` to the input, and we will call one of JavaScripts oldest methods (IE 5.5), getElementById, which we find on the browser provided `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable. ```js const email = document.getElementById('email'); diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index 83a099b..e3f5123 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -18,7 +18,7 @@ In this exercise we will scaffold out some HTML for out Todo app, and add some b 1. The DOCTYPE tells the browser that this file is written in modern HTML. 2. The HTML tag wraps the entire page, and is the page root. Nothing is placed outside of those tags. Attributes can be set on HTML -3. Head will contain all of the page's meta data, in this case a link to our css file +3. Head will contain all of the page's meta data, in this case a link to our CSS file 4. Body is where all of the visible content should be placed. ### Content Sectioning @@ -73,7 +73,7 @@ Now that we've got the top of our application scaffolded, we can add some our st It looks like the selected button isn't getting any special styles. Let's dig in and see why that is. -Open up the browser inspector and target our 'all' button. You'll notice that the blue style is present on the list, but it is being overriden by the `border: none` above it. This is a situation where specificity is winning out over the cascade. +Open up the browser inspector and target our 'all' button. You'll notice that the blue style is present on the list, but it is being overridden by the `border: none` above it. This is a situation where specificity is winning out over the cascade. > **Cascade** states that if two selectors are equal, the lowest one on the page wins diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index a9a15cf..3fd1c61 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -1,6 +1,6 @@ -# Javascript Demo +# JavaScript Demo -Now that we a UI that looks like a todo app, we need to add functionality to make it **function** like a todo app. In this example we are going to use raw Javascript explicitly modify our application as we interact with it. This will be in stark contrast to the implicit approach we will take when we do this with React in the next exercise. +Now that we a UI that looks like a todo app, we need to add functionality to make it **function** like a todo app. In this example we are going to use raw JavaScript explicitly modify our application as we interact with it. This will be in stark contrast to the implicit approach we will take when we do this with React in the next exercise. > Keep an eye on how often user actions directly modify the HTML on the page. You'll see this number drop to zero when we start using React. @@ -8,13 +8,13 @@ Now that we a UI that looks like a todo app, we need to add functionality to mak This demo starts off with a few elements already in place. Let's walk through what's already here. -- **clearInput()** - This is a generic, reusable function that takes in a `selector` paramater, finds the first matching element, and sets the element's value to an empty string. This direct modification is called a side effect. +- **clearInput()** - This is a generic, reusable function that takes in a `selector` parameter, finds the first matching element, and sets the element's value to an empty string. This direct modification is called a side effect. - **getTodoText()** - This is a quick helper function that returns the value inside of our textfield. Notice how some functions return values and how you can set that return to a variable. - **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down. 1. `todo` is set to equal the first todo item 2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4 3. We set the innerText of the `` to the value returned from getTodoText - > Note that if we left off the `()` we'd actully be assiging innerText to the 'function' instead of the function return + > Note that if we left off the `()` we'd actually be assigning innerText to the 'function' instead of the function return 4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) - **filter()** - This function takes in a `filterName` string, and a `button` which is a reference to the clicked button. 1. Remove any `selected` class names diff --git a/step1-04/demo/README.md b/step1-04/demo/README.md index 3876cef..8c0f2fa 100644 --- a/step1-04/demo/README.md +++ b/step1-04/demo/README.md @@ -26,10 +26,10 @@ export class App extends React.Component { } ``` -- **import React from 'react';** - This is how we [import modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) in Javascript. This line creates a variable in this file called `React` that is equal to the default `export` of the `react` npm module. +- **import React from 'react';** - This is how we [import modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) in JavaScript. This line creates a variable in this file called `React` that is equal to the default `export` of the `react` npm module. - **export class App** - Just like react exports code, our App component is nothing more than an exported "App" class. This allows us to import the class into other files - **extends React.Component** - A JavaScript class is similar to other programming languages (it's a collection of methods and properties). Classes can also be extended, so when we create a React component class, we always extend the base React.Component class. Note that this `Component` class is coming from the `React` variable imported up top. - > Note that `` is necessary for Typescript which we will touch on later + > Note that `` is necessary for TypeScript which we will touch on later - **render()** - One of the methods defined by React.Component is the `render()` method. This is a function that defines the HTML the component is going to render. - **return** - Remember that functions can return values in addition to side effects, and this component is no different. - **Inside of the return?** It's HTML! Actually, it's JSX, but with very few exceptions you can treat it like HTML. A few key differences: @@ -63,7 +63,7 @@ React solves this by allowing each control to specify its own data store, called #### Adding State -JavaScipt uses a `constructor` method to instantiate each copy of a class. So for class based controls, this is where we specify state. +JavaScript uses a `constructor` method to instantiate each copy of a class. So for class based controls, this is where we specify state. ```js constructor(props) { @@ -138,7 +138,7 @@ return ( ); ``` -> Note the capitalization of Counter. HTML might not be case sensative, but JSX is! A common practice is to use the capitalized versions of HTML elements to name their JSX counterpart. Button, Select, Label, Form etc. +> Note the capitalization of Counter. HTML might not be case sensitive, but JSX is! A common practice is to use the capitalized versions of HTML elements to name their JSX counterpart. Button, Select, Label, Form etc. ### Exploring Component Props diff --git a/step1-06/demo/README.md b/step1-06/demo/README.md index 35efc45..1722863 100644 --- a/step1-06/demo/README.md +++ b/step1-06/demo/README.md @@ -1,10 +1,10 @@ # Creating a State Driven UI -In React data travels two directions, top down in the form of state propegating 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 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. ## demo -[Step #3 of Thinking in React](https://reactjs.org/docs/thinking-in-react.html) suggests finding the "minimal set of mutable state" that your application requires. So in this demo we are going to add that "minimal state" to our application and drive our UI off of that data. With that done the next step will be to create ways to modify that state, which will in turn cascade down through our UI. This [reconcilation](https://reactjs.org/docs/reconciliation.html) process, figuring out what in your UI needs to change based on changing state, is what React excels in. +[Step #3 of Thinking in React](https://reactjs.org/docs/thinking-in-react.html) suggests finding the "minimal set of mutable state" that your application requires. So in this demo we are going to add that "minimal state" to our application and drive our UI off of that data. With that done the next step will be to create ways to modify that state, which will in turn cascade down through our UI. This [reconciliation](https://reactjs.org/docs/reconciliation.html) process, figuring out what in your UI needs to change based on changing state, is what React excels in. ### Adding State to App @@ -75,11 +75,11 @@ I've already pulled out our props into `filter` and `todos` variables, and writt - 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. - > This spread opperator is the same as saying `label={todos[id].label} completed={todos[id].completed}`. Pretty obvious why spread is so handy! + > 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 -Within the header we've got a situation where we not only want to pass `filter` state down to it, but we also want to maintain state within the control. Fortunatly, this is no problem at all for React. First off let's deal with the incoming state. +Within the header we've got a situation where we not only want to pass `filter` state down to it, but we also want to maintain state within the control. Fortunately, this is no problem at all for React. First off let's deal with the incoming state. #### Conditional ClassNames @@ -93,9 +93,9 @@ In CSS based styling, visual states are applied by adding and removing classes. ``` -> Terniary operators are very popular in React code as each expression could be a string for a className, or even a JSX element. +> Ternary operators are very popular in React code as each expression could be a string for a className, or even a JSX element. -#### Creating a Controled Input +#### Creating a Controlled Input In tradition HTML forms users interact with the form, and on submit, those values are captured and transmitted. Those are called **uncontrolled inputs**. A **controlled input** is one whos 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 enables some advanced form functionality. diff --git a/step1-07/demo/README.md b/step1-07/demo/README.md index ce9981f..03b1c3b 100644 --- a/step1-07/demo/README.md +++ b/step1-07/demo/README.md @@ -6,21 +6,21 @@ Now that we have a UI that is purely driven by the state of our app, we need to This is our core 'business logic' and handles everything our basic 'CRUD' operations of "Create, Read, Update, Delete". We don't have time to walk through writing all of those functions, but you can see that they are already provided in the demo's `TodoApp` and passed into our components. -## Intro to Typescript +## Intro to TypeScript Taking a look at our components in `TodoApp` you can see that our list of props is not just getting longer, but is getting much more complex! We're passing through functions with various signatures, complex `todos` objects as well as filter strings which are always one of three values. -As applications grow, it becomes increasing difficult to remember what each function does, or what each todo contains. Also, as JavaScript is a loosly type language, if I wanted to change the value of `todos` to an array inside my `TodoList`, javascript wouldn't care. But if `TodoListItems` was expecting an object, our application would break. +As applications grow, it becomes increasing difficult to remember what each function does, or what each todo contains. Also, as JavaScript is a loosely type language, if I wanted to change the value of `todos` to an array inside my `TodoList`, JavaScript wouldn't care. But if `TodoListItems` was expecting an object, our application would break. -It is because of these two reasons that the entire industry is shifting to writing applications that are strongly typed, and are using Typescript to accomplish that. +It is because of these two reasons that the entire industry is shifting to writing applications that are strongly typed, and are using TypeScript to accomplish that. As [their website](https://www.typescriptlang.org/) state: -> Typescript is a superset of JavaScript that compiles to plain JavaScript +> TypeScript is a superset of JavaScript that compiles to plain JavaScript -If you've ever used [Sass](https://sass-lang.com/) you are familiar with this concept. In the same say that all valid CSS is valid Sass, all valid JavaScript is valid Typescript. That's why most of this project has been writting in `ts` and `tsx` files instead of `js` and `jsx` files. +If you've ever used [Sass](https://sass-lang.com/) you are familiar with this concept. In the same say that all valid CSS is valid Sass, all valid JavaScript is valid TypeScript. That's why most of this project has been writing in `ts` and `tsx` files instead of `js` and `jsx` files. -Let's dive into the demo and see how Typescript can help us better understand our component props, and guard against future regressions. +Let's dive into the demo and see how TypeScript can help us better understand our component props, and guard against future regressions. ## Demo @@ -80,7 +80,7 @@ Now try going back to `TodoApp` and changing the `filter` attribute in `TodoList #### Complete Type -The `complete` props isn't data, but rather a function. Fortunatly, Typescript can handle function types just as well as data. +The `complete` props isn't data, but rather a function. Fortunately, TypeScript can handle function types just as well as data. ```tsx interface TodoListProps { @@ -115,7 +115,7 @@ Now that our interface is complete, try changing the word 'all' in `filter === a ### Abstracting types -Most of our components are going to need to add types for `todos` and `filter`, so it's a good thing that Typescript allows us to abstract those. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and pull them into our interface. +Most of our components are going to need to add types for `todos` and `filter`, so it's a good thing that TypeScript allows us to abstract those. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and pull them into our interface. ```tsx import { FilterTypes, Todos } from '../TodoApp.types'; @@ -129,7 +129,7 @@ interface TodoListProps { ### Updating TodoApp -Our `TodoApp` doesn't take any props, but it does have state. We can use Typescript to define that as well. +Our `TodoApp` doesn't take any props, but it does have state. We can use TypeSscript to define that as well. I've already imported `Todos`, and `FilterTypes` into the `TodoApp`, so we just need to add them to our class. We can even skip the 'interface', if we want to, and add them directly to the class. diff --git a/step2-01/README.md b/step2-01/README.md index 646d714..9a31c1c 100644 --- a/step2-01/README.md +++ b/step2-01/README.md @@ -1,8 +1,8 @@ -# Step 2.1: Introduction to Typescript +# Step 2.1: Introduction to TypeScript [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -In this step, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks. +In this step, we'll cover enough of the TypeScript concepts to be productive with the React & Redux frameworks. Topics in this step will include: @@ -22,13 +22,13 @@ The most important ones to know about are: - commonjs - Node.js's standard to support modules - synchronous - require() function, can be dynamically called in the course of a program -- ESM (Ecmascript module) - language level support +- ESM (ECMAScript module) - language level support - statically analyzable and synchronous - dynamic and asynchronous support via `import()` that returns a promise -## Typescript Types +## TypeScript Types -Refer to the `demo/src` for some examples of some of the types avaible in TS that benefits a React developer. +Refer to the `demo/src` for some examples of some of the types available in TS that benefits a React developer. ## Spread Syntax @@ -162,7 +162,7 @@ Create inside `index.ts`: Inside `stack.ts`, create a generic class for a `Stack` complete with a typed `pop()` and `push()` methods -> Hint: the Javascript array already has `push()` and `pop()` implemented for you. That can be your backing store. +> Hint: the JavaScript array already has `push()` and `pop()` implemented for you. That can be your backing store. Be sure to use the provided `log()` to show the functionality of `Stack` diff --git a/step2-01/demo/src/index.tsx b/step2-01/demo/src/index.tsx index 41d949e..c363f8c 100644 --- a/step2-01/demo/src/index.tsx +++ b/step2-01/demo/src/index.tsx @@ -1,4 +1,4 @@ -// Interesting Typescript Topics +// Interesting TypeScript Topics // types import './types'; diff --git a/step2-04/README.md b/step2-04/README.md index 8666ffd..57251e7 100644 --- a/step2-04/README.md +++ b/step2-04/README.md @@ -2,7 +2,7 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -Testing Typescript code with jest. jest is a test framework made by Facebook and is very popular in the React and the wider JS ecosystem. We will work on implementing simple unit tests here in this exercise. +Testing TypeScript code with jest. jest is a test framework made by Facebook and is very popular in the React and the wider JS ecosystem. We will work on implementing simple unit tests here in this exercise. https://jestjs.io/ @@ -43,7 +43,7 @@ describe('Foo Component Tests', () => { }); ``` -`mount` does a full mount of the component. You can use the `enzyme` wrapper to simulate clicks, etc: +`mount` does a full mount of the component. You can use the `enzyme` wrapper to simulate clicks, etc.: ```ts wrapper.find('button').simulate('click'); From f9bf0c4c3bec5c79822bad54e0ea0b21d1158e2f Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 21:51:14 -0800 Subject: [PATCH 13/32] make a new pr pipeline build --- azure-pipelines.pr.yml | 20 ++++++++++++++++++++ azure-pipelines.yml | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 azure-pipelines.pr.yml diff --git a/azure-pipelines.pr.yml b/azure-pipelines.pr.yml new file mode 100644 index 0000000..625c73e --- /dev/null +++ b/azure-pipelines.pr.yml @@ -0,0 +1,20 @@ +# Node.js +# Build a general Node.js project with npm. +# Add steps that analyze code, save build artifacts, deploy, and more: +# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript + +trigger: none + +pool: + vmImage: 'Ubuntu-16.04' + +steps: + - task: NodeTool@0 + inputs: + versionSpec: '10.x'wan + displayName: 'Install Node.js' + + - script: | + npm install + npm run build + displayName: 'npm install, build' diff --git a/azure-pipelines.yml b/azure-pipelines.yml index d7a7af6..15afd44 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -14,7 +14,7 @@ pool: steps: - task: NodeTool@0 inputs: - versionSpec: '10.x' + versionSpec: '10.x'wan displayName: 'Install Node.js' - script: | From d4a60e1f0f6ce6162206edc446ac9cf7f47b6fd1 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 21:51:33 -0800 Subject: [PATCH 14/32] revert --- azure-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 15afd44..d7a7af6 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -14,7 +14,7 @@ pool: steps: - task: NodeTool@0 inputs: - versionSpec: '10.x'wan + versionSpec: '10.x' displayName: 'Install Node.js' - script: | From f07f4e21080c16935b70cff7545454dcbe94fb37 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 25 Feb 2019 21:54:48 -0800 Subject: [PATCH 15/32] getting rid of some typo --- azure-pipelines.pr.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/azure-pipelines.pr.yml b/azure-pipelines.pr.yml index 625c73e..a66cc30 100644 --- a/azure-pipelines.pr.yml +++ b/azure-pipelines.pr.yml @@ -11,7 +11,7 @@ pool: steps: - task: NodeTool@0 inputs: - versionSpec: '10.x'wan + versionSpec: '10.x' displayName: 'Install Node.js' - script: | From 0907fb7e75778f72f246339b0ead97e8090d7a5a Mon Sep 17 00:00:00 2001 From: Rodger Jordas Date: Tue, 26 Feb 2019 13:54:57 +0800 Subject: [PATCH 16/32] Fix typo --- step1-07/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-07/demo/README.md b/step1-07/demo/README.md index 03b1c3b..0222dd5 100644 --- a/step1-07/demo/README.md +++ b/step1-07/demo/README.md @@ -129,7 +129,7 @@ interface TodoListProps { ### Updating TodoApp -Our `TodoApp` doesn't take any props, but it does have state. We can use TypeSscript to define that as well. +Our `TodoApp` doesn't take any props, but it does have state. We can use TypeScript to define that as well. I've already imported `Todos`, and `FilterTypes` into the `TodoApp`, so we just need to add them to our class. We can even skip the 'interface', if we want to, and add them directly to the class. From a38cf967e928ad02c047faae2a5b995023856895 Mon Sep 17 00:00:00 2001 From: Steven Lay Date: Mon, 25 Feb 2019 23:10:45 -0800 Subject: [PATCH 17/32] Update README.md --- step1-01/html-demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-01/html-demo/README.md b/step1-01/html-demo/README.md index 5d02cfd..3021dd9 100644 --- a/step1-01/html-demo/README.md +++ b/step1-01/html-demo/README.md @@ -1,6 +1,6 @@ ## HTML Demo -The [HTML demo page](http://localhost:8080/step1-00/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). +The [HTML demo page](http://localhost:8080/step1-01/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). To learn more about each element, click on the elements below. From 04526328fe2319d6b97f150dc74c3698b04c4a6d Mon Sep 17 00:00:00 2001 From: elrimando Date: Tue, 26 Feb 2019 22:32:40 +0800 Subject: [PATCH 18/32] Add title to index page --- index.html | 323 ++++++++++++++++++++++++++++------------------------- 1 file changed, 171 insertions(+), 152 deletions(-) diff --git a/index.html b/index.html index 0986473..8a37e0d 100644 --- a/index.html +++ b/index.html @@ -1,169 +1,188 @@ - - - - - - -
    -

    Frontend Bootcamp View on GitHub

    -
    -
    - +
    +
    +
      +
    • +

      Playground

      + Build your app here! +
      • +
    • Playground
      • +
    +
    + + + + \ No newline at end of file From 244ed37702b309f73c206793cf8cccce19f0552d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ragnar=20K=C3=A1rason=20Colon?= Date: Tue, 26 Feb 2019 16:18:27 +0000 Subject: [PATCH 19/32] Fixing typos, the one with the title select is a suggestion as it might be unclear. --- step1-02/demo/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index e3f5123..5bbc685 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -4,7 +4,7 @@ Every website, application, form or component starts with markup. The HTML will ## Demo -In this exercise we will scaffold out some HTML for out Todo app, and add some basic styling to it. +In this exercise we will scaffold out some HTML for our Todo app, then add some basic styling to it. ### Page scaffold @@ -41,7 +41,7 @@ As we saw in the previous demo, HTML elements can be used to describe different ### Updating the header -The header of our page is where most of the action is going to happen. First, lets give our page a title, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. +The header of our page is where most of the action is going to happen. First, lets give our page a title (Not the HTML tag), adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. ```html @@ -61,7 +61,7 @@ The navigation for this application is quite simple. We want users to be able to ### Adding styles -Now that we've got the top of our application scaffolded, we can add some our styles in the head. +Now that we've got the top of our application scaffolded, we can add some of our styles in the head. ```html From 71acfdabbd4b16833beca16772c197d6a9eb0500 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 26 Feb 2019 08:51:58 -0800 Subject: [PATCH 20/32] adding a info to get in touch / follow authors --- README.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1ef7156..fe3e06d 100644 --- a/README.md +++ b/README.md @@ -25,11 +25,11 @@ This workshop starts as a very high level introduction to the core principles of $ git clone https://github.com/Microsoft/frontend-bootcamp.git $ cd frontend-bootcamp $ npm install - + // For Day 1, Steps 1-3 - $ npm run static + $ npm run static // For the rest of the steps - $ npm start + $ npm start ``` ## Table Of Contents @@ -78,6 +78,13 @@ Demo and Exercises are combined - [React Docs](https://reactjs.org/docs/getting-started.html) - [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) +### Follow the Authors! + +If you are interested in JavaScript, TypeScript, React, Redux, Design Systems, follow us on Twitter: + +@kenneth_chau +@micahgodbolt + # Contributing This project welcomes contributions and suggestions. Most contributions require you to agree to a From 3a197e879a69acc595a0f2e1bedffc70df36af8c Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 08:57:32 -0800 Subject: [PATCH 21/32] fixed step 3 bug --- step1-02/demo/index.html | 14 -------------- step1-03/final/index.html | 3 ++- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/step1-02/demo/index.html b/step1-02/demo/index.html index 7d13230..e69de29 100644 --- a/step1-02/demo/index.html +++ b/step1-02/demo/index.html @@ -1,14 +0,0 @@ - - - - - -
    -

    -
    - -
    -
    -
    - - diff --git a/step1-03/final/index.html b/step1-03/final/index.html index b8a52a6..0222d11 100644 --- a/step1-03/final/index.html +++ b/step1-03/final/index.html @@ -48,7 +48,8 @@ function updateRemaining() { const remaining = document.querySelector('.remaining'); - const todos = document.querySelectorAll('.todo'); + const todos = document.querySelectorAll('.todo').length; + console.log(todos); remaining.innerText = todos; } From 13ff73b9d2e66acc1b0bcd56ff16f8701d8e0157 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 08:59:15 -0800 Subject: [PATCH 22/32] remove console log --- step1-03/final/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/step1-03/final/index.html b/step1-03/final/index.html index 0222d11..ddf87e9 100644 --- a/step1-03/final/index.html +++ b/step1-03/final/index.html @@ -49,7 +49,6 @@ function updateRemaining() { const remaining = document.querySelector('.remaining'); const todos = document.querySelectorAll('.todo').length; - console.log(todos); remaining.innerText = todos; } From 3dbd8061477803171b31a63186348eec22954096 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:01:47 -0800 Subject: [PATCH 23/32] updaging step 3 docs --- step1-03/demo/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index 3fd1c61..cc356cc 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -13,6 +13,7 @@ This demo starts off with a few elements already in place. Let's walk through wh - **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down. 1. `todo` is set to equal the first todo item 2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4 + > Note that this approach is very fragile, as it requires a node todo node to always be present 3. We set the innerText of the `` to the value returned from getTodoText > Note that if we left off the `()` we'd actually be assigning innerText to the 'function' instead of the function return 4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) From 9c5f658168eab6de2af96868da3a5b9ec748ef36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ragnar=20K=C3=A1rason=20Colon?= Date: Tue, 26 Feb 2019 17:01:49 +0000 Subject: [PATCH 24/32] More typos. --- step1-03/exercise/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/step1-03/exercise/README.md b/step1-03/exercise/README.md index b3736b4..708208e 100644 --- a/step1-03/exercise/README.md +++ b/step1-03/exercise/README.md @@ -3,13 +3,13 @@ ### Write updateRemaining function 1. Get a reference to the span with the `remaining` class, and store it in a variable -2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos. +2. Use [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos. 3. Set the `innerText` of the remaining span to the length of those todos. 4. Add updateRemaining() to addTodo ### Write a clearCompleted function -1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) +1. Get a reference to all of the todos with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) 2. Use a `for (let todo of todos)` loop to iterate over each todo 3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true > Hint: you can use querySelector on any HTML node to find child elements within From 8fd958a74686439c28f4a00d171b64d8c3729da2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:11:39 -0800 Subject: [PATCH 25/32] Update README.md --- step1-03/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index cc356cc..ae8397c 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -13,7 +13,7 @@ This demo starts off with a few elements already in place. Let's walk through wh - **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down. 1. `todo` is set to equal the first todo item 2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4 - > Note that this approach is very fragile, as it requires a node todo node to always be present + > Note that this approach is very fragile, as it requires a todo node to always be present on the page 3. We set the innerText of the `` to the value returned from getTodoText > Note that if we left off the `()` we'd actually be assigning innerText to the 'function' instead of the function return 4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) From 9bb0fe0c514b1784c74940647a32350f23c63f81 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:15:17 -0800 Subject: [PATCH 26/32] Update index.html --- index.html | 324 +++++++++++++++++++++++++---------------------------- 1 file changed, 153 insertions(+), 171 deletions(-) diff --git a/index.html b/index.html index 8a37e0d..c9dc707 100644 --- a/index.html +++ b/index.html @@ -1,188 +1,170 @@ - - - - - - Microsoft Days in the Web - Welcome - - - -
    -

    Frontend Bootcamp View on GitHub

    -
    -
    -
    -
    • -
  • -
    - React Intro -
    - demo | final +
    • +
  • +
    + React Intro +
    + demo | final +
    - -
    • -
  • -
    - React Components -
    - demo | exercise | - final +
    • +
  • +
    + React Components +
    + demo | exercise | + final +
    - -
    • -
  • -
    - State-Driven UI -
    - demo | exercise | - final +
    • +
  • +
    + State-Driven UI +
    + demo | exercise | + final +
    - -
    • -
  • -
    - UI-Driven State -
    - demo | exercise | - final +
    • +
  • +
    + UI-Driven State +
    + demo | exercise | + final +
    - -
    • - - -
    -
      -
    • -

      Day 2

      - Take your todo app to the next level with TypeScript, Fabric React, and Redux. -
      • -
    • -
      - TypeScript Basics -
      - demo | exercise +
      • +
    +
    +
    +
      +
    • +

      Day 2

      + Take your todo app to the next level with TypeScript, Fabric React, and Redux. +
      • +
    • +
      + TypeScript Basics +
      + demo | exercise +
      -
    - -
  • -
    - UI Fabric -
    - demo | exercise +
    • +
  • +
    + UI Fabric +
    + demo | exercise +
    - -
    • -
  • -
    - Theming and Styling -
    - demo | exercise +
    • +
  • +
    + Theming and Styling +
    + demo | exercise +
    - -
    • -
  • -
    - Testing with jest -
    - demo | exercise +
    • +
  • +
    + Testing with jest +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Reducers -
    - demo | exercise +
    • +
  • +
    + Redux: Reducers +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Dispatch Actions -
    - demo | exercise +
    • +
  • +
    + Redux: Dispatch Actions +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Connect to UI -
    - demo | exercise +
    • +
  • +
    + Redux: Connect to UI +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Combine Reducers -
    - demo | exercise +
    • +
  • +
    + Redux: Combine Reducers +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Service Calls -
    - demo | exercise +
    • +
  • +
    + Redux: Service Calls +
    + demo | exercise +
    - -
    • - - -
    -
      -
    • -

      Playground

      - Build your app here! -
      • -
    • Playground
      • -
    -
    - - - - \ No newline at end of file + + + +
    +
      +
    • +

      Playground

      + Build your app here! +
      • +
    • Playground
      • +
    +
    + + + From 0cd4c168113a3331317d5574a26d4a567c7e54b2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:17:33 -0800 Subject: [PATCH 27/32] Update README.md --- step1-02/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index 5bbc685..b3b8b52 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -41,7 +41,7 @@ As we saw in the previous demo, HTML elements can be used to describe different ### Updating the header -The header of our page is where most of the action is going to happen. First, lets give our page a title (Not the HTML tag), adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. +The header of our page is where most of the action is going to happen. First, lets give our app a name, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. ```html From 212806fe9c73a6fb6d6f1b58ba617cd97a82c5b2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:18:45 -0800 Subject: [PATCH 28/32] Update README.md --- step1-02/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index b3b8b52..8b419ba 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -61,7 +61,7 @@ The navigation for this application is quite simple. We want users to be able to ### Adding styles -Now that we've got the top of our application scaffolded, we can add some of our styles in the head. +Now that we've got the top of our application scaffolded, we can add some styles in the head. ```html From 6953257aadb2290de59196431ece29507c1b70a1 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 26 Feb 2019 09:35:56 -0800 Subject: [PATCH 29/32] Fixing tracking and fixing the playground link --- assets/track.js | 2 +- index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/track.js b/assets/track.js index f94f793..26f76d4 100644 --- a/assets/track.js +++ b/assets/track.js @@ -5,4 +5,4 @@ var appInsights=window.appInsights||function(a){ instrumentationKey: "6ad37ae0-c4ab-4739-925c-1e2773c31f17" }); // prettier-ignore -window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView(); +window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView(null, null, {urlReferrer: document.referrer}); diff --git a/index.html b/index.html index 0986473..35ca90b 100644 --- a/index.html +++ b/index.html @@ -161,7 +161,7 @@

    Playground

    Build your app here! -
  • Playground
    • +
  • Playground
    • From 9cef35ef706d730d0f35da1218850bfe902c2e24 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 26 Feb 2019 09:45:41 -0800 Subject: [PATCH 30/32] fix links in readme and filter out localhost traffic --- README.md | 4 ++-- assets/track.js | 5 ++++- step2-09/README.md | 2 ++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fe3e06d..6236408 100644 --- a/README.md +++ b/README.md @@ -82,8 +82,8 @@ Demo and Exercises are combined If you are interested in JavaScript, TypeScript, React, Redux, Design Systems, follow us on Twitter: -@kenneth_chau -@micahgodbolt +- [@kenneth_chau](https://twitter.com/kenneth_chau) +- [@micahgodbolt](https://twitter.com/micahgodbolt) # Contributing diff --git a/assets/track.js b/assets/track.js index 26f76d4..1c3cfda 100644 --- a/assets/track.js +++ b/assets/track.js @@ -4,5 +4,8 @@ var appInsights=window.appInsights||function(a){ }({ instrumentationKey: "6ad37ae0-c4ab-4739-925c-1e2773c31f17" }); + // prettier-ignore -window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView(null, null, {urlReferrer: document.referrer}); +if (window.location.hostname !== 'localhost') { + window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView(null, null, {urlReferrer: document.referrer}); +} diff --git a/step2-09/README.md b/step2-09/README.md index cda114a..71a1073 100644 --- a/step2-09/README.md +++ b/step2-09/README.md @@ -2,6 +2,8 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) +(First off, this doesn't work with the live site on github.io. Clone this repo to try this step out) + Redux Thunk middleware for actions with service calls. The documentation is here: https://github.com/reduxjs/redux-thunk From 55cd2cffe8e7cdf4b8795779edb071c6456b128f Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 10:09:17 -0800 Subject: [PATCH 31/32] style tweak --- assets/shared.css | 4 ++-- index.html | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/shared.css b/assets/shared.css index fa268f0..bc0d60a 100644 --- a/assets/shared.css +++ b/assets/shared.css @@ -67,10 +67,10 @@ h1 a { content: counter(steps); position: absolute; left: -20px; - bottom: -20px; + bottom: -3px; font-size: 220px; line-height: 188px; - color: #f3f2f1; + color: #eaeaea; z-index: 1; } diff --git a/index.html b/index.html index 0986473..c9dc707 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Microsoft Days in the Web - Welcome
    From d8702ec24e3bc849398f18a9b4e6878160915a1d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 11:21:28 -0800 Subject: [PATCH 32/32] misc fixes --- README.md | 9 +++++---- assets/{track.js => scripts.js} | 0 index.html | 4 ++-- step1-01/html-demo/html-demo.html | 13 ++++++++++++- step1-01/index.html | 1 + step1-01/js-demo/js-demo-final.html | 2 +- step1-02/index.html | 16 ---------------- step1-03/index.html | 16 ---------------- step1-04/index.html | 15 --------------- step1-05/index.html | 15 --------------- step1-06/demo/README.md | 14 +++++++------- step1-06/demo/src/components/TodoFooter.tsx | 2 +- step1-06/demo/src/components/TodoList.tsx | 6 +++--- .../exercise/src/components/TodoHeader.tsx | 6 +++--- step1-06/final/src/components/TodoHeader.tsx | 8 ++++---- step1-07/demo/README.md | 4 ++++ step1-07/demo/src/TodoApp.tsx | 19 ++++++++++++++++++- step1-07/exercise/src/TodoApp.tsx | 19 ++++++++++++++++++- .../exercise/src/components/TodoHeader.tsx | 2 +- step1-07/final/src/components/TodoHeader.tsx | 2 +- step1-07/index.html | 15 --------------- step2-01/demo/index.html | 2 +- step2-01/exercise/index.html | 2 +- step2-02/demo/index.html | 2 +- step2-02/exercise/index.html | 2 +- step2-03/demo/index.html | 2 +- step2-03/exercise/index.html | 2 +- step2-04/demo/index.html | 2 +- step2-04/exercise/index.html | 2 +- step2-05/demo/index.html | 2 +- step2-05/exercise/index.html | 2 +- step2-06/demo/index.html | 2 +- step2-06/exercise/index.html | 2 +- step2-07/demo/index.html | 2 +- step2-07/exercise/index.html | 2 +- step2-08/demo/index.html | 2 +- step2-08/exercise/index.html | 2 +- step2-09/demo/index.html | 2 +- step2-09/exercise/index.html | 2 +- 39 files changed, 99 insertions(+), 125 deletions(-) rename assets/{track.js => scripts.js} (100%) delete mode 100644 step1-02/index.html delete mode 100644 step1-03/index.html delete mode 100644 step1-04/index.html delete mode 100644 step1-05/index.html delete mode 100644 step1-07/index.html 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 (
    4 items left diff --git a/step1-06/demo/src/components/TodoList.tsx b/step1-06/demo/src/components/TodoList.tsx index 29ca769..9f12d6d 100644 --- a/step1-06/demo/src/components/TodoList.tsx +++ b/step1-06/demo/src/components/TodoList.tsx @@ -5,9 +5,9 @@ export class TodoList extends React.Component { render() { const { filter, todos } = this.props; - const filteredTodos = Object.keys(todos).filter(id => { - return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); - }); + // const filteredTodos = Object.keys(todos).filter(id => { + // return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); + // }); return (
      diff --git a/step1-06/exercise/src/components/TodoHeader.tsx b/step1-06/exercise/src/components/TodoHeader.tsx index 51830e9..e8fde78 100644 --- a/step1-06/exercise/src/components/TodoHeader.tsx +++ b/step1-06/exercise/src/components/TodoHeader.tsx @@ -17,9 +17,9 @@ export class TodoHeader extends React.Component {
    ); 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 @@
    - +