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

adding back docs

Browse Source
This commit is contained in:
Ken
2019-02-22 20:25:09 -08:00
parent 78368cdf39
commit f70417f6ae
166 changed files with 4344 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/step1-07/demo/index.html Normal file
View File

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

21
docs/step1-07/src/TodoApp.tsx → docs/step1-07/demo/src/TodoApp.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todos, FilterTypes } from './TodoApp.types';
let index = 0;
@@ -25,6 +26,8 @@ export class TodoApp extends React.Component<any, any> {
);
}
// business logic
private _addTodo = label => {
const { todos } = this.state;
const id = index++;
@@ -34,15 +37,6 @@ export class TodoApp extends React.Component<any, any> {
});
};
private _remove = id => {
const newTodos = { ...this.state.todos };
delete newTodos[id];
this.setState({
todos: newTodos
});
};
private _complete = id => {
const newTodos = { ...this.state.todos };
newTodos[id].completed = !newTodos[id].completed;
@@ -52,15 +46,6 @@ export class TodoApp extends React.Component<any, any> {
});
};
private _edit = (id, label) => {
const newTodos = { ...this.state.todos };
newTodos[id] = { ...newTodos[id], label };
this.setState({
todos: newTodos
});
};
private _clear = () => {
const { todos } = this.state;
const newTodos = {};

0
docs/step1-07/src/TodoApp.types.ts → docs/step1-07/demo/src/TodoApp.types.ts
View File

14
docs/step1-07/demo/src/components/TodoFooter.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Todos } from '../TodoApp.types';
export const TodoFooter = (props: any) => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return (
<footer>
<span>
{itemCount} item{itemCount > 1 ? 's' : ''} left
</span>
<button className="submit">Clear Completed</button>
</footer>
);
};

31
docs/step1-07/demo/src/components/TodoHeader.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import { FilterTypes } from '../TodoApp.types';
export class TodoHeader extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = { labelInput: '' };
}
render() {
const { filter } = this.props;
return (
<header>
<h1>todos</h1>
<div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
</nav>
</header>
);
}
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};
}

21
docs/step1-07/demo/src/components/TodoList.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { TodoListItem } from './TodoListItem';
import { FilterTypes, Todos } from '../TodoApp.types';
export class TodoList extends React.Component<any, any> {
render() {
const { filter, todos, complete } = this.props;
const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
});
return (
<ul className="todos">
{filteredTodos.map(id => (
<TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
))}
</ul>
);
}
}

16
docs/step1-07/demo/src/components/TodoListItem.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { TodoItem } from '../TodoApp.types';
export class TodoListItem extends React.Component<any, any> {
render() {
const { label, completed } = this.props;
return (
<li className="todo">
<label>
<input type="checkbox" checked={completed} /> {label}
</label>
</li>
);
}
}

0
docs/step1-07/src/index.tsx → docs/step1-07/demo/src/index.tsx
View File

19
docs/step1-07/src/style.css → docs/step1-07/demo/src/style.css
View File

