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

updates

Browse Source
This commit is contained in:
Micah Godbolt
2019-03-03 17:51:31 -08:00
parent 2da055ff1d
commit 3acd7d22ec
24 changed files with 511 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
step1-05/TodoApp.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<body>
<header>
<h1>todos</h1>
<div class="addTodo">
<input class="textfield" placeholder="add todo" />
<button class="submit">Add</button>
</div>
<nav class="filter">
<button class="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> Todo 1</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<footer>
<span>4 items left</span>
<button class="submit">Clear Completed</button>
</footer>
</body>
</html>

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

@@ -1,7 +1,5 @@
# Building a Static Page
## Demo
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
@@ -9,66 +7,57 @@ To start off our todo application we are going to follow the steps outlined in [
- TodoListItem
- TodoFooter
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.
You can find the HTML for our application in `step1-05/TodoApp.html`
### TodoApp
## TodoHeader
We are going to store all of our components inside of a `components` folder. Lets create that now. We'll then start with the `TodoHeader` inside of a file called `TodoHeader.tsx`. This file format tells our application that this file includes React code written in Typescript.
> We'll talk about Typescript soon, but for now know that all valid JavaScript is valid Typescript
```jsx
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component {
export class TodoHeader extends React.Component<any, any> {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
<header>
<h1>todos</h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className="completed">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
);
}
}
```
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 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`, but nothing else changes.
```jsx
return (
<header>
<h1>todos</h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className="completed">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
);
```
### TodoListItem
## TodoListItem
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 (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
import React from 'react';
export class TodolistItem extends React.Component<any, any> {
render() {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
}
```
> Note that I've removed the title span as it was only needed to make targeting that text easier.
> Note that this control could also be created as a function instead of a class: `export const TodoListItem = (props) => {}`

7
step1-05/demo/src/App.tsx
View File

@@ -1,15 +1,10 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component<any, any> {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
<p>Hello World</p>
</div>
);
}

9
step1-05/demo/src/components/TodoFooter.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
export const TodoFooter = (props: any) => {
return (
<footer>
<div>Footer</div>
</footer>
);
};

11
step1-05/demo/src/components/TodoHeader.tsx
View File

@@ -1,11 +0,0 @@
import React from 'react';
export class TodoHeader extends React.Component<any, any> {
render() {
return (
<header>
<div>Header</div>
</header>
);
}
}

11
step1-05/demo/src/components/TodoList.tsx
View File

@@ -1,11 +0,0 @@
import React from 'react';
export class TodoList extends React.Component<any, any> {
render() {
return (
<div>
<span>List</span>
</div>
);
}
}

7
step1-05/demo/src/components/TodoListItem.tsx
View File

@@ -1,7 +0,0 @@
import React from 'react';
export class TodoListItem extends React.Component<any, any> {
render() {
return <div />;
}
}

6
step1-05/exercise/README.md
View File

@@ -1,14 +1,12 @@
## 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. Add a TodoFooter component, copying over the `<footer>` tag and all of its children from `TodoApp.html` in the `step1-05` folder.
2. Remove any `onclick` properties, and change `class` to `className`
### TodoList
1. Update the TodoList component like you did with the footer.
1. Add a TodoList component like you did with the footer.
2. Import TodoListItem and add 4 of them inside of the `<ul>`
3. Bonus points for using a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) loop or using [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to create 4 list items based on the array `[1,2,3,4]`