Skip to content

Commit b15e25b

Browse files
erickcm2kerickcm2k
committed
lectures 13-15
1 parent f5a77a0 commit b15e25b

9 files changed

Lines changed: 181 additions & 0 deletions

File tree

‎.DS_Store‎

2 KB
Binary file not shown.

‎webDevelopmentClub-ESCOM/.DS_Store‎

0 Bytes
Binary file not shown.

‎webDevelopmentClub-ESCOM/homework/.DS_Store‎

0 Bytes
Binary file not shown.

‎webDevelopmentClub-ESCOM/lectures/.DS_Store‎

0 Bytes
Binary file not shown.

‎webDevelopmentClub-ESCOM/lectures/Class 13: Costume Hooks & Context/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Class:
2+
- [Slides](https://docs.google.com/presentation/d/19sKRqmm9qzNg_5FKSbbqbbSv7j20yPa1YFQbmdO3RbA/edit?usp=sharing)
3+
4+
# Interesting Links:
5+
- [The Async Await Episode I Promised](https://youtu.be/vn3tm0quoqE)
6+
- [React Router Course](https://www.youtube.com/c/uidotdev/videos)
7+
- [React Context](https://dev.to/spukas/avoid-prop-drilling-in-react-with-context-api-1ne5)
8+
- [React Context 2](https://www.smashingmagazine.com/2020/01/introduction-react-context-api/)
9+
- [React Context 3](https://www.freecodecamp.org/news/react-context-in-5-minutes/)
10+
- [React Context - Kent](https://kentcdodds.com/blog/how-to-use-react-context-effectively)
11+
12+
# Videos:
13+
- [JavaScript, ES6 - Lecture 1 - CS50's Mobile App Development with React Native](https://youtu.be/3Ay2lS6tm4M)
14+
- [React, Props, State - Lecture 2 - CS50's Mobile App Development with React Native](https://youtu.be/7O43VDOlQ_o)
15+
- [Learn React with Kent C. Dodds](https://youtu.be/zthIUs2w_c8)
16+

‎webDevelopmentClub-ESCOM/lectures/Class 14: Reducer & Old React/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Class:
2+
- [Slides](https://docs.google.com/presentation/d/11vf4FdcOJFemCj7NBSwTWQWV-beFvTpRPCQfS6B7oAY/edit?usp=sharing)
3+
4+
# Interesting Links:
5+
- [The Async Await Episode I Promised](https://youtu.be/vn3tm0quoqE)
6+
- [React Router Course](https://www.youtube.com/c/uidotdev/videos)
7+
- [React Context - Kent](https://kentcdodds.com/blog/how-to-use-react-context-effectively)
8+
- [React useCallback - Kent](https://kentcdodds.com/blog/usememo-and-usecallback)
9+
- [React Docs](https://reactjs.org/docs/hooks-reference.html#usecallback)
10+
- [Thinking in React Hooks](https://wattenberger.com/blog/react-hooks)
11+
12+
# Videos:
13+
- [JavaScript, ES6 - Lecture 1 - CS50's Mobile App Development with React Native](https://youtu.be/3Ay2lS6tm4M)
14+
- [React, Props, State - Lecture 2 - CS50's Mobile App Development with React Native](https://youtu.be/7O43VDOlQ_o)
15+
- [Learn React with Kent C. Dodds](https://youtu.be/zthIUs2w_c8)
16+
- [Learn useReducer](hhttps://www.youtube.com/watch?v=XUxQSzpgAuI)

‎webDevelopmentClub-ESCOM/lectures/Class 14: Reducer & Old React/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Hello World</title>
6+
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
8+
9+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="text/babel">
14+
const reducer = ({ count, step }, { type, data }) => {
15+
if (type === "increment") return { count: count + step, step };
16+
if (type === "decrement") return { count: count - step, step };
17+
if (type === "reset") return { count: 0, step };
18+
if (type === "changeStep") return { count, step: data };
19+
20+
throw new Error("algo salio mal");
21+
};
22+
23+
const Counter = ({}) => {
24+
const [state, dispatch] = React.useReducer(reducer, {
25+
count: 0,
26+
step: 1,
27+
});
28+
const { count, step } = state;
29+
30+
return (
31+
<div>
32+
<h2>The count is {count}</h2>
33+
<input
34+
type="range"
35+
value={step}
36+
min={1}
37+
max={10}
38+
onChange={(e) =>
39+
dispatch({ type: "changeStep", data: +e.target.value })
40+
}
41+
/>
42+
<button onClick={() => dispatch({ type: "increment" })}>
43+
+{step}
44+
</button>
45+
<button onClick={() => dispatch({ type: "decrement" })}>
46+
-{step}
47+
</button>
48+
</div>
49+
);
50+
};
51+
52+
class Counter2 extends React.Component {
53+
constructor(props) {
54+
super(props);
55+
56+
this.state = { count: 0, step: 1 };
57+
this.changeStep = this.changeStep.bind(this)
58+
}
59+
60+
changeStep(newStep) {
61+
this.setState({ ...this.state, step: newStep });
62+
}
63+
64+
increment() {
65+
this.setState({
66+
...this.state,
67+
count: this.state.count + this.state.step,
68+
});
69+
}
70+
71+
decrement() {
72+
this.setState({
73+
...this.state,
74+
count: this.state.count - this.state.step,
75+
});
76+
}
77+
78+
render() {
79+
return (
80+
<div>
81+
<h2>The count is {this.state.count}</h2>
82+
<input
83+
type="range"
84+
value={this.state.step}
85+
min={1}
86+
max={10}
87+
onChange={(e) => this.changeStep(+e.target.value)}
88+
/>
89+
<button onClick={this.increment}>+{this.state.step}</button>
90+
<button onClick={this.decrement}>-{this.state.step}</button>
91+
</div>
92+
);
93+
}
94+
}
95+
96+
ReactDOM.render(<Counter2 />, document.getElementById("root"));
97+
</script>
98+
</body>
99+
</html>

‎webDevelopmentClub-ESCOM/lectures/Class 15: Code Splitting/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Class:
2+
- [Slides](https://docs.google.com/presentation/d/11vf4FdcOJFemCj7NBSwTWQWV-beFvTpRPCQfS6B7oAY/edit?usp=sharing)
3+
4+
# Interesting Links:
5+
- [The Async Await Episode I Promised](https://youtu.be/vn3tm0quoqE)
6+
- [React Router Course](https://www.youtube.com/c/uidotdev/videos)
7+
- [React Context - Kent](https://kentcdodds.com/blog/how-to-use-react-context-effectively)
8+
- [React useCallback - Kent](https://kentcdodds.com/blog/usememo-and-usecallback)
9+
- [React Docs](https://reactjs.org/docs/hooks-reference.html#usecallback)
10+
- [Thinking in React Hooks](https://wattenberger.com/blog/react-hooks)
11+
- [Code Splitting](https://www.freecodecamp.org/news/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58/)
12+
- [Code Splitting 2](https://reactjs.org/docs/code-splitting.html)
13+
14+
# Videos:
15+
- [JavaScript, ES6 - Lecture 1 - CS50's Mobile App Development with React Native](https://youtu.be/3Ay2lS6tm4M)
16+
- [React, Props, State - Lecture 2 - CS50's Mobile App Development with React Native](https://youtu.be/7O43VDOlQ_o)
17+
- [Learn React with Kent C. Dodds](https://youtu.be/zthIUs2w_c8)
18+
- [Learn useReducer](hhttps://www.youtube.com/watch?v=XUxQSzpgAuI)

‎webDevelopmentClub-ESCOM/lectures/Class 15: Code Splitting/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Hello World</title>
6+
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
8+
9+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="text/babel">
14+
15+
const Name = ({setName}) => {
16+
console.log("rendering name")
17+
return <input onChange={setName}/>
18+
}
19+
20+
const App = () => {
21+
const [name, setName] = React.useState("")
22+
23+
const handleChangeName =
24+
React.useCallback(() => e => setName(e.target.value), [])
25+
26+
return <Name setName={handleChangeName} />
27+
}
28+
29+
ReactDOM.render(<App />, document.getElementById("root"));
30+
</script>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)