React? JSX? HTML? ???? ??? ??? ??????. 1) JSX? ????? ????? ??? ?? HTML? ?????. 2) ?? DOM ????? ??? ????? DOM ??? ????. 3) ?? ???? ??????? ?? ?? ?? ?? UI. 4) ?? ?? ? ??? ??? ?? ??? ??????.

??

React,? ??? ??? ?? ?? ???? ? ??? ????. ??????? ??? ?????? ???? ??? ????? ??? ??? ??? ?? ??????. ???, ??? HTML?? React? ??? ??? ??? ?? ??? ??? ???? ??? ??? ??? ????. ? ??? ?? ??? RECT? HTML? ??? ?? ?????, ??? ????? ?? ? ??? ??? ????? ??? ?? ? ?? ??? ? ????.

?? ?? ??

React? ?? ??? UI? ???? ????? ??? ?????? ?????? JavaScript ????????. HTML? ? ???? ????, ???? ??? ??? ??? ?????? ???? ????? ????. React? ?? ????? UI? ????? ??? ??? ?? ??? ???? ????.

React?? HTML ??? JSX???? HTML? ????? ??? JavaScript ?? ? JavaScript? ?? ??????. ??? ???? React? DOM??? ???? ???? ?? ????? ??? ? ????.

?? ?? ?? ?? ??

React? HTML? ??

React? HTML ??? JSX? ?? JavaScript ??? ???? ???? JavaScript? ?? HTML ??? ??? ? ??????. ? ??? ?? ???? ?????? ??? ????? ????? ?? ???? ?? ????.

 // ??? ?? ?? ?? ?? helloorld () {
  <H1> ?????, ??! </h1>;
}

? ??? ???? ?? ???? ? ?? ??? ?? DOM ??? ?? ?? ? ? ????. React? ?? DOM ????? ?? React? ??? ?? ? ??? ?? ?? DOM ??? ???? ??? ??????.

?? ??

React Works? ?? ??? ??? ? ??? ?? :

1. ?? DOM ?? : REACT? ?? ??? ?? ? ??? ?? ?? DOM ??? ?????.
2. ?? DOM ?? : ?? ?? ??? ???? React? ??? ?? DOM ??? ???? ?? ?? DOM ??? ???? ??? ????.
3. ?? DOM ???? : REACT? ?? ?? ? ?????? ?? DOM? ??? ??? ??? ??????.

? ????? ??? UI ????? ?? ? ? ?? ????? ???? ???? ? ?? ? ? ??? ?? ??? ??? ??????.

??? ?

?? ??

React?? HTML ??? ???? ??? ???? ??? ?? ?? ?????.

 // ??? ?? ?? ?? ?? simpleform () {
  ?? (
    <??>
      <??>
        ??:
        <?? ?? = "text"name = "name" />
      </???>
      <?? ?? = "??"? = "??" />
    </form>
  );
}

? ?? React?? HTML ?? ??? ???? ??? ?????. ?? ??? ???? ??? ?? ??? ?? ? ? ??????.

?? ??

React? ?? ??? UI ?? ? ?? ??? ?? ? ? ????? ????. React? ?? ? ??? ?? ??? ?????? ??? ?? ?? ?????.

 // State Management Class Coun
  ??? (??) {
    ?? (??);
    this.state = {count : 0};
    this.increment = this.increment.bind (this);
  }

  ?? () {
    this.setstate ({count : this.state.count 1});
  }

  ?? () {
    ?? (
      <div>
        <p> ? : {this.state.count} </p>
        <?? onclick = {this.increment}> ?? </button>
      </div>
    );
  }
}

? ??? React?? ?? ? ??? ??? ???? ?? ??? ?? ??? ???? ??? ?????. ??? ???? ???? ?? ??? ??? ?? ???? ??? ?? ??? ?? ? ? ????.

???? ?? ? ??? ?

RECT? ??? ? ???? ??? ?? ? ?? ???? ??? ?? ? ? ????.

• ?? ??????? ???? ???? . React??? ?? ????? ???? ???? ???? ?? ??? this.state ? ???? ?? ?? ??? ? ????. ???? this.setState ? ?? ?? ?? componentDidUpdate ??? ??? ???? ???? ????.

• ?? ?? : ?? ??? ?? ??? ?? ?? ? ????? ?? ??? ??? ? ????. ?? ??? ?? ??? ???? ????? ?? shouldComponentUpdate ??? ??? ??? ????? React.memo ???.

• ??? ?? ?? : RECT ??? ??? ??? ??? this ???? ??? ? ? ????. ???? ??? ??? ????? ???? ????? this ???.

?? ??? ? ?? ??

?? ?? ???? React? ?? ??? ? ?? ??? ?? ?????. ? ?? ??? ??? ????.

• ?? DOM ?? : React? ?? DOM ????? ??? ?? ????? ???? DOM ??? ?? ? ????.

• ?? ?? ?? : ??? ?? ??? ? ?? ??? ??? ?? ??? ???? ?? ?? ?? ? ??? ???? ? ????.

• ?? ?? : Redux ?? Context API? ???? ??? ??? ???? ?? ?? ??? ????? ?? ????? ?? ?? ???? ???? ? ????.

• ?? ??? : React.lazy ? Spessense? ???? ?? ???? ???? ?? ?? ??? ???? ??? ??? ???? ? ????.

• ??? ? ??? : shouldComponentUpdate ?? React.memo ???? ?? ???? ????? ???? ? ???? ????.

??? ??? ?? ???? ??? ? ??? ?? ????? ???? ?? React? ??? ??? ???? ??? ??? ?? ???? ? ????.

????? HTML?? React? ??? ??? ?????? ????? ?? ??? ??? ????? ??? ????? ?? ??? ?? ??? ??? ??????. ????? ?? ? ?????, React ? HTML? ??? ???? ????? ??? ???? ?? ?????. ? ??? ??? ???? ?? ??? ?? ? ? ??? ????.

? ??? HTML?? React? ?? : ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!