From 46094abe9d0edea18bb196bfd9b96aa6cc805c65 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 5 Mar 2019 02:42:26 -0800 Subject: [PATCH] Day 2: title formatting coherence, minor edits --- step2-01/demo/README.md | 8 ++++---- step2-01/exercise/README.md | 8 ++++---- step2-02/demo/README.md | 16 ++++++++-------- step2-02/exercise/README.md | 2 +- step2-03/demo/README.md | 2 +- step2-03/exercise/README.md | 14 ++++++-------- step2-04/demo/README.md | 8 ++++---- step2-04/exercise/README.md | 6 +++--- step2-05/exercise/README.md | 10 +++++----- step2-06/demo/README.md | 2 +- step2-06/exercise/README.md | 6 +++--- 11 files changed, 40 insertions(+), 42 deletions(-) diff --git a/step2-01/demo/README.md b/step2-01/demo/README.md index b2711df..b4f8860 100644 --- a/step2-01/demo/README.md +++ b/step2-01/demo/README.md @@ -1,4 +1,4 @@ -# Step 2.1: Introduction to TypeScript (Demo) +# Step 2.1 - Introduction to TypeScript (Demo) [Lessons](../../) | [Exercise](../exercise/) @@ -28,11 +28,11 @@ The most important ones to know about are: > For more information about the _many_ modularity patterns and standards developed over time, see [this article](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc). You may still encounter some of the older patterns in legacy code. -## TypeScript Types +## TypeScript types Refer to [`demo/src/types`](./src/types/index.ts) for examples of some of the types available in TS that benefit a React developer. -## Spread Operator +## Spread operator The spread operator `...` provides a quick way to clone and concatenate objects and arrays. This syntax is seen a lot inside React props and Redux reducers. @@ -139,7 +139,7 @@ aPromise > For more information, see [this overview of promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) or [this deep dive](https://developers.google.com/web/fundamentals/primers/promises). -## Async / Await +## Async / await **Async / Await** is a language-level feature for writing asynchronous functions as if they are ordinary, synchronous code. JS support for this is built on top of `Promise`s and is inspired heavily by [C#'s async / await syntax](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/). An async function is written like this: diff --git a/step2-01/exercise/README.md b/step2-01/exercise/README.md index 5c76977..c4e0ad8 100644 --- a/step2-01/exercise/README.md +++ b/step2-01/exercise/README.md @@ -1,4 +1,4 @@ -# Step 2.1: Introduction to TypeScript (Exercise) +# Step 2.1 - Introduction to TypeScript (Exercise) [Lessons](../../) | [Demo](../demo/) @@ -20,7 +20,7 @@ Exercises will be completed under this step's `exercise/src` folder unless other 5. Inside `index.ts` in the same folder, import both `fib` and `FibConst`, and use the built-in `console.log()` function to log the result of `fib(FibConst)`. -## Types and Interfaces +## Types and interfaces Inside `exercise/src/index.ts`: @@ -38,7 +38,7 @@ Inside `exercise/src/stack.ts`, create a generic class for a `Stack` complete In `exercise/src/index.ts`, create a `Stack` and use `console.log()` to demonstrate its functionality. -## Spread and Destructuring +## Spread and destructuring 1. Note the following code in index.ts: @@ -61,7 +61,7 @@ const obj2 = { 3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`. -## Async / Await +## Async / await Note the following code in index.ts: diff --git a/step2-02/demo/README.md b/step2-02/demo/README.md index 24c42b4..2f7fc0f 100644 --- a/step2-02/demo/README.md +++ b/step2-02/demo/README.md @@ -1,4 +1,4 @@ -# Step 2.2: UI Fabric Component Library (Demo) +# Step 2.2 - UI Fabric component library (Demo) [Lessons](../../) | [Exercise](../exercise/) @@ -11,7 +11,7 @@ We'll talk about: - [How to use it](#how-to-use-it) - [Laying out apps with Stack](#layout-with-stack) -## What Makes It Good +## What makes it good - Fabric has been developed BOTH by developers and design engineers working together as a team - Most notable Microsoft web products use it @@ -23,7 +23,7 @@ We'll talk about: - Engineering is done in the open on GitHub - Engineering system is shared and re-usable by other teams -## How to Find It +## How to find it GitHub repo: https://github.com/officedev/office-ui-fabric-react @@ -31,9 +31,9 @@ https://github.com/officedev/office-ui-fabric-react Documentation: https://developer.microsoft.com/en-us/fabric/#/components -## How to Use It +## How to use it -### Importing a Component +### Importing a component ```jsx import { DefaultButton } from 'office-ui-fabric-react'; @@ -47,7 +47,7 @@ const MyComponent = () => { }; ``` -### Customizing Behavior of Individual Components +### Customizing behavior of individual components Take a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button). @@ -65,7 +65,7 @@ const MyComponent = () => { }; ``` -### Customizing Component Rendering +### Customizing component rendering Some Fabric components take in a render functions to allow customizing certain parts of the component. An example with TextField: @@ -84,7 +84,7 @@ const MyComponent = () => { ## Layout with Stack -Before we start, let's look at flexbox--a new CSS layout method which is powerful, but really, really complex to use: +Before we start, let's look at flexbox--a modern CSS layout method which is powerful, but really, really complex to use: - A guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - A tool: http://the-echoplex.net/flexyboxes/ diff --git a/step2-02/exercise/README.md b/step2-02/exercise/README.md index d473833..f6f4d9c 100644 --- a/step2-02/exercise/README.md +++ b/step2-02/exercise/README.md @@ -1,4 +1,4 @@ -# Step 2.2: UI Fabric Component Library (Exercise) +# Step 2.2 - UI Fabric component library (Exercise) [Lessons](../../) | [Demo](../demo/) diff --git a/step2-03/demo/README.md b/step2-03/demo/README.md index f36272d..46eabb6 100644 --- a/step2-03/demo/README.md +++ b/step2-03/demo/README.md @@ -1,4 +1,4 @@ -# Step 2.3: Theming and styling with UI Fabric (Demo) +# Step 2.3 - Theming and styling with UI Fabric (Demo) [Lessons](../../) | [Exercise](../exercise/) diff --git a/step2-03/exercise/README.md b/step2-03/exercise/README.md index 6eb7d5b..da527b3 100644 --- a/step2-03/exercise/README.md +++ b/step2-03/exercise/README.md @@ -1,12 +1,10 @@ -# Step 2.3: Theming and styling with UI Fabric (Exercise) +# Step 2.3 - Theming and styling with UI Fabric (Exercise) [Lessons](../../) | [Demo](../demo/) If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 3 to see results. -## Fabric theming and styling - -### Applying Fabric themes +## Applying Fabric themes Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing: @@ -20,7 +18,7 @@ with: import { TeamsCustomizations } from '@uifabric/theme-samples'; ``` -### Applying customized themes +## Applying customized themes 1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code. @@ -30,7 +28,7 @@ import { TeamsCustomizations } from '@uifabric/theme-samples'; 4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type. -### Customizing one Fabric control instance +## Customizing one Fabric control instance 1. Open `exercise/src/components/TodoFooter.tsx` @@ -40,9 +38,9 @@ import { TeamsCustomizations } from '@uifabric/theme-samples'; 4. Try to customize this with a styles function -## Advanced/non-Fabric component styling +## CSS-in-JS with `mergeStyles` -### CSS-in-JS with `mergeStyles` +As mentioned in the demo, this is an advanced approach which also works outside of Fabric. You wouldn't typically use this approach within a Fabric-based app. 1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp` diff --git a/step2-04/demo/README.md b/step2-04/demo/README.md index 943fdd6..7bcb320 100644 --- a/step2-04/demo/README.md +++ b/step2-04/demo/README.md @@ -8,8 +8,8 @@ We will solve these problems with the [React Context API](https://reactjs.org/do 1. The problem of complex applications 2. React Context API -3. Consuming context from a Class Component -4. Consuming context from a Functional Component +3. Consuming context from a class component +4. Consuming context from a functional component ## The problem of complex applications @@ -81,7 +81,7 @@ class TodoApp extends React.Component { } ``` -### Consume context from a Class Component +### Consume context from a class component Inside a class-based child component, such as ``, the context created in the parent can be accessed via `this.context`. Note that for this to work, you must also set the component class's `contextType` property to the context type created above. @@ -97,7 +97,7 @@ class TodoHeader extends React.Component { TodoHeader.contextType = TodoContext; ``` -### Consume context from a Functional Component +### Consume context from a functional component If you're using the functional component syntax, you can access the context with the `useContext()` hook: diff --git a/step2-04/exercise/README.md b/step2-04/exercise/README.md index c80e502..a615a8c 100644 --- a/step2-04/exercise/README.md +++ b/step2-04/exercise/README.md @@ -4,19 +4,19 @@ If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 4 to see results. -## TodoContext.Provider Component +## TodoContext.Provider component 1. Open `exercise/src/components/TodoApp.tsx` 2. Uncomment the missing functions inside the value prop -## TodoFooter, Context inside Functional Component +## TodoFooter: context inside functional component 1. Open `exercise/src/components/TodoFooter.tsx` 2. Use `useContext` to access the `TodoContext` and replace the two constants with values from the context -## TodoHeader, Context inside Class Component +## TodoHeader: context inside class component 1. Open `exercise/src/components/TodoHeader.tsx` diff --git a/step2-05/exercise/README.md b/step2-05/exercise/README.md index 8588cb2..a24764f 100644 --- a/step2-05/exercise/README.md +++ b/step2-05/exercise/README.md @@ -1,4 +1,4 @@ -# Step 2.5: Redux: Reducers (Exercise) +# Step 2.5 - Redux: The Store (Exercise) [Lessons](../../) | [Demo](../demo/) @@ -6,12 +6,12 @@ If you don't already have the app running, start it by running `npm start` from 1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of type `TodoItem`. -2. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`. +2. Open `exercise/src/reducers/index.ts` and fill in the missing reducer implementations. -3. Open `exercise/src/index.tsx` and write separate dispatch calls. +3. Open `exercise/src/index.tsx` and write some `dispatch` calls. -4. Take a look what is written in the console (F12 on PC, cmd-option-I on Mac). +4. Take a look what is written in the console (F12 on PC, `cmd-option-I` on Mac). -5. Install the Redux DevTools [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) extensions +5. Install the Redux DevTools [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) extension 6. Observe the state changes and try doing "time travel" diff --git a/step2-06/demo/README.md b/step2-06/demo/README.md index 7be7786..ef95fc3 100644 --- a/step2-06/demo/README.md +++ b/step2-06/demo/README.md @@ -1,4 +1,4 @@ -# Step 2.6: Redux: React Binding (Demo) +# Step 2.6 - Redux: React binding (Demo) [Lessons](../../) | [Exercise](../exercise/) diff --git a/step2-06/exercise/README.md b/step2-06/exercise/README.md index 4e83c1b..3636b08 100644 --- a/step2-06/exercise/README.md +++ b/step2-06/exercise/README.md @@ -1,14 +1,14 @@ -# Step 2.6: Redux: React Binding (Exercise) +# Step 2.6 - Redux: React binding (Exercise) [Lessons](../../) | [Demo](../demo/) -If you haven't arStart the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6 to see results. +If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6 to see results. At the beginning of this exercise, the "Add" and "Clear Completed" buttons do not work. We'll be fixing that in this step! 1. Open `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment -2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps` +2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (the `?`) in the interface definition of `TodoFooterProps` 3. Uncomment the bottom bits of code and fill in `connect()` arguments - feel free to use `TodoListItem.tsx` as a guide