@@ -3,19 +3,21 @@ body {
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
width: 80%;
flex-grow: 1;
margin-right: 10px;
}
.add {
margin-left: 5%;
}
.button {
.submit {
border: none;
padding: 5px 10px;
}
@@ -28,6 +30,7 @@ h1 {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
@@ -44,7 +47,3 @@ footer {
footer span {
flex-grow: 1;
}
.hidden {
display: none;
}

304
docs/step1-07/demo/step1-07/demo.js Normal file
View File

File diff suppressed because one or more lines are too long

2
docs/step1-07/index.html → docs/step1-07/exercise/index.html
View File

@@ -3,7 +3,7 @@
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
<script type="text/javascript" src="../step1-07/step1-07.js"></script></body>
<script src="../../step1-07/exercise/step1-07/exercise.js"></script></body>
</html>

69
docs/step1-07/exercise/src/TodoApp.tsx Normal file
View File

@@ -0,0 +1,69 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todos, FilterTypes } from './TodoApp.types';
let index = 0;
export class TodoApp extends React.Component<any, { todos: Todos; filter: FilterTypes }> {
constructor(props) {
super(props);
this.state = {
todos: {},
filter: 'all'
};
}
render() {
const { filter, todos } = this.state;
return (
<div>
<TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
<TodoList complete={this._complete} todos={todos} filter={filter} />
<TodoFooter clear={this._clear} todos={todos} />
</div>
);
}
// business logic
private _addTodo = label => {
const { todos } = this.state;
const id = index++;
this.setState({
todos: { ...todos, [id]: { label, completed: false } }
});
};
private _complete = id => {
const newTodos = { ...this.state.todos };
newTodos[id].completed = !newTodos[id].completed;
this.setState({
todos: newTodos
});
};
private _clear = () => {
const { todos } = this.state;
const newTodos = {};
Object.keys(this.state.todos).forEach(id => {
if (!todos[id].completed) {
newTodos[id] = todos[id];
}
});
this.setState({
todos: newTodos
});
};
private _setFilter = filter => {
this.setState({
filter: filter
});
};
}

10
docs/step1-07/exercise/src/TodoApp.types.ts Normal file
View File

@@ -0,0 +1,10 @@
export type FilterTypes = 'all' | 'active' | 'completed';
export interface TodoItem {
label: string;
completed: boolean;
}
export interface Todos {
[id: string]: TodoItem;
}

14
docs/step1-07/exercise/src/components/TodoFooter.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Todos } from '../TodoApp.types';
export const TodoFooter = props => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return (
<footer>
<span>
{itemCount} item{itemCount > 1 ? 's' : ''} left
</span>
<button className="submit">Clear Completed</button>
</footer>
);
};

31
docs/step1-07/exercise/src/components/TodoHeader.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import { FilterTypes } from '../TodoApp.types';
export class TodoHeader extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = { labelInput: '' };
}
render() {
const { filter } = this.props;
return (
<header>
<h1>todos</h1>
<div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
</nav>
</header>
);
}
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};
}

0
docs/step1-07/src/components/TodoList.tsx → docs/step1-07/exercise/src/components/TodoList.tsx
View File

0
docs/step1-07/src/components/TodoListItem.tsx → docs/step1-07/exercise/src/components/TodoListItem.tsx
View File

4
docs/step1-07/exercise/src/index.tsx Normal file
View File

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

49
docs/step1-07/exercise/src/style.css Normal file
View File

@@ -0,0 +1,49 @@
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;
}

304
docs/step1-07/exercise/step1-07/exercise.js Normal file
View File

File diff suppressed because one or more lines are too long

9
docs/step1-07/final/index.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
<script src="../../step1-07/final/step1-07/final.js"></script></body>
</html>

69
docs/step1-07/final/src/TodoApp.tsx Normal file
View File

@@ -0,0 +1,69 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todos, FilterTypes } from './TodoApp.types';
let index = 0;
export class TodoApp extends React.Component<any, { todos: Todos; filter: FilterTypes }> {
constructor(props) {
super(props);
this.state = {
todos: {},
filter: 'all'
};
}
render() {
const { filter, todos } = this.state;
return (
<div>
<TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
<TodoList complete={this._complete} todos={todos} filter={filter} />
<TodoFooter clear={this._clear} todos={todos} />
</div>
);
}
// business logic
private _addTodo = label => {
const { todos } = this.state;
const id = index++;
this.setState({
todos: { ...todos, [id]: { label, completed: false } }
});
};
private _complete = id => {
const newTodos = { ...this.state.todos };
newTodos[id].completed = !newTodos[id].completed;
this.setState({
todos: newTodos
});
};
private _clear = () => {
const { todos } = this.state;
const newTodos = {};
Object.keys(this.state.todos).forEach(id => {
if (!todos[id].completed) {
newTodos[id] = todos[id];
}
});
this.setState({
todos: newTodos
});
};
private _setFilter = filter => {
this.setState({
filter: filter
});
};
}

10
docs/step1-07/final/src/TodoApp.types.ts Normal file
View File

@@ -0,0 +1,10 @@
export type FilterTypes = 'all' | 'active' | 'completed';
export interface TodoItem {
label: string;
completed: boolean;
}
export interface Todos {
[id: string]: TodoItem;
}

