{
+export class Counter extends React.Component<{ text: string }, { counter: number }> {
constructor(props) {
super(props);
this.state = {
- counter: props.start
+ counter: 0
};
}
render() {
+ const { counter } = this.state;
+ const { text } = this.props;
return (
- {this.state.counter}
+ {text}: {counter}
);
diff --git a/step1-04/src/index.tsx b/step1-04/demo/src/index.tsx
similarity index 100%
rename from step1-04/src/index.tsx
rename to step1-04/demo/src/index.tsx
diff --git a/step1-04/final/index.html b/step1-04/final/index.html
new file mode 100644
index 0000000..454cef5
--- /dev/null
+++ b/step1-04/final/index.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/step1-04/final/src/App.tsx b/step1-04/final/src/App.tsx
new file mode 100644
index 0000000..f3dc2af
--- /dev/null
+++ b/step1-04/final/src/App.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Counter } from './components/Counter';
+
+export class App extends React.Component {
+ render() {
+ return (
+
+
My App
+
+
+
+ );
+ }
+}
diff --git a/step1-04/final/src/components/Button.css b/step1-04/final/src/components/Button.css
new file mode 100644
index 0000000..602b342
--- /dev/null
+++ b/step1-04/final/src/components/Button.css
@@ -0,0 +1,15 @@
+.Button {
+ display: block;
+ background: #0078d4;
+ color: white;
+ padding: 5px 10px;
+ outline: none;
+ border: none;
+}
+.Button:hover {
+ background: #005a9e;
+}
+
+.Button:active {
+ background: #004578;
+}
diff --git a/step1-04/final/src/components/Button.tsx b/step1-04/final/src/components/Button.tsx
new file mode 100644
index 0000000..f0410d2
--- /dev/null
+++ b/step1-04/final/src/components/Button.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.css';
+
+export const Button = props => {
+ return (
+
+ );
+};
diff --git a/step1-04/final/src/components/Counter.tsx b/step1-04/final/src/components/Counter.tsx
new file mode 100644
index 0000000..dd8fa71
--- /dev/null
+++ b/step1-04/final/src/components/Counter.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from './Button';
+
+export class Counter extends React.Component<{ text: string }, { counter: number }> {
+ constructor(props) {
+ super(props);
+ this.state = {
+ counter: 0
+ };
+ }
+ render() {
+ const { counter } = this.state;
+ const { text } = this.props;
+ return (
+
+ {text}: {counter}
+
+
+ );
+ }
+}
diff --git a/step1-04/final/src/index.tsx b/step1-04/final/src/index.tsx
new file mode 100644
index 0000000..1d9694f
--- /dev/null
+++ b/step1-04/final/src/index.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "./App";
+ReactDOM.render(, document.getElementById("app"));
diff --git a/step1-04/index.html b/step1-04/index.html
index a5fad94..dadfb94 100644
--- a/step1-04/index.html
+++ b/step1-04/index.html
@@ -1,8 +1,15 @@
-
-
-
+
+
+
+
+
+
+
-
-
diff --git a/step1-05/README.md b/step1-05/README.md
index 10b6f23..851fa36 100644
--- a/step1-05/README.md
+++ b/step1-05/README.md
@@ -1,7 +1,12 @@
+start with
+style/index/index/failing imports
+
demo
+
Header
ListItem
exercise
+
Footer
List
diff --git a/step1-05/demo/index.html b/step1-05/demo/index.html
new file mode 100644
index 0000000..de2c99d
--- /dev/null
+++ b/step1-05/demo/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/step1-05/src/App.tsx b/step1-05/demo/src/App.tsx
similarity index 100%
rename from step1-05/src/App.tsx
rename to step1-05/demo/src/App.tsx
diff --git a/step1-05/demo/src/components/TodoFooter.tsx b/step1-05/demo/src/components/TodoFooter.tsx
new file mode 100644
index 0000000..9b089ac
--- /dev/null
+++ b/step1-05/demo/src/components/TodoFooter.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const TodoFooter = (props: any) => {
+ return (
+
+ );
+};
diff --git a/step1-05/demo/src/components/TodoHeader.tsx b/step1-05/demo/src/components/TodoHeader.tsx
new file mode 100644
index 0000000..6de0123
--- /dev/null
+++ b/step1-05/demo/src/components/TodoHeader.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoHeader extends React.Component {
+ render() {
+ return ;
+ }
+}
diff --git a/step1-05/demo/src/components/TodoList.tsx b/step1-05/demo/src/components/TodoList.tsx
new file mode 100644
index 0000000..a26a8e5
--- /dev/null
+++ b/step1-05/demo/src/components/TodoList.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoList extends React.Component {
+ render() {
+ return ;
+ }
+}
diff --git a/step1-05/demo/src/components/TodoListItem.tsx b/step1-05/demo/src/components/TodoListItem.tsx
new file mode 100644
index 0000000..4238bce
--- /dev/null
+++ b/step1-05/demo/src/components/TodoListItem.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoListItem extends React.Component {
+ render() {
+ return ;
+ }
+}
diff --git a/step1-05/src/index.tsx b/step1-05/demo/src/index.tsx
similarity index 100%
rename from step1-05/src/index.tsx
rename to step1-05/demo/src/index.tsx
diff --git a/step1-05/demo/src/style.css b/step1-05/demo/src/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-05/demo/src/style.css
@@ -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 .active {
+ border-bottom: 2px solid blue;
+}
+
+.todos {
+ list-style: none;
+ padding: 0;
+}
+
+footer {
+ display: flex;
+}
+
+footer span {
+ flex-grow: 1;
+}
diff --git a/step1-05/exercise/index.html b/step1-05/exercise/index.html
new file mode 100644
index 0000000..de2c99d
--- /dev/null
+++ b/step1-05/exercise/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/step1-05/exercise/src/App.tsx b/step1-05/exercise/src/App.tsx
new file mode 100644
index 0000000..0f6e89a
--- /dev/null
+++ b/step1-05/exercise/src/App.tsx
@@ -0,0 +1,16 @@
+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 (
+
+
+
+
+
+ );
+ }
+}
diff --git a/step1-05/exercise/src/components/TodoFooter.tsx b/step1-05/exercise/src/components/TodoFooter.tsx
new file mode 100644
index 0000000..9b089ac
--- /dev/null
+++ b/step1-05/exercise/src/components/TodoFooter.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const TodoFooter = (props: any) => {
+ return (
+
+ );
+};
diff --git a/step1-05/src/components/TodoHeader.tsx b/step1-05/exercise/src/components/TodoHeader.tsx
similarity index 100%
rename from step1-05/src/components/TodoHeader.tsx
rename to step1-05/exercise/src/components/TodoHeader.tsx
diff --git a/step1-05/exercise/src/components/TodoList.tsx b/step1-05/exercise/src/components/TodoList.tsx
new file mode 100644
index 0000000..a26a8e5
--- /dev/null
+++ b/step1-05/exercise/src/components/TodoList.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoList extends React.Component {
+ render() {
+ return ;
+ }
+}
diff --git a/step1-05/src/components/TodoListItem.tsx b/step1-05/exercise/src/components/TodoListItem.tsx
similarity index 100%
rename from step1-05/src/components/TodoListItem.tsx
rename to step1-05/exercise/src/components/TodoListItem.tsx
diff --git a/step1-05/exercise/src/index.tsx b/step1-05/exercise/src/index.tsx
new file mode 100644
index 0000000..3289ec8
--- /dev/null
+++ b/step1-05/exercise/src/index.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { TodoApp } from "./App";
+ReactDOM.render(, document.getElementById("app"));
diff --git a/step1-05/exercise/src/style.css b/step1-05/exercise/src/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-05/exercise/src/style.css
@@ -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 .active {
+ border-bottom: 2px solid blue;
+}
+
+.todos {
+ list-style: none;
+ padding: 0;
+}
+
+footer {
+ display: flex;
+}
+
+footer span {
+ flex-grow: 1;
+}
diff --git a/step1-05/final/index.html b/step1-05/final/index.html
new file mode 100644
index 0000000..de2c99d
--- /dev/null
+++ b/step1-05/final/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/step1-05/final/src/App.tsx b/step1-05/final/src/App.tsx
new file mode 100644
index 0000000..0f6e89a
--- /dev/null
+++ b/step1-05/final/src/App.tsx
@@ -0,0 +1,16 @@
+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 (
+
+
+
+
+
+ );
+ }
+}
diff --git a/step1-05/src/components/TodoFooter.tsx b/step1-05/final/src/components/TodoFooter.tsx
similarity index 100%
rename from step1-05/src/components/TodoFooter.tsx
rename to step1-05/final/src/components/TodoFooter.tsx
diff --git a/step1-05/final/src/components/TodoHeader.tsx b/step1-05/final/src/components/TodoHeader.tsx
new file mode 100644
index 0000000..ba9b8b0
--- /dev/null
+++ b/step1-05/final/src/components/TodoHeader.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export class TodoHeader extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/step1-05/src/components/TodoList.tsx b/step1-05/final/src/components/TodoList.tsx
similarity index 100%
rename from step1-05/src/components/TodoList.tsx
rename to step1-05/final/src/components/TodoList.tsx
diff --git a/step1-05/final/src/components/TodoListItem.tsx b/step1-05/final/src/components/TodoListItem.tsx
new file mode 100644
index 0000000..1bff0f7
--- /dev/null
+++ b/step1-05/final/src/components/TodoListItem.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export class TodoListItem extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
diff --git a/step1-05/final/src/index.tsx b/step1-05/final/src/index.tsx
new file mode 100644
index 0000000..3289ec8
--- /dev/null
+++ b/step1-05/final/src/index.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { TodoApp } from "./App";
+ReactDOM.render(, document.getElementById("app"));
diff --git a/step1-05/final/src/style.css b/step1-05/final/src/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-05/final/src/style.css
@@ -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 .active {
+ border-bottom: 2px solid blue;
+}
+
+.todos {
+ list-style: none;
+ padding: 0;
+}
+
+footer {
+ display: flex;
+}
+
+footer span {
+ flex-grow: 1;
+}
diff --git a/step1-05/index.html b/step1-05/index.html
index de2c99d..dadfb94 100644
--- a/step1-05/index.html
+++ b/step1-05/index.html
@@ -1,9 +1,15 @@
-
-
-
-
+
+
+
+
+
+
+
-
-
diff --git a/step1-06/README.md b/step1-06/README.md
index 212b04c..696dc0c 100644
--- a/step1-06/README.md
+++ b/step1-06/README.md
@@ -6,6 +6,7 @@ demo
add state
pass to header and list
add filter class stuff
+controlled components (header) with consolelog
exercise
update footer to include todos
diff --git a/step1-06/src/components/TodoHeader.tsx b/step1-06/src/components/TodoHeader.tsx
index b113282..b63967b 100644
--- a/step1-06/src/components/TodoHeader.tsx
+++ b/step1-06/src/components/TodoHeader.tsx
@@ -8,7 +8,7 @@ export class TodoHeader extends React.Component {
);
}
+ _onChange = evt => {
+ this.setState({ labelInput: evt.target.value });
+ };
+
+ _onAdd = () => {
+ console.log(this.state.labelInput);
+ this.setState({ labelInput: '' });
+ };
}
diff --git a/step1-07/README.md b/step1-07/README.md
new file mode 100644
index 0000000..6b9c40d
--- /dev/null
+++ b/step1-07/README.md
@@ -0,0 +1,23 @@
+already done
+Types in header
+TodoApp methods
+
+filteredTodos in List
+
+demo
+Add Types to TodoApp
+change 'filter' value
+Types in List
+pass complete to List - show types, change complete to boolean/, filter
+add complete, pass to item (prop drilling)
+TodoListItemProps, extend, id, complete (possible abstraction)
+Demo how you can't add random things to TodoListItem or this.props now
+add complete to List item
+
+exercise
+
+Add types to footer
+Add onClick to button
+Add types to header
+Add setFilter to filter buttons
+add 'addTodo' to onAdd function
diff --git a/step1-07/src/TodoApp.tsx b/step1-07/src/TodoApp.tsx
index 34f81b7..b24da27 100644
--- a/step1-07/src/TodoApp.tsx
+++ b/step1-07/src/TodoApp.tsx
@@ -2,10 +2,11 @@ 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 {
+export class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
@@ -25,6 +26,8 @@ export class TodoApp extends React.Component {
);
}
+ // business logic
+
private _addTodo = label => {
const { todos } = this.state;
const id = index++;
@@ -34,15 +37,6 @@ export class TodoApp extends React.Component {
});
};
- 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 {
});
};
- 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 = {};
diff --git a/webpack.config.js b/webpack.config.js
index fbf0185..d23dfe9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,7 +11,7 @@ const nonWebpackedEntries = [];
function* getEntryPoint(step) {
if (step.includes('step') || step.includes('playground')) {
- for (let prefix of ['', 'demo/', 'exercise/']) {
+ for (let prefix of ['', 'demo/', 'exercise/', 'final/']) {
for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {
const entryRequest = `./${step}/${prefix}src/index${suffix}`;
if (fs.existsSync(entryRequest)) {