Merge pull request #46 from ecraig12345/start

Add instructions for how to run the exercises

step1-02/exercise/README.md

@@ -1,5 +1,7 @@
 ## Exercise
 
+If you don't already have the app running, start it with `npm run static` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 1 step 2 to see results.
+
 1. Add an unordered list with class `todos` to the main section
 2. Add 4 list items with class `todo` inside of that list with the following content
    `<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`

step1-03/exercise/README.md

@@ -1,5 +1,7 @@
 ## Exercise
 
+If you don't already have the app running, start it with `npm run static` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 1 step 3 to see results.
+
 ### Update Navigation
 
 1. Add an `onclick` attribute to all three buttons in the navigation.

step1-04/demo/README.md

@@ -6,6 +6,10 @@ In this example we'll see how React turns that paradigm completely around. With
 
 In this demo we'll be creating a simple counter that will display a count and increment on click.
 
+## Building
+
+If you already have the app running from a previous step, stop it with `ctrl+C`. Start the app version used in this step by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "demo" link under day 1 step 4 to see results.
+
 ## The App
 
 This is the starting point of our React application. It is a component just like the other ones we will be building, but this component will only ever be used once, to render the application. Here's how our app starts out. Let's walk through each line:

step1-05/exercise/README.md

@@ -1,5 +1,7 @@
 ## Exercise
 
+If you already have the app running from a previous step, stop it with `ctrl+C`. Start the app version used in this step by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 1 step 5 to see results.
+
 ### TodoFooter
 
 1. Update the TodoFooter component, copying over the `<footer>` tag and all of its children

step1-06/exercise/README.md

@@ -1,5 +1,7 @@
 ## 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 1 step 6 to see results.
+
 ### TodoFooter
 
 1. Use the provided `itemCount` value to display the current number of items left.

step1-07/exercise/README.md

@@ -1,5 +1,7 @@
 ## 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 1 step 7 to see results.
+
 ### TodoFooter
 
 1. Open TodoFooter and write a TodoFooterProps interface. It should include two values, a function and an object. Use this interface in the function props like this: `(props: TodoFooterProps)`

step2-01/README.md

@@ -163,6 +163,8 @@ someFunctionAsync().then(result => {
 
 # 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.
 
 ## Modules

step2-02/README.md

@@ -109,10 +109,12 @@ Check out a cookbook of sorts in our [documentation](https://developer.microsoft
 
 # Exercise 1: Getting familiar with the Fabric documentation site:
 
-Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button)
+Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button). Use the sidebar to explore other available components.
 
 # Exercise 2: "Fabric"ize the TodoFooter.tsx
 
+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 2 to see results.
+
 1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`
 2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric
 3. Follow the TODO comment to:

step2-03/README.md

@@ -149,6 +149,8 @@ const myDiv = <div className={className}>I am a green div that turns red on hove
 
 # 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
 
 ### Applying Fabric themes

step2-04/README.md

@@ -115,7 +115,7 @@ it('tests async functions', async () => {
 
 ## Jest basics
 
-In this repo, we can start an inner loop development of tests with the command: `npm test`
+In this repo, we can start an inner loop development of tests by running `npm test` from the root of the `frontend-bootcamp` folder.
 
 Take a look at code inside `demo/src`:
 

step2-06/README.md

@@ -75,6 +75,8 @@ The Chrome / Firefox Redux dev tools extension is a work of genius! It lets you
 
 # Exercise
 
+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 to see results.
+
 ## Visualize the state changes with Chrome extension
 
 1. Install [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)

step2-07/README.md

@@ -75,6 +75,8 @@ function mapDispatchToProps(dispatch) {
 
 # 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 7 to see results.
+
 1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
 
 2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`

step2-08/README.md

@@ -146,6 +146,8 @@ export const reducer = combineReducers({
 
 # 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!!
 
 1. open up `exercise/src/reducers/index.ts`

step2-09/README.md

@@ -51,6 +51,8 @@ Let's make some observations:
 
 # 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`