-To run the dev "inner loop" for the first 3 lessons type:
+To start the dev "inner loop," run:
```
-npm run static
+npm start
```
-When we get to lesson 4, and React we will stop the static inner loop and start:
-1. press `ctrl + c` to stop the static inner loop
-
-```
-npm run start
-```
-
-Both of these above commands will load the following site:
+This will load the site shown below.
-## What to Expect
+## What to expect
+
+For each lesson, the presenter will walk through some demo code to teach core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readmes linked below.
+
+Most lessons also have an exercise portion. Exercise instructions are usually found in the readme for each step's "exercise" folder.
### Day one
-Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.
-
-#### How we'll work
-
-The format of this day is the following:
-
-1. I will walk through some demo code to teach some core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readme's listed below.
-2. In the excercise portion return to VS Code and open the 'exercise' folder for the given exercise. The demo folder will include a README file with directions and a link to the demo page.
-
-#### Course Material
-
-1. [Introduction to HTML, CSS and JavaScript](step1-01)
-2. [Writing a Todo App: HTML and CSS](step1-02)
-3. [Writing a Todo App: JavaScript](step1-03)
-4. [React Introduction](step1-04)
-5. [Building a Static Page](step1-05)
-6. [State Driven UI](step1-06)
-7. [Types & UI Driven State](step1-07)
+Day one covers the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.
+1. [Introduction to HTML](step1-01)
+2. [Introduction to CSS](step1-02)
+3. [Introduction JavaScript](step1-03)
+4. [Introduction to React](step1-04)
+5. [Building a static page](step1-05)
+6. [State-driven UI](step1-06)
+7. [Types and UI-driven state](step1-07)
### Day two
-The demos and exercises for today are combined.
+1. [TypeScript basics](step2-01)
+2. [UI Fabric component library](step2-02)
+3. [Theming and styling](step2-03)
+4. [React Context](step2-04)
+5. [Redux: Store](step2-05)
+6. [Redux: React binding](step2-06)
-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)
-5. [Redux: Reducers](step2-05)
-6. [Redux: Dispatching Actions and Examining State](step2-06)
-7. [Redux: Stores and Dispatch](step2-07)
-8. [Redux: Combining Reducers](step2-08)
-9. [Redux: Thunk Middleware](step2-09)
+### Bonus content
-### Additional resources
+* [Redux: Service calls](bonus-servicecalls)
+* [Testing with Jest](bonus-jest)
+
+## Additional resources
- [MDN Web Docs](https://developer.mozilla.org/en-US/)
- [React Docs](https://reactjs.org/docs/getting-started.html)
- [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)
-### Follow the authors!
+## Follow the authors!
If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter:
- [@kenneth_chau](https://twitter.com/kenneth_chau)
- [@micahgodbolt](https://twitter.com/micahgodbolt)
-### Other projects from the UI Fabric team at Microsoft
+## Other projects from the UI Fabric team at Microsoft
- [UI Fabric](https://developer.microsoft.com/en-us/fabric) - [github repo](https://github.com/officedev/office-ui-fabric-react)
- [Just](https://microsoft.github.io/just): The task library that just works - [github repo](https://github.com/Microsoft/just)
diff --git a/bonus-jest/demo/README.md b/bonus-jest/demo/README.md
index 957f759..f347a02 100644
--- a/bonus-jest/demo/README.md
+++ b/bonus-jest/demo/README.md
@@ -6,25 +6,25 @@
In this exercise, we will work on implementing simple unit tests using Jest.
-## Jest Features
+## Jest features
- Multi-threaded and isolated test runner
-- Provides a fake browser-like environment if needed (window, document, DOM, etc) using jsdom
+- Provides a fake browser-like environment if needed (window, document, DOM, etc) using [jsdom](https://github.com/jsdom/jsdom)
- Snapshots: Jest can create text-based snapshots of rendered components. These snapshots can be checked in and show API or large object changes alongside code changes in pull requests.
- Code coverage is integrated (`--coverage`)
- Very clear error messages showing where a test failure occurred
## How to use Jest
-- Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it!
-- A `jest.config.js` file is used for configuration
-- `jsdom` might not have enough API from real browsers, for those cases, polyfills are required. Place these inside `jest.setup.js` and hook up the setup file in `jest.config.js`
-- in order to use `enzyme` library to test React Components, more config bits are needed inside `jest.setup.js`
+Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it!
+
+Setting up Jest in a new project is outside the scope of this course, but if you're interested in how it works, take a look at the bootcamp project's `jest.config.js` and `jest.setup.js` files or the [getting started documentation](https://jestjs.io/docs/en/getting-started).
## What does a test look like?
```ts
-// describe(), it() and expect() are globally exported, so they don't need to be imported when jest runs these tests
+// describe(), it() and expect() are globally exported,
+// so they don't need to be imported in each test file
describe('Something to be tested', () => {
it('should describe the behavior', () => {
expect(true).toBe(true);
@@ -32,6 +32,12 @@ describe('Something to be tested', () => {
});
```
+- `describe()` takes a string describing the thing to be tested (often a component or file name) and a function which runs tests.
+- `it()` takes a string describing the behavior to be tested and a function to run the test.
+- `expect()` takes the actual value as a parameter and returns an object with various "matcher" methods to test against an expected value/condition. `toBe` is just one of [many available matchers](https://jestjs.io/docs/en/expect).
+
+> When choosing test names, think of the strings passed to `describe` and `it` as forming a sentence. For example, inside `describe('MyComponent', ...)` you might have a test `it('renders some text', ...)`, which forms the sentence a sentence describing the behavior: "MyComponent renders some text."
+
## Testing React components using Enzyme
[Enzyme](https://airbnb.io/enzyme/) is made by Airbnb and provides utilities to help test React components.
@@ -88,7 +94,7 @@ it('some test function', () => {
Read more about jest mocking [here](https://jestjs.io/docs/en/mock-functions.html).
-### Async Testing
+### Async testing
For testing async scenarios, the test runner needs some way to know when the scenario is finished. Jest tests can handle async scenarios using callbacks, promises, or async/await.
diff --git a/index.html b/index.html
index 7693193..a7eadb6 100644
--- a/index.html
+++ b/index.html
@@ -145,7 +145,7 @@