Skip to content

Commit 094d647

Browse files
AhsanAyazAhsanAyaz
committed
chore(slides): add state management slides
1 parent 0e97f63 commit 094d647

File tree

8 files changed

+559
-1
lines changed

8 files changed

+559
-1
lines changed

‎assets/images/react-fundamentals/testing-trophy.jpeg

30 KB
Loading

‎content/custom-react-hooks.md

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
## Custom React Hooks
2+
3+
--
4+
5+
## What are hooks?
6+
7+
Custom hooks are functions that let you tap into React’s state and lifecycle features from function components. They’re like your personal toolkit for sharing logic with a beautiful twist — no component inheritance or messy chains of props.
8+
<!-- .element: class="fragment" style="font-size: 2rem" -->
9+
10+
--
11+
12+
## Benefits of a Custom hook?
13+
14+
- Reusability of _stateful_ logic
15+
- Cleaner and more maintainable code
16+
- Easier to test and isolate
17+
18+
---
19+
<!-- .slide: data-auto-animate -->
20+
## Creating a custom hook
21+
22+
```jsx []
23+
import { useState, useEffect } from 'react';
24+
25+
function useWindowSize() {
26+
27+
}
28+
```
29+
<!-- .element: data-id="custom-hook" -->
30+
31+
--
32+
<!-- .slide: data-auto-animate -->
33+
34+
#### Creating a custom hook
35+
36+
```jsx []
37+
import { useState, useEffect } from 'react';
38+
39+
function useWindowSize() {
40+
const [size, setSize] = useState({
41+
width: window.innerWidth,
42+
height: window.innerHeight
43+
});
44+
45+
return size; // a value has to return (almost always)
46+
}
47+
```
48+
<!-- .element: data-id="custom-hook" -->
49+
50+
--
51+
<!-- .slide: data-auto-animate -->
52+
53+
#### Creating a custom hook
54+
55+
```jsx []
56+
import { useState, useEffect } from 'react';
57+
58+
function useWindowSize() {
59+
const [size, setSize] = useState({
60+
width: window.innerWidth,
61+
height: window.innerHeight
62+
});
63+
64+
useEffect(() => {
65+
const handleResize = () => {
66+
setSize({width: window.innerWidth, height: window.innerHeight});
67+
};
68+
69+
window.addEventListener('resize', handleResize);
70+
}, []);
71+
72+
return size;
73+
}
74+
```
75+
<!-- .element: data-id="custom-hook" style="font-size: 1.2rem" -->
76+
77+
--
78+
<!-- .slide: data-auto-animate -->
79+
80+
#### Creating a custom hook
81+
82+
```jsx []
83+
import { useState, useEffect } from 'react';
84+
85+
function useWindowSize() {
86+
const [size, setSize] = useState({
87+
width: window.innerWidth,
88+
height: window.innerHeight
89+
});
90+
91+
useEffect(() => {
92+
const handleResize = () => {
93+
setSize({width: window.innerWidth, height: window.innerHeight});
94+
};
95+
96+
window.addEventListener('resize', handleResize);
97+
return () => {
98+
return window.removeEventListener('resize', handleResize);
99+
};
100+
}, []);
101+
102+
return size;
103+
}
104+
```
105+
<!-- .element: data-id="custom-hook" style="font-size: 1.2rem" -->
106+
107+
---
108+
109+
#### Yet another custom hook:
110+
#### `useFetch`
111+
112+
```jsx []
113+
import { useState, useEffect } from 'react';
114+
115+
const useFetch = (url) => {
116+
const [data, setData] = useState(null);
117+
const [loading, setLoading] = useState(true);
118+
119+
useEffect(() => {
120+
const fetchData = async () => {
121+
const response = await fetch(url);
122+
const result = await response.json();
123+
setData(result);
124+
setLoading(false);
125+
};
126+
127+
fetchData();
128+
}, [url]);
129+
130+
return { data, loading };
131+
}
132+
133+
```
134+
<!-- .element: style="font-size: 1rem" -->
135+
136+
---
137+
138+
## Best practices for Custom Hooks
139+
140+
- Encapsulate only related logic <!-- .element: class="fragment" -->
141+
- Name hooks with the `use` prefix
142+
<!-- .element: class="fragment" -->
143+
144+
- Keep hooks small and focused <!-- .element: class="fragment" -->

‎content/introduction.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
## Practical React Essentials
2+
3+
##### Urdu/Hindi
4+
5+
---
6+
7+
## Course Overview
8+
9+
React is a powerful library for building user interfaces. This course will take you from the basics to advanced topics, ensuring a comprehensive learning experience.
10+
11+
<!-- .element: class="fragment" -->
12+
13+
---
14+
15+
<!-- .element: style="font-size: 1.8rem;" -->
16+
17+
## What We Will Cover
18+
19+
- **Understanding JSX:**
20+
We'll start with the basics of JSX, making our components readable and reusable.
21+
22+
<!-- .element: class="fragment" -->
23+
- **Components and Props:** Learn how to create interactive interfaces and pass data effectively.
24+
25+
<!-- .element: class="fragment" -->
26+
- **State Management**: From useState for local state to Redux for global state management.
27+
28+
<!-- .element: class="fragment" -->
29+
- **Advanced Hooks:** Delving into useEffect and more to manage side effects.
30+
31+
<!-- .element: class="fragment" -->
32+
- **React Router:** Learn to manage application routes and transitions smoothly.
33+
34+
<!-- .element: class="fragment" -->
35+
- **Testing Your Applications:** We'll cover testing strategies including unit, integration, and E2E tests using Vitest and Playwright.
36+
37+
<!-- .element: class="fragment" -->
38+
- **Real-World Project:** Put all your skills to the test by building a fully-functional pizza restaurant app.
39+
40+
<!-- .element: class="fragment" -->
41+
42+
---
43+
44+
### Your learning Journey
45+
46+
This isn't just about watching videos. It's about building, experimenting, and engaging with the community.
47+
48+
<!-- .element: class="fragment" -->
49+
50+
51+
---
52+
53+
## Engage and Experiment
54+
55+
- **Build Projects:** Apply what you’ve learned by building more complex projects.
56+
57+
<!-- .element: class="fragment" -->
58+
- **Contribute to Open Source:** Dive into the React ecosystem and contribute to open-source projects.
59+
60+
<!-- .element: class="fragment" -->
61+
- **Stay Updated:** Keep up with the latest in React by following blogs and attending webinars.
62+
63+
<!-- .element: class="fragment" -->
64+
65+
---
66+
67+
## Ready to Start?
68+
69+
Let’s dive in and transform your ideas into reality with powerful, efficient code. I’m excited to see what you'll create!

