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.
Forwarded from Front End World
ViteConf 2024 was a blast
The third edition of ViteConf was another incredible community party. ViteConf 24 showed how much the Vite Ecosystem keeps growing and evolving.
https://blog.stackblitz.com/posts/viteconf-2024-recap/?social=
The third edition of ViteConf was another incredible community party. ViteConf 24 showed how much the Vite Ecosystem keeps growing and evolving.
https://blog.stackblitz.com/posts/viteconf-2024-recap/?social=
Stackblitz
ViteConf 2024 was a blast
The third edition of ViteConf was another incredible community party. ViteConf 24 showed how much the Vite Ecosystem keeps growing and evolving.
int myAge = 25;
int* ptr = &myAge;
printf("Qiymat: %d\n", myAge); // 25
printf("Manzil: %p\n", &myAge); // 0x... (xotira manzili)
printf("Pointer ichidagi qiymat: %p\n", ptr); // ptr o‘zida myAge'ning manzilini saqlaydi
printf("Pointer orqali o‘qilgan qiymat: %d\n", *ptr); // 25 – ptr orqali qiymatga kiriladi
Forwarded from JavaScript
An open source (though a commercial version is available) Node and Electron-based desktop app for crafting and testing HTTP requests, complex and simple. Think of it as a lightweight alternative to something like Postman.
Anoop M D, Anusree P S and Contributors
Please open Telegram to view this post
VIEW IN TELEGRAM