-
Notifications
You must be signed in to change notification settings - Fork 32
/
react_hooks.html
79 lines (67 loc) · 2.5 KB
/
react_hooks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<title>React Hooks Example</title>
<style>
.counter {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
</style>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// useState Hook example
function Counter() {
const [count, setCount] = React.useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
return (
<div className="counter">
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
);
}
// useEffect Hook example
function Timer() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const intervalId = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
return <div>Time: {time} seconds</div>;
}
// Render the example components
ReactDOM.render(
<div>
<h1>React Hooks Example</h1>
<Counter />
<Timer />
</div>,
document.getElementById("root")
);
</script>
</body>
</html>
<!--
In this example, we showcase two popular React Hooks: useState and useEffect.
The Counter component demonstrates the usage of the useState Hook. It initializes a state variable called count with an initial value of 0 using useState(0). The increment and decrement functions modify the count state by calling the setCount function, which is provided by the useState Hook. The component renders a counter UI, allowing the user to increment and decrement the count.
The Timer component showcases the useEffect Hook. It sets up a timer that updates the time state every second. The useEffect Hook takes a function as its first argument, which will be executed after the component renders. In this example, the function sets up an interval that increments the time state every second. The useEffect Hook also returns a cleanup function that clears the interval when the component is unmounted.
Both components are rendered within the ReactDOM.render function, and their output is displayed in the root div.
-->