microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Day 1 updates

Browse Source
This commit is contained in:
Elizabeth Craig
2019-02-27 17:46:56 -08:00
parent 5e5717240c
commit 5aed397e01
14 changed files with 144 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
step1-05/demo/README.md
View File

@@ -2,14 +2,14 @@
## Demo
To start off our Todo application we are going to follow the steps outline in [Thinking in React](https://reactjs.org/docs/thinking-in-react.html). The first step of the process is to break our application into a component hierarchy. For this app, we're going to keep it simple and just use four parts.
To start off our todo application we are going to follow the steps outlined in [Thinking in React](https://reactjs.org/docs/thinking-in-react.html). The first step of the process is to break our application into a component hierarchy. For this app, we're going to keep it simple and just use four parts.
- TodoHeader
- TodoList
-TodoListItem
- TodoListItem
- TodoFooter
We could go a lot deeping creating buttons, inputs and checkboxes, but this is a great place start. Often you'll want to start with a single large control, and then start breaking it up into smaller pieces.
We could go a lot deeper into creating buttons, inputs and checkboxes, but this is a great place to start. Often you'll want to start with a single large control and then break it up into smaller pieces.
### TodoApp
@@ -32,13 +32,13 @@ export class TodoApp extends React.Component {
}
```
We'll start off with all of the file scaffolded and imported into our App. This will let us dive right into each control and see updates quickly.
We'll start off with all of the files scaffolded and imported into our App. This will let us dive right into each control and see updates quickly.
### TodoHeader
Our objective is to create a static version of our application, so we'll copy over the entire header tag, minus any function calls we may have added.
Our objective for now is to create a static version of our application, so we'll copy over the entire header tag from a previous step, minus any function calls we added.
> Note that since this is React we had to change `class` to `className`, otherwise nothing changes
> Note that since this is React we had to change `class` to `className`, but nothing else changes.
```jsx
return (
@@ -59,7 +59,7 @@ return (
### TodoListItem
Anytime you see repeated complex elements, that is usually a sign to create a new component. With a few props you can typically abstract all of those elements into a single component. This is certainly the case with Todos items.
Any time you see repeated complex elements, that is usually a sign that you should create a new component. With a few props you can typically abstract all of those elements into a single component. This is certainly the case with todo items.
```jsx
return (
@@ -71,4 +71,4 @@ return (
);
```
> Note that I've removed the title span as it was only needed to make targeting that text easier
> Note that I've removed the title span as it was only needed to make targeting that text easier.