Jifunze jinsi ya kutumia state na event handling katika React ili kufanya components zako ziwe interactive. State inahifadhi data ya component, na event handlers zinashughulikia actions za user kama clicks, input, au form submissions.
Mfano wa Code:
Functional Component na State (useState)
// src/Counter.js
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increment}>Increase</button>
<button onClick={decrement}>Decrease</button>
</div>
);
}
export default Counter;
Use Component in App.js
import React from 'react';
import Counter from './Counter';
function App() {
return (
<div className="App">
<h1>React State & Event Handling Example</h1>
<Counter />
</div>
);
}
export default App;
Maelezo ya Code:
useState: Hook ya React inayoruhusu functional components kuwa na state.
Event Handlers: Functions (increment, decrement) zinashughulikia actions za user.
onClick: Event listener inayounganisha button na handler function.
State hubadilika kila click na component inare-render automatically.
Tips:
State lazima iwe immutable; usibadilike value directly (count++ ni incorrect).
Event handlers zinaweza kupokea parameter kama onClick={(e) => handleClick(e)}.
Combine multiple states kwa useState au tumia useReducer kwa complex state.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509