1import React, { useState } from 'react';
2
3function Example() {
4 // Declare a new state variable, which we'll call "count"
5 const [count, setCount] = useState(0);
6 return (
7 <div>
8 <p>You clicked {count} times</p>
9 <button onClick={() => setCount(count + 1)}>
10 Click me
11 </button>
12 </div>
13 );
14}
1class Example extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {
5 count: 0
6 };
7 }
8
9 render() {
10 return (
11 <div>
12 <p>You clicked {this.state.count} times</p>
13 <button onClick={() => this.setState({ count: this.state.count + 1 })}>
14 Click me
15 </button>
16 </div>
17 );
18 }
19}
1import React, { useEffect } from 'react';
2
3export const App: React.FC = () => {
4
5 useEffect(() => {
6
7 }, [/*Here can enter some value to call again the content inside useEffect*/])
8
9 return (
10 <div>Use Effect!</div>
11 );
12}
1function Counter({initialCount}) {
2 const [count, setCount] = useState(initialCount);
3 return (
4 <>
5 Count: {count}
6 <button onClick={() => setCount(initialCount)}>Reset</button>
7 <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
8 <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
9 </>
10 );
11}
1import React, { useState } from 'react';
2
3function Example() {
4
5 const [count, setCount] = useState(0);
6
7 return (
8 <div>
9 <p>You clicked {count} times</p>
10 <button onClick={() => setCount(count + 1)}>
11 Click me
12 </button>
13 </div>
14 );
15}
1 1: import React, { useState } from 'react'; 2:
2 3: function Example() {
3 4: const [count, setCount] = useState(0); 5:
4 6: return (
5 7: <div>
6 8: <p>You clicked {count} times</p>
7 9: <button onClick={() => setCount(count + 1)}>10: Click me
811: </button>
912: </div>
1013: );
1114: }