diff --git a/assets/step.css b/assets/step.css index 4624979..6813a5d 100644 --- a/assets/step.css +++ b/assets/step.css @@ -25,7 +25,7 @@ body { padding: 50px; margin: 0 auto; height: 100vh; - overflow: scroll; + overflow: auto; } #markdownReadme.exercise { diff --git a/step2-01/exercise/README.md b/step2-01/exercise/README.md index e88cac6..0106e15 100644 --- a/step2-01/exercise/README.md +++ b/step2-01/exercise/README.md @@ -2,8 +2,6 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -# Exercise - If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Exercises will be completed under this step's `exercise/src` folder unless otherwise noted. You'll also want to open the [Step2-01 exercise page](http://localhost:8080/step2-01/exercise/) to see the results as you work. diff --git a/step2-03/exercise/README.md b/step2-03/exercise/README.md index 88c7f72..495e950 100644 --- a/step2-03/exercise/README.md +++ b/step2-03/exercise/README.md @@ -2,8 +2,6 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -# Exercises - 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 diff --git a/step2-04/exercise/README.md b/step2-04/exercise/README.md index 88880c0..aed944e 100644 --- a/step2-04/exercise/README.md +++ b/step2-04/exercise/README.md @@ -2,8 +2,6 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -# Exercise - Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder. ## Basic testing diff --git a/step2-05/exercise/README.md b/step2-05/exercise/README.md index 117fbeb..1cac395 100644 --- a/step2-05/exercise/README.md +++ b/step2-05/exercise/README.md @@ -2,8 +2,6 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -# Exercise - If you still have the app running from a previous step, stop it with `ctrl+c`. Start the tests instead by running `npm test` from the root of the `frontend-bootcamp` folder. 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 a `TodoItem` type. diff --git a/step2-06/README.md b/step2-06/demo/README.md similarity index 76% rename from step2-06/README.md rename to step2-06/demo/README.md index b127633..29823ba 100644 --- a/step2-06/README.md +++ b/step2-06/demo/README.md @@ -1,4 +1,4 @@ -# Step 2.6 - Redux: Dispatching actions and examining state +# Step 2.6 - Redux: Dispatching actions and examining state (Demo) [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) @@ -66,25 +66,3 @@ In general, you should only include serializable things in the state so that you If you want a really neat UI to show what the store looks when actions are dispatched to the store, use the [Redux DevTools extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd). This extension (available for Chrome and Firefox) is a work of genius! It lets you replay actions and step backwards to debug the current state of a Redux application. In a large enough application, this kind of debuggability is invaluable. It also helps developers who are not familiar with your application to quickly get a handle on how the state changes in response to some actions. - -# Exercise - -## Visualize state changes with Chrome extension - -If you still have `npm test` running from the previous step, stop it with `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6. - -1. Install the [Redux DevTools Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) - -2. Hit F12 (`cmd+option+I` on Mac) and open the inspector panel entitled **Redux** - -3. Modify `exercise/src/index.tsx` to dispatch actions (you're not limited to adding todos; you can also remove and clear) - -4. Explore the actions' effects using the extension - -## Playing with dispatching actions inside tests - -Stop the app using `ctrl+C` and start the tests by running `npm test`. - -1. Open `exercise/src/reducers/reducer.spec.ts` - -2. Follow the instructions to fill out the reducer tests diff --git a/step2-06/demo/index.html b/step2-06/demo/index.html index 50d9fb4..92a9499 100644 --- a/step2-06/demo/index.html +++ b/step2-06/demo/index.html @@ -4,7 +4,7 @@ -
+
For this step, we look at unit testing. Run
npm test
diff --git a/step2-06/exercise/README.md b/step2-06/exercise/README.md new file mode 100644 index 0000000..1f223ec --- /dev/null +++ b/step2-06/exercise/README.md @@ -0,0 +1,23 @@ +# Step 2.6 - Redux: Dispatching actions and examining state (Exercise) + +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + +## Visualize state changes with Chrome extension + +If you still have `npm test` running from the previous step, stop it with `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6. + +1. Install the [Redux DevTools Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) + +2. Hit F12 (`cmd+option+I` on Mac) and open the inspector panel entitled **Redux** + +3. Modify `exercise/src/index.tsx` to dispatch actions (you're not limited to adding todos; you can also remove and clear) + +4. Explore the actions' effects using the extension + +## Playing with dispatching actions inside tests + +Stop the app using `ctrl+C` and start the tests by running `npm test`. + +1. Open `exercise/src/reducers/reducer.spec.ts` + +2. Follow the instructions to fill out the reducer tests diff --git a/step2-06/exercise/index.html b/step2-06/exercise/index.html index 50d9fb4..e908cc3 100644 --- a/step2-06/exercise/index.html +++ b/step2-06/exercise/index.html @@ -4,7 +4,7 @@ -
+
For this step, we look at unit testing. Run
npm test
diff --git a/step2-08/exercise/README.md b/step2-08/exercise/README.md index a5ea850..7f8161a 100644 --- a/step2-08/exercise/README.md +++ b/step2-08/exercise/README.md @@ -2,8 +2,6 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -# Exercise - 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 8 to see results. > Hint! This section is tricky, so all the solution is inside "demo" as usual. Feel free to copy & paste if you get stuck!! diff --git a/step2-09/demo/README.md b/step2-09/demo/README.md index 23330b0..b0a5019 100644 --- a/step2-09/demo/README.md +++ b/step2-09/demo/README.md @@ -48,15 +48,3 @@ Let's make some observations: 3. the inner function is `async` enabled, and can await on "side effects" like asynchronous service calls 4. this inner function has the ability to dispatch additional actions because it has been passed the `dispatch()` function from the store 5. this inner function also has access to the state tree via `getState()` - -# Exercise - -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 9 to see results. - -1. open up `exercise/src/service/index.ts` and study the signature of the functions to call the service such as the `add()` function - -2. open `exercise/src/actions/index.ts` and fill in the missing content inside `actionsWithService` - -- note that the `complete` and `clear` functions require you to write your own wrapper function - -3. open `exercise/src/index.tsx` and follow the instructions in the TODO comment to make the app prepopulate with data from the service. diff --git a/step2-09/exercise/README.md b/step2-09/exercise/README.md index 1a692e6..5128fe9 100644 --- a/step2-09/exercise/README.md +++ b/step2-09/exercise/README.md @@ -4,53 +4,6 @@ > Note: this step doesn't work with the live site on github.io. Clone this repo to try this step out -# `redux-thunk`: side effects inside action creators - -Redux Thunk middleware for actions with service calls. The documentation is here: - -https://github.com/reduxjs/redux-thunk - -Remember those simple little action functions? They're called action creators. These little functions can be charged with super powers to allow asynchronous side effects to happen while creating the messages. Asynchronous side effects include service calls against APIs. - -Action creators are a natural place to put service calls. Redux thunk middleware passes in the `dispatch()` and `getState()` from the store into the action creators. This allows the action creator itself to dispatch different actions in between async side effects. Combined with the async / await syntax, coding service calls is a cinch! - -Most of the time, in a single-page app, we apply **optimistic UI updates**. We can update the UI before the network call completes so the UI feels more responsive. To - -# Action Creator with a Thunk - -[What's a thunk?](https://daveceddia.com/what-is-a-thunk/) - it is a wrapper function that returns a function. What does it do? Let's find out! - -This action creator just returns an object - -```ts -function addTodo(label: string) { - return { type: 'addTodo', id: uuid(), label }; -} -``` - -In order for us to make service calls, we need to super charge this with the power of `redux-thunk` - -```ts -function addTodo(label: string) { - return async (dispatch: any, getState: () => Store) => { - const addAction = actions.addTodo(label); - const id = addAction.id; - dispatch(addAction); - await service.add(id, getState().todos[id]); - }; -} -``` - -Let's make some observations: - -1. the outer function has the same function signature as the previous one -2. it returns a function that has `dispatch` and `getState` as parameters -3. the inner function is `async` enabled, and can await on "side effects" like asynchronous service calls -4. this inner function has the ability to dispatch additional actions because it has been passed the `dispatch()` function from the store -5. this inner function also has access to the state tree via `getState()` - -# Exercise - 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 9 to see results. 1. open up `exercise/src/service/index.ts` and study the signature of the functions to call the service such as the `add()` function