<div id="output"></div><!-- Load Babel --><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><!-- Your custom script here --><script type="text/babel"> const getMessage = () => "Hello World"; document.getElementById("output").innerHTML = getMessage();</script><!DOCTYPE html><html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>
CHALLENGE
function createCounter() {
let count = 0;
function increment() {
count++;
return count;
}
function decrement() {
count--;
return count;
}
return { increment, decrement, reset: () => count = 0 };
}
const counter = createCounter();
counter.increment();
counter.increment();
counter.decrement();
const { increment, reset } = counter;
increment();
reset();
increment();
console.log(counter.increment());<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">
function App() {
const [count, setCount] = React.useState(0);
return (
<div className="container">
<h1>Count: {count}</h1>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
const app = document.getElementById("root");
const root = ReactDOM.createRoot(app);
root.render(<App />);
</script>
</body>
</html>
import React, { useState } from
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Sanoq: {count}</h1>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}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.