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

removing docs from master branch

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-25 10:12:40 -08:00
parent ca136c95b5
commit 54f3c205f4
364 changed files with 0 additions and 10581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/step1-05/demo/README.md
View File

@@ -1,74 +0,0 @@
# Building a Static Page
## 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.
- TodoHeader
- TodoList
-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.
### TodoApp
```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 {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
);
}
}
```
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.
### 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.
> Note that since this is React we had to change `class` to `className`, otherwise nothing 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
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.
```jsx
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

1
docs/step1-05/demo/index.html
View File

@@ -1 +0,0 @@
<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-05/demo/step1-05/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

16
docs/step1-05/demo/src/App.tsx
View File

@@ -1,16 +0,0 @@
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 {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
);
}
}

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

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

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

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

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

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

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

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

4
docs/step1-05/demo/src/index.tsx
View File

@@ -1,4 +0,0 @@
import React from "react";
import ReactDOM from "react-dom";
import { TodoApp } from "./App";
ReactDOM.render(<TodoApp />, document.getElementById("app"));

49
docs/step1-05/demo/src/style.css
View File

@@ -1,49 +0,0 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}

32
docs/step1-05/demo/step1-05/demo.js
View File

File diff suppressed because one or more lines are too long

1
docs/step1-05/demo/step1-05/demo.js.map
View File

File diff suppressed because one or more lines are too long