Add instructions for how to run the exercises
This commit is contained in:
Родитель
88425249ea
Коммит
5a0a51ed4c
|
@ -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>`
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
export class Counter extends React.Component {
|
||||
export class Counter extends React.Component<any, any> {
|
||||
render() {
|
||||
return <p>hello</p>;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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)`
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -109,6 +109,8 @@ Check out a cookbook of sorts in our [documentation](https://developer.microsoft
|
|||
|
||||
# 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 2 to see results.
|
||||
|
||||
1. Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button)
|
||||
2. Open each TSX file inside `exercise/src/components`
|
||||
3. Replace some of the built-in HTML tags with these Fabric components:
|
||||
|
|
|
@ -153,6 +153,8 @@ const myDiv = (
|
|||
|
||||
# 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
|
||||
|
|
|
@ -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`:
|
||||
|
||||
|
|
|
@ -75,6 +75,8 @@ The Chrome / Firefox Redux dev tools extension is a work of genius! It lets you
|
|||
|
||||
# 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 6 to see results.
|
||||
|
||||
## Visualize the state changes with Chrome extension
|
||||
|
||||
1. Install [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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`
|
||||
|
|
Загрузка…
Ссылка в новой задаче