Skip to content

Commit 077086c

Browse files
ryanflorenceryanflorence
committed
first
0 parents  commit 077086c

File tree

193 files changed

+116225
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

193 files changed

+116225
-0
lines changed

‎.eslintrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "react-app"
3+
}

‎.prettierrc

Whitespace-only changes.

‎01-imperative-to-declarative/exercise/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎01-imperative-to-declarative/exercise/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "01",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^16.5.0",
7+
"react-dom": "^16.5.0"
8+
},
9+
"devDependencies": {
10+
"react-scripts": "1.0.10"
11+
},
12+
"scripts": {
13+
"start": "react-scripts start",
14+
"build": "react-scripts build",
15+
"test": "react-scripts test --env=jsdom",
16+
"eject": "react-scripts eject"
17+
}
18+
}

‎01-imperative-to-declarative/exercise/public/favicon.ico

14.7 KB
Binary file not shown.

‎01-imperative-to-declarative/exercise/public/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>Advanced React.js Exercise</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
<!--
30+
This HTML file is a template.
31+
If you open it directly in the browser, you will see an empty page.
32+
33+
You can add webfonts, meta tags, or analytics to this file.
34+
The build step will place the bundled scripts into the <body> tag.
35+
36+
To begin the development, run `npm start` or `yarn start`.
37+
To create a production bundle, use `npm run build` or `yarn build`.
38+
-->
39+
</body>
40+
</html>

‎01-imperative-to-declarative/exercise/public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎01-imperative-to-declarative/exercise/src/App.solution.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { Component } from "react";
2+
3+
class DocumentTitle extends Component {
4+
componentDidMount() {
5+
document.title = this.props.children;
6+
}
7+
8+
componentDidUpdate() {
9+
document.title = this.props.children;
10+
}
11+
12+
render() {
13+
return null;
14+
}
15+
}
16+
17+
class App extends Component {
18+
state = {
19+
completed: 0,
20+
todos: ["Wake up", "Eat a taco", "Avoid twitter"]
21+
};
22+
23+
render() {
24+
let { todos, completed } = this.state;
25+
let incomplete = todos.length - completed;
26+
27+
return (
28+
<div className="app">
29+
<DocumentTitle>{`Todos (${incomplete})`}</DocumentTitle>
30+
31+
<h1>Todos ({incomplete})</h1>
32+
33+
<form
34+
onSubmit={event => {
35+
let todo = event.target.elements[0].value;
36+
event.preventDefault();
37+
event.target.reset();
38+
this.setState(state => {
39+
return { todos: state.todos.concat([todo]) };
40+
});
41+
}}
42+
>
43+
<input type="text" /> <button type="submit">Add</button>
44+
</form>
45+
46+
<ul>
47+
{todos.map(todo => (
48+
<li>
49+
<label>
50+
<input
51+
type="checkbox"
52+
onChange={event => {
53+
let checked = event.target.checked;
54+
this.setState(state => {
55+
return {
56+
completed: checked
57+
? state.completed + 1
58+
: state.completed - 1
59+
};
60+
});
61+
}}
62+
/>{" "}
63+
{todo}
64+
</label>
65+
</li>
66+
))}
67+
</ul>
68+
</div>
69+
);
70+
}
71+
}
72+
73+
export default App;

‎01-imperative-to-declarative/exercise/src/App.start.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*
2+
3+
Instructions:
4+
5+
Goal: Update the document title to say "Todos (todos.length)" as the data changes.
6+
7+
- Make a `<DocumentTitle/>` component
8+
- Pass it a prop with the string for the title
9+
- Use lifecycle hooks to keep it up to date with the data
10+
11+
Tips:
12+
13+
- You'll need two lifecycle hooks
14+
- You'll need string interpolation `it looks ${like} this`
15+
- the DOM API to update the title is `document.title = "some string"`
16+
17+
*/
18+
19+
import React, { Component } from "react";
20+
21+
class App extends Component {
22+
state = {
23+
completed: 0,
24+
todos: ["Wake up", "Eat a taco", "Avoid twitter"]
25+
};
26+
27+
render() {
28+
let { todos, completed } = this.state;
29+
let incomplete = todos.length - completed;
30+
31+
return (
32+
<div className="app">
33+
<h1>Todos ({incomplete})</h1>
34+
35+
<form
36+
onSubmit={event => {
37+
let todo = event.target.elements[0].value;
38+
event.preventDefault();
39+
event.target.reset();
40+
this.setState(state => {
41+
return { todos: state.todos.concat([todo]) };
42+
});
43+
}}
44+
>
45+
<input type="text" /> <button type="submit">Add</button>
46+
</form>
47+
48+
<ul>
49+
{todos.map(todo => (
50+
<li>
51+
<label>
52+
<input
53+
type="checkbox"
54+
onChange={event => {
55+
let checked = event.target.checked;
56+
this.setState(state => {
57+
return {
58+
completed: checked
59+
? state.completed + 1
60+
: state.completed - 1
61+
};
62+
});
63+
}}
64+
/>{" "}
65+
{todo}
66+
</label>
67+
</li>
68+
))}
69+
</ul>
70+
</div>
71+
);
72+
}
73+
}
74+
75+
export default App;

‎01-imperative-to-declarative/exercise/src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./lib/index.css";
4+
import App from "./App.start";
5+
6+
ReactDOM.render(<App />, document.getElementById("root"));

0 commit comments

Comments
 (0)