2
docs/step1-07/src/components/TodoFooter.tsx → docs/step1-07/final/src/components/TodoFooter.tsx
View File

@@ -12,7 +12,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
<span>
{itemCount} item{itemCount > 1 ? 's' : ''} left
</span>
<button onClick={() => props.clear()} className="button">
<button onClick={() => props.clear()} className="submit">
Clear Completed
</button>
</footer>

18
docs/step1-07/src/components/TodoHeader.tsx → docs/step1-07/final/src/components/TodoHeader.tsx
View File

@@ -16,13 +16,15 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
render() {
const { filter, setFilter } = this.props;
return (
<div>
<header>
<h1>todos</h1>
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button onClick={this._onAdd} className="button add">
Add
</button>
<div className="filter">
<div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button onClick={this._onAdd} className="submit">
Add
</button>
</div>
<nav className="filter">
<button onClick={() => setFilter('all')} className={filter == 'all' ? 'completed' : ''}>
all
</button>
@@ -32,8 +34,8 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
<button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'completed' : ''}>
completed
</button>
</div>
</div>
</nav>
</header>
);
}

27
docs/step1-07/final/src/components/TodoList.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { TodoListItem } from './TodoListItem';
import { FilterTypes, Todos } from '../TodoApp.types';
interface TodoListProps {
complete: (id: string) => void;
todos: Todos;
filter: FilterTypes;
}
export class TodoList extends React.Component<TodoListProps, any> {
render() {
const { filter, todos, complete } = this.props;
const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
});
return (
<ul className="todos">
{filteredTodos.map(id => (
<TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
))}
</ul>
);
}
}

21
docs/step1-07/final/src/components/TodoListItem.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { TodoItem } from '../TodoApp.types';
interface TodoListItemProps extends TodoItem {
id: string;
complete: (id: string) => void;
}
export class TodoListItem extends React.Component<TodoListItemProps, any> {
render() {
const { label, completed, complete, id } = this.props;
return (
<li className="todo">
<label>
<input type="checkbox" checked={completed} onChange={() => complete(id)} /> {label}
</label>
</li>
);
}
}

4
docs/step1-07/final/src/index.tsx Normal file
View File

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

49
docs/step1-07/final/src/style.css Normal file
View File

@@ -0,0 +1,49 @@
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;
}

62
docs/step1-07/step1-07.js → docs/step1-07/final/step1-07/final.js
View File

