From 5044bd5f9d80570fb7aa984c2cfa2ab3d69c924e Mon Sep 17 00:00:00 2001 From: Rodger Jordas Date: Tue, 26 Feb 2019 13:49:38 +0800 Subject: [PATCH 1/2] 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 0907fb7e75778f72f246339b0ead97e8090d7a5a Mon Sep 17 00:00:00 2001 From: Rodger Jordas Date: Tue, 26 Feb 2019 13:54:57 +0800 Subject: [PATCH 2/2] 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.