import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); return ( <div> <h1>Count: {count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> ); } export default App;
In this example, we import React and the useState
hook from the react
package.
We define a functional component App
that uses the useState
hook to create a piece of state called count
and a function called setCount
that can be used to update the count.
The component renders a div
element that contains an h1
element displaying the current count, and two buttons. Each button has a onClick
event that calls the setCount
function with the updated count.
This example is a simple counter that uses the state to keep track of the count and the event handlers to update the state, this is a basic example that could be used as a starting point for a more complex application.
Please note that this is a simplified example and to build a real-world application, you would need to add more functionality such as handling different states and conditions, communication with the backend and other features.
Social Plugin