@@ -81,7 +81,7 @@
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./step1-07/src/index.tsx");
/******/ return __webpack_require__(__webpack_require__.s = "./step1-07/final/src/index.tsx");
/******/ })
/************************************************************************/
/******/ ({
@@ -229,75 +229,75 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
/***/ }),
/***/ "./step1-07/src/TodoApp.tsx":
/*!**********************************!*\
!*** ./step1-07/src/TodoApp.tsx ***!
\**********************************/
/***/ "./step1-07/final/src/TodoApp.tsx":
/*!****************************************!*\
!*** ./step1-07/final/src/TodoApp.tsx ***!
\****************************************/
/*! exports provided: TodoApp */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoApp\", function() { return TodoApp; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/TodoFooter */ \"./step1-07/src/components/TodoFooter.tsx\");\n/* harmony import */ var _components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/TodoHeader */ \"./step1-07/src/components/TodoHeader.tsx\");\n/* harmony import */ var _components_TodoList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/TodoList */ \"./step1-07/src/components/TodoList.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n\n\n\n\nvar index = 0;\nvar TodoApp = /** @class */ (function (_super) {\n __extends(TodoApp, _super);\n function TodoApp(props) {\n var _this = _super.call(this, props) || this;\n _this._addTodo = function (label) {\n var _a;\n var todos = _this.state.todos;\n var id = index++;\n _this.setState({\n todos: __assign({}, todos, (_a = {}, _a[id] = { label: label, completed: false }, _a))\n });\n };\n _this._remove = function (id) {\n var newTodos = __assign({}, _this.state.todos);\n delete newTodos[id];\n _this.setState({\n todos: newTodos\n });\n };\n _this._complete = function (id) {\n var newTodos = __assign({}, _this.state.todos);\n newTodos[id].completed = !newTodos[id].completed;\n _this.setState({\n todos: newTodos\n });\n };\n _this._edit = function (id, label) {\n var newTodos = __assign({}, _this.state.todos);\n newTodos[id] = __assign({}, newTodos[id], { label: label });\n _this.setState({\n todos: newTodos\n });\n };\n _this._clear = function () {\n var todos = _this.state.todos;\n var newTodos = {};\n Object.keys(_this.state.todos).forEach(function (id) {\n if (!todos[id].completed) {\n newTodos[id] = todos[id];\n }\n });\n _this.setState({\n todos: newTodos\n });\n };\n _this._setFilter = function (filter) {\n _this.setState({\n filter: filter\n });\n };\n _this.state = {\n todos: {},\n filter: 'all'\n };\n return _this;\n }\n TodoApp.prototype.render = function () {\n var _a = this.state, filter = _a.filter, todos = _a.todos;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__[\"TodoHeader\"], { addTodo: this._addTodo, setFilter: this._setFilter, filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoList__WEBPACK_IMPORTED_MODULE_3__[\"TodoList\"], { complete: this._complete, todos: todos, filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__[\"TodoFooter\"], { clear: this._clear, todos: todos })));\n };\n return TodoApp;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/src/TodoApp.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoApp\", function() { return TodoApp; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/TodoFooter */ \"./step1-07/final/src/components/TodoFooter.tsx\");\n/* harmony import */ var _components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/TodoHeader */ \"./step1-07/final/src/components/TodoHeader.tsx\");\n/* harmony import */ var _components_TodoList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/TodoList */ \"./step1-07/final/src/components/TodoList.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n\n\n\n\nvar index = 0;\nvar TodoApp = /** @class */ (function (_super) {\n __extends(TodoApp, _super);\n function TodoApp(props) {\n var _this = _super.call(this, props) || this;\n // business logic\n _this._addTodo = function (label) {\n var _a;\n var todos = _this.state.todos;\n var id = index++;\n _this.setState({\n todos: __assign({}, todos, (_a = {}, _a[id] = { label: label, completed: false }, _a))\n });\n };\n _this._complete = function (id) {\n var newTodos = __assign({}, _this.state.todos);\n newTodos[id].completed = !newTodos[id].completed;\n _this.setState({\n todos: newTodos\n });\n };\n _this._clear = function () {\n var todos = _this.state.todos;\n var newTodos = {};\n Object.keys(_this.state.todos).forEach(function (id) {\n if (!todos[id].completed) {\n newTodos[id] = todos[id];\n }\n });\n _this.setState({\n todos: newTodos\n });\n };\n _this._setFilter = function (filter) {\n _this.setState({\n filter: filter\n });\n };\n _this.state = {\n todos: {},\n filter: 'all'\n };\n return _this;\n }\n TodoApp.prototype.render = function () {\n var _a = this.state, filter = _a.filter, todos = _a.todos;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoHeader__WEBPACK_IMPORTED_MODULE_2__[\"TodoHeader\"], { addTodo: this._addTodo, setFilter: this._setFilter, filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoList__WEBPACK_IMPORTED_MODULE_3__[\"TodoList\"], { complete: this._complete, todos: todos, filter: filter }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_TodoFooter__WEBPACK_IMPORTED_MODULE_1__[\"TodoFooter\"], { clear: this._clear, todos: todos })));\n };\n return TodoApp;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/final/src/TodoApp.tsx?");
/***/ }),
/***/ "./step1-07/src/components/TodoFooter.tsx":
/*!************************************************!*\
!*** ./step1-07/src/components/TodoFooter.tsx ***!
\************************************************/
/***/ "./step1-07/final/src/components/TodoFooter.tsx":
/*!******************************************************!*\
!*** ./step1-07/final/src/components/TodoFooter.tsx ***!
\******************************************************/
/*! exports provided: TodoFooter */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoFooter\", function() { return TodoFooter; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar TodoFooter = function (props) {\n var itemCount = Object.keys(props.todos).filter(function (id) { return !props.todos[id].completed; }).length;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"footer\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null,\n itemCount,\n \" item\",\n itemCount > 1 ? 's' : '',\n \" left\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return props.clear(); }, className: \"button\" }, \"Clear Completed\")));\n};\n\n\n//# sourceURL=webpack:///./step1-07/src/components/TodoFooter.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoFooter\", function() { return TodoFooter; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nvar TodoFooter = function (props) {\n var itemCount = Object.keys(props.todos).filter(function (id) { return !props.todos[id].completed; }).length;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"footer\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null,\n itemCount,\n \" item\",\n itemCount > 1 ? 's' : '',\n \" left\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return props.clear(); }, className: \"submit\" }, \"Clear Completed\")));\n};\n\n\n//# sourceURL=webpack:///./step1-07/final/src/components/TodoFooter.tsx?");
/***/ }),
/***/ "./step1-07/src/components/TodoHeader.tsx":
/*!************************************************!*\
!*** ./step1-07/src/components/TodoHeader.tsx ***!
\************************************************/
/***/ "./step1-07/final/src/components/TodoHeader.tsx":
/*!******************************************************!*\
!*** ./step1-07/final/src/components/TodoHeader.tsx ***!
\******************************************************/
/*! exports provided: TodoHeader */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoHeader\", function() { return TodoHeader; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoHeader = /** @class */ (function (_super) {\n __extends(TodoHeader, _super);\n function TodoHeader(props) {\n var _this = _super.call(this, props) || this;\n _this._onChange = function (evt) {\n _this.setState({ labelInput: evt.target.value });\n };\n _this._onAdd = function () {\n _this.props.addTodo(_this.state.labelInput);\n _this.setState({ labelInput: '' });\n };\n _this.state = { labelInput: '' };\n return _this;\n }\n TodoHeader.prototype.render = function () {\n var _a = this.props, filter = _a.filter, setFilter = _a.setFilter;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h1\", null, \"todos\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { value: this.state.labelInput, onChange: this._onChange, className: \"textfield\", placeholder: \"add todo\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: this._onAdd, className: \"button add\" }, \"Add\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", { className: \"filter\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return setFilter('all'); }, className: filter == 'all' ? 'active' : '' }, \"all\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return setFilter('active'); }, className: filter == 'active' ? 'active' : '' }, \"active\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return setFilter('completed'); }, className: filter == 'completed' ? 'active' : '' }, \"completed\"))));\n };\n return TodoHeader;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/src/components/TodoHeader.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoHeader\", function() { return TodoHeader; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoHeader = /** @class */ (function (_super) {\n __extends(TodoHeader, _super);\n function TodoHeader(props) {\n var _this = _super.call(this, props) || this;\n _this._onChange = function (evt) {\n _this.setState({ labelInput: evt.target.value });\n };\n _this._onAdd = function () {\n _this.props.addTodo(_this.state.labelInput);\n _this.setState({ labelInput: '' });\n };\n _this.state = { labelInput: '' };\n return _this;\n }\n TodoHeader.prototype.render = function () {\n var _a = this.props, filter = _a.filter, setFilter = _a.setFilter;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"header\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"h1\", null, \"todos\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", { className: \"addTodo\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { value: this.state.labelInput, onChange: this._onChange, className: \"textfield\", placeholder: \"add todo\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: this._onAdd, className: \"submit\" }, \"Add\")),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"nav\", { className: \"filter\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return setFilter('all'); }, className: filter == 'all' ? 'completed' : '' }, \"all\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return setFilter('active'); }, className: filter == 'active' ? 'completed' : '' }, \"active\"),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"button\", { onClick: function () { return setFilter('completed'); }, className: filter == 'completed' ? 'completed' : '' }, \"completed\"))));\n };\n return TodoHeader;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/final/src/components/TodoHeader.tsx?");
/***/ }),
/***/ "./step1-07/src/components/TodoList.tsx":
/*!**********************************************!*\
!*** ./step1-07/src/components/TodoList.tsx ***!
\**********************************************/
/***/ "./step1-07/final/src/components/TodoList.tsx":
/*!****************************************************!*\
!*** ./step1-07/final/src/components/TodoList.tsx ***!
\****************************************************/
/*! exports provided: TodoList */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoList\", function() { return TodoList; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _TodoListItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TodoListItem */ \"./step1-07/src/components/TodoListItem.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n\n\nvar TodoList = /** @class */ (function (_super) {\n __extends(TodoList, _super);\n function TodoList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoList.prototype.render = function () {\n var _a = this.props, filter = _a.filter, todos = _a.todos, complete = _a.complete;\n var filteredTodos = Object.keys(todos).filter(function (id) {\n return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n });\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ul\", { className: \"todos\" }, filteredTodos.map(function (id) { return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoListItem__WEBPACK_IMPORTED_MODULE_1__[\"TodoListItem\"], __assign({ key: id, id: id, complete: complete }, todos[id]))); })));\n };\n return TodoList;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/src/components/TodoList.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoList\", function() { return TodoList; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _TodoListItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TodoListItem */ \"./step1-07/final/src/components/TodoListItem.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n\n\nvar TodoList = /** @class */ (function (_super) {\n __extends(TodoList, _super);\n function TodoList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoList.prototype.render = function () {\n var _a = this.props, filter = _a.filter, todos = _a.todos, complete = _a.complete;\n var filteredTodos = Object.keys(todos).filter(function (id) {\n return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n });\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"ul\", { className: \"todos\" }, filteredTodos.map(function (id) { return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoListItem__WEBPACK_IMPORTED_MODULE_1__[\"TodoListItem\"], __assign({ key: id, id: id, complete: complete }, todos[id]))); })));\n };\n return TodoList;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/final/src/components/TodoList.tsx?");
/***/ }),
/***/ "./step1-07/src/components/TodoListItem.tsx":
/*!**************************************************!*\
!*** ./step1-07/src/components/TodoListItem.tsx ***!
\**************************************************/
/***/ "./step1-07/final/src/components/TodoListItem.tsx":
/*!********************************************************!*\
!*** ./step1-07/final/src/components/TodoListItem.tsx ***!
\********************************************************/
/*! exports provided: TodoListItem */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoListItem\", function() { return TodoListItem; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoListItem = /** @class */ (function (_super) {\n __extends(TodoListItem, _super);\n function TodoListItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoListItem.prototype.render = function () {\n var _a = this.props, label = _a.label, completed = _a.completed, complete = _a.complete, id = _a.id;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", { className: \"todo\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { type: \"checkbox\", checked: completed, onChange: function () { return complete(id); } }),\n \" \",\n label)));\n };\n return TodoListItem;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/src/components/TodoListItem.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TodoListItem\", function() { return TodoListItem; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n\nvar TodoListItem = /** @class */ (function (_super) {\n __extends(TodoListItem, _super);\n function TodoListItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n TodoListItem.prototype.render = function () {\n var _a = this.props, label = _a.label, completed = _a.completed, complete = _a.complete, id = _a.id;\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"li\", { className: \"todo\" },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"label\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"input\", { type: \"checkbox\", checked: completed, onChange: function () { return complete(id); } }),\n \" \",\n label)));\n };\n return TodoListItem;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));\n\n\n\n//# sourceURL=webpack:///./step1-07/final/src/components/TodoListItem.tsx?");
/***/ }),
/***/ "./step1-07/src/index.tsx":
/*!********************************!*\
!*** ./step1-07/src/index.tsx ***!
\********************************/
/***/ "./step1-07/final/src/index.tsx":
/*!**************************************!*\
!*** ./step1-07/final/src/index.tsx ***!
\**************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _TodoApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TodoApp */ \"./step1-07/src/TodoApp.tsx\");\n\n\n\nreact_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoApp__WEBPACK_IMPORTED_MODULE_2__[\"TodoApp\"], null), document.getElementById('app'));\n\n\n//# sourceURL=webpack:///./step1-07/src/index.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _TodoApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TodoApp */ \"./step1-07/final/src/TodoApp.tsx\");\n\n\n\nreact_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TodoApp__WEBPACK_IMPORTED_MODULE_2__[\"TodoApp\"], null), document.getElementById('app'));\n\n\n//# sourceURL=webpack:///./step1-07/final/src/index.tsx?");
/***/ })