React nima?

React — bu Facebook tomonidan ishlab chiqilgan va qo‘llab-quvvatlanadigan JavaScript kutubxonasi bo‘lib, foydalanuvchi interfeyslarini yaratish uchun mo‘ljallangan. U komponentlarga asoslangan yondashuv orqali UI yaratishni soddalashtiradi. React yordamida siz katta ilovalarni oddiy, qayta ishlatiladigan qismlarga (komponentlarga) ajratib qurishingiz mumkin.

React'ning Asosiy Xususiyatlari

1. Component-based Architecture

Har bir UI qismi — tugma, forma, modal — alohida komponent sifatida yoziladi.

2. JSX (JavaScript XML)

React komponentlarida HTML ga o‘xshash sintaksisda yozish mumkin.

3. Virtual DOM

React Virtual DOM orqali faqat o‘zgargan qismlarni yangilaydi, bu esa uni tez va samarali qiladi.

4. One-way Data Binding

Ma’lumotlar faqat yuqoridan pastga (parent → child) uzatiladi, bu kodni nazorat qilishni soddalashtiradi.

5. Hooks

Hooks — bu funksiya komponentlarida holat (useState), effektlar (useEffect) va boshqa imkoniyatlardan foydalanish uchun yaratilgan.

React Dasturiga Kirish

Loyiha yaratish:

npx create-react-app my-app
cd my-app
npm start

Oddiy React Komponenti:

import React from "react";



function Welcome(props) {

  return <h1>Salom, {props.name}!</h1>;

}

useState Hook misoli:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Hisob: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

✅ Bu komponentda foydalanuvchi tugmalarni bosganida count holati yangilanadi.

useEffect Hook misoli:

import React, { useEffect, useState } from "react";
function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
    return () => clearInterval(interval); // tozalash
  }, []);
  return <h3>Vaqt: {seconds} soniya</h3>;
}

✅ Bu komponent har soniyada seconds holatini oshirib boradi.

Props va Children bilan ishlash:

function Card({ title, children }) {
  return (
    <div style={{ border: "1px solid gray", padding: "1rem" }}>
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}
// Foydalanish:
<Card title="Yangiliklar">
  <p>React 19 yaqinda chiqadi!</p>
</Card>

Formani boshqarish:

function LoginForm() {
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Email: " + email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email kiriting"
      />
      <button type="submit">Yuborish</button>
    </form>
  );
}

Nima uchun React?

• Keng hamjamiyat va kutubxonalar

• Komponentlar qayta ishlatiladi

• Katta va murakkab UI'larni boshqarish oson

• Frontend va mobil ilovalar uchun asos (React Native)

Xulosa

React — bu veb-ilovalar yaratish jarayonini soddalashtiruvchi, kuchli va zamonaviy kutubxona. Siz uni kichik loyihalardan tortib, murakkab korporativ tizimlargacha ishlatishingiz mumkin. JSX, komponentlar va hooklar orqali kodingizni toza va samarali saqlash imkoniyati mavjud.

Tags:
react, javascript, frontend, web development, hooks, component, jsx, state, useState, useEffect, reactjs