function NameInput() {
const [name, setName] = useState("");
return (
<div>
<input
type="text"
placeholder="Ismingizni kiriting"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Salom, {name}</p>
</div>
);
}function ToggleMessage() {
const [show, setShow] = useState(true);
return (
<div>
<button onClick={() => setShow(!show)}>
{show ? "Yashirish" : "Ko'rsatish"}
</button>
{show && <p>Bu maxfiy xabar!</p>}
</div>
);
}function TodoList() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
function addTodo() {
if (text) {
setTodos([...todos, text]);
setText("");
}
}
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<button onClick={addTodo}>Qo'shish</button>
<ul>
{todos.map((todo, i) => (
<li key={i}>{todo}</li>
))}
</ul>
</div>
);
}function Profile() {
const [user, setUser] = useState({ name: "", age: "" });
return (
<div>
<input
placeholder="Ism"
value={user.name}
onChange={(e) => setUser({ ...user, name: e.target.value })}
/>
<input
placeholder="Yosh"
value={user.age}
onChange={(e) => setUser({ ...user, age: e.target.value })}
/>
<p>
{user.name} {user.age} yoshda
</p>
</div>
);
}function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}const [state, setState] = useState(initialState);
Holatli qiymatni va uni yangilash funksiyasini qaytaradi.
Dastlabki render paytida qaytarilgan holat ( state) birinchi argument ( ) sifatida berilgan qiymat bilan bir xil bo'ladi initialState.
Funktsiya setStateholatni yangilash uchun ishlatiladi. U yangi holat qiymatini qabul qiladi va komponentni qayta ko'rsatishni navbatga qo'yadi.
Eslatma
setStateReact funksiya identifikatori barqarorligini va qayta ishlashda o‘zgarmasligini kafolatlaydi . Shuning uchun useEffectyoki qaramlik ro'yxatidan chiqarib tashlash xavfsiz useCallback.
setStateReact funksiya identifikatori barqarorligini va qayta ishlashda o‘zgarmasligini kafolatlaydi . Shuning uchun useEffectyoki qaramlik ro'yxatidan chiqarib tashlash xavfsiz useCallback.
<script type="text/babel">
function App() {
const [count, setCount] = React.useState(0)
const addCount = () => {
setCount(count+1)
}
return(
<div class="container">
<div class="box">
<button onClick ={() => seTcount(count-1)}>-</button>
<h1>{count}</h1>
<button onClick = {addCount}>+</button>
</div>
</div>
)
}
const app = document.getElementById("root");
const root = ReactDOM.createRoot(app);
root.render(<App />);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React-1</title>
<style>
.container {
max-width: 1140px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
text-align: center;
font-size: 24px;
}
button {
margin: 10px;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const holder = 'nmadir tursin';
function App() {
const [count, setCount] = React.useState(0);
const [text, setText] = React.useState("");
const [view, setView] = React.useState(false);
const addCount = () => {
setCount(count + 1);
};
return (
<div className="container">
<div className="box">
<button onClick={() => setCount(count - 1)}>-</button>
<h2>{count}</h2>
<button onClick={addCount}>+</button>
</div>
<input
type="text"
placeholder={holder}
value={text}
onChange={(event) => setText(event.target.value)}
/>
<h2>{text}</h2>
<div className="box">
<input type={view ? "password" : "text"} />
<button onClick={() => setView(!view)}>
{view ? "ko'rsat" : "berkit"}
</button>
</div>
</div>
);
}
const app = document.getElementById("root");
const root = ReactDOM.createRoot(app);
root.render(<App />);
</script>
</body>
</html>
1. useState nima?
useState bu Reactda foydalaniladigan xotira (yoki holat). Ya’ni:
🔄 "O'zgaruvchini saqlab turadigan va uni o'zgartirganda sahifani avtomatik yangilaydigan" maxsus funksiya.
Oddiy JavaScriptda o‘zgaruvchi shunaqa:
Reactda esa bunday qilamiz:
Bu degani:
sana — bu o‘zgaruvchimiz.
setSana — bu funksiyamiz, sanani yangilaydi.
useState(5) — boshlang‘ich qiymat, hozir sana = 5.
useState bu Reactda foydalaniladigan xotira (yoki holat). Ya’ni:
🔄 "O'zgaruvchini saqlab turadigan va uni o'zgartirganda sahifani avtomatik yangilaydigan" maxsus funksiya.
Oddiy JavaScriptda o‘zgaruvchi shunaqa:
let sana = 5;
Reactda esa bunday qilamiz:
const [sana, setSana] = React.useState(5);
Bu degani:
sana — bu o‘zgaruvchimiz.
setSana — bu funksiyamiz, sanani yangilaydi.
useState(5) — boshlang‘ich qiymat, hozir sana = 5.