‎content/overview-of-testing-in-react.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
## Overview of Testing in React
2+
3+
---
4+
5+
### Is testing important?
6+
7+
Testing is an essential part of software development. It helps ensure that your application works as expected and helps prevent future bugs from making it into production. Effective testing can save time, money, and a lot of headaches.
8+
<!-- .element: class="fragment" -->
9+
10+
--
11+
12+
### Testing helps in :
13+
14+
- Ensuring application reliability and performance. <!-- .element: class="fragment" -->
15+
- Preventing bugs from reaching production. <!-- .element: class="fragment" -->
16+
- Saving development time and costs in the long run.<!-- .element: class="fragment" -->
17+
18+
---
19+
20+
### Types of Tests
21+
22+
In React, we typically focus on three types of tests: Unit tests, Integration tests, and End-to-End tests. Each serves a different purpose and helps catch different kinds of issues.
23+
<!-- .element: class="fragment" -->
24+
25+
--
26+
27+
#### Types of Tests
28+
29+
- Unit Tests: Focus on individual components or functions.
30+
- Integration Tests: Ensure that multiple components work together correctly.
31+
- End-to-End Tests: Simulate real-user interactions from start to finish.
32+
33+
--
34+
35+
#### Testing Trophy
36+
37+
![Testing Trophy](/assets/images/react-fundamentals/testing-trophy.jpeg) <!-- .element: style="height: 500px;" -->
38+
39+
---
40+
<!-- .slide: style="font-size: 1.7rem" -->
41+
42+
### Testing Tools for React
43+
44+
- **Unit/Integration Testing**:
45+
- **Jest**: A JavaScript testing framework that works out of the box for React applications.
46+
- **React Testing Library**: Builds on Jest and helps test components in a way that resembles how they are used by end users.
47+
- **End-to-End Testing**:
48+
- **Cypress and Playwright**: Tools for running browser-based tests to simulate real user interactions.
49+
50+
--
51+
52+
### Example of unit test
53+
54+
```js
55+
import { render, screen } from '@testing-library/react';
56+
import App from './App';
57+
58+
test('renders learn react link', () => {
59+
render(<App />);
60+
const linkElement = screen.getByText(/learn react/i);
61+
expect(linkElement).toBeInTheDocument();
62+
});
63+
```

‎content/react-context-api.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
## React, Prop Drilling, and Context API
2+
3+
---
4+
5+
### State management recap
6+
7+
To maintain a state in a React component (_function component_), we use the `useState` hook
8+
<!-- .element: class="fragment" -->
9+
10+
---
11+
12+
## What is prop drilling?
13+
14+
The concept of passing props to multiple nested levels of a component tree is referred to as
15+
16+
`Prop Drilling`.
17+
18+
--
19+
20+
## Disadvantages of prop drilling
21+
22+
- Hard to maintain. Every new prop has to be passed all along in the component tree
23+
- Less scalable and reusable
24+
25+
26+
--
27+
28+
## Solution??
29+
30+
---
31+
32+
## Context API
33+
34+
--
35+
36+
First, create the context
37+
38+
```jsx []
39+
const ThemeContext = createContext('light');
40+
```
41+
42+
--
43+
44+
Then, provide the context in your application. This depends on which components you want to _wrap your context around_.
45+
46+
```jsx []
47+
function App() {
48+
const [theme, setTheme] = useState('light');
49+
// ...
50+
return (
51+
<ThemeContext.Provider value={theme}>
52+
<Page />
53+
</ThemeContext.Provider>
54+
);
55+
}
56+
```
57+
58+
--
59+
<!-- .slide: data-auto-animate -->
60+
Finally, you can consume the value from the context in your component, as follows:
61+
62+
```jsx []
63+
function Button() {
64+
// 🟡 Legacy way (not recommended)
65+
return (
66+
<ThemeContext.Consumer>
67+
{theme => (
68+
<button className={theme} />
69+
)}
70+
</ThemeContext.Consumer>
71+
);
72+
}
73+
```
74+
<!-- .element: data-id="theme-consumer" -->
75+
76+
--
77+
<!-- .slide: data-auto-animate -->
78+
Finally, you can consume the value from the context in your component, as follows:
79+
80+
```jsx []
81+
function Button() {
82+
// ✅ Recommended way
83+
const theme = useContext(ThemeContext);
84+
return <button className={theme} />;
85+
}
86+
```
87+
<!-- .element: data-id="theme-consumer" -->
88+

0 commit comments

Comments
 (0)