1import React, { Component } from "react";
2
3class Hisoblagich extends Component {
4  constructor(props) {
5    super(props);   // OTA class'ni chaqirish — MAJBURIY
6
7    this.state = {
8      son: 0,
9      ism: "Ali",
10      faol: true,
11    };
12  }
13
14  render() {
15    return (
16      <div>
17        <h1>{this.state.son}</h1>
18        <p>Foydalanuvchi: {this.state.ism}</p>
19      </div>
20    );
21  }
22}
23
24export default Hisoblagich;

1class Hisoblagich extends Component {
2  // Class field — yangi sintaksis
3  state = {
4    son: 0,
5    ism: "Ali",
6  };
7
8  render() {
9    return <h1>{this.state.son}</h1>;
10  }
11}

1class Hisoblagich extends Component {
2  state = { son: 0 };
3
4  // ❌ XATO
5  notoriUsul = () => {
6    this.state.son = this.state.son + 1;  // ishlamaydi!
7  };
8
9  // ✅ TO'G'RI
10  qoshish = () => {
11    this.setState({ son: this.state.son + 1 });
12  };
13
14  // ✅ TAVSIYA — oldingi state'dan foydalanish
15  qoshish2 = () => {
16    this.setState(oldin => ({ son: oldin.son + 1 }));
17  };
18
19  ayirish = () => {
20    this.setState(oldin => ({ son: oldin.son - 1 }));
21  };
22
23  nol = () => {
24    this.setState({ son: 0 });
25  };
26
27  render() {
28    return (
29      <div>
30        <h1>{this.state.son}</h1>
31        <button onClick={this.qoshish}>+</button>
32        <button onClick={this.ayirish}>−</button>
33        <button onClick={this.nol}>0</button>
34      </div>
35    );
36  }
37}

1class Forma extends Component {
2  state = { matn: "" };
3
4  // ❌ Oddiy metod — this YO'QOLADI
5  update(e) {
6    this.setState({ matn: e.target.value });  // TypeError!
7  }
8
9  // ✅ Arrow funksiya — this saqlanadi (TAVSIYA)
10  update = (e) => {
11    this.setState({ matn: e.target.value });
12  };
13
14  yubor = () => {
15    alert("Yuborildi: " + this.state.matn);
16    this.setState({ matn: "" });
17  };
18
19  render() {
20    return (
21      <div>
22        <input
23          value={this.state.matn}
24          onChange={this.update}
25        />
26        <button onClick={this.yubor}>Yubor</button>
27        <p>Siz yozyapsiz: {this.state.matn}</p>
28      </div>
29    );
30  }
31}

1class Soat extends Component {
2  state = { vaqt: new Date() };
3
4  // 1. Tug'ildi — timer ishga tushiramiz
5  componentDidMount() {
6    console.log("Mount");
7    this.timer = setInterval(() => {
8      this.setState({ vaqt: new Date() });
9    }, 1000);
10  }
11
12  // 2. Yangilandi — masalan, prop o'zgardi
13  componentDidUpdate(oldinProps, oldinState) {
14    if (oldinProps.format !== this.props.format) {
15      console.log("Format o'zgardi");
16    }
17  }
18
19  // 3. O'chishdan oldin — xotirani tozalaymiz
20  componentWillUnmount() {
21    console.log("Unmount");
22    clearInterval(this.timer);   // MUHIM!
23  }
24
25  render() {
26    return <h1>{this.state.vaqt.toLocaleTimeString()}</h1>;
27  }
28}

1import React, { Component } from "react";
2
3class Soat extends Component {
4  state = {
5    vaqt: new Date(),
6    ishlayapti: true,
7  };
8
9  componentDidMount() {
10    this.boshlash();
11  }
12
13  componentWillUnmount() {
14    clearInterval(this.timer);
15  }
16
17  boshlash = () => {
18    this.timer = setInterval(() => {
19      this.setState({ vaqt: new Date() });
20    }, 1000);
21    this.setState({ ishlayapti: true });
22  };
23
24  toxtatish = () => {
25    clearInterval(this.timer);
26    this.setState({ ishlayapti: false });
27  };
28
29  render() {
30    const { vaqt, ishlayapti } = this.state;
31    return (
32      <div className="soat">
33        <h1>{vaqt.toLocaleTimeString()}</h1>
34        <p>{vaqt.toLocaleDateString("uz-UZ")}</p>
35        {ishlayapti
36          ? <button onClick={this.toxtatish}>To'xtat</button>
37          : <button onClick={this.boshlash}>Boshla</button>}
38      </div>
39    );
40  }
41}
42
43export default Soat;