HTML?? React? ??? ?? ??? ? ?? DOM? ?? ? ??? ???? ???? ??????. 1) ?? ?? ??? ????? UI? ??? ??? ??? ??? ??? ??????. 2) ?? DOM ??? ??, Diffing ????? ?? DOM ??? ??????. 3) JSX Syntax? JavaScript? HTML? ???? ?? ???? ??????. 4) usestate ??? ???? ??? ???? ?? ??? ????? ??????. 5) ??? ???? ???? ???? ??? ?? React.Memo ? Usecallback ??? ?????.

??

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

?? ?? ??

React? ??? ????? ??? ????? ?? Facebook?? ?? ? JavaScript ????????. ?? ?? ???? ?? ??? ? ?? DOM? ??? ?? UI ???? ? ????? ????? ?? ? ? ??????. HTML? ? ???? ???? React?? ??? ???? ???? ??? ?????.

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

?? ?? ?? ?? ??

HTML?? React? ??? ??

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

??? ?? ?? ?? ? :

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

? ?? ??? html <h1> ??? ???? ??? JavaScript? HTML? ???? ???? ??? ?????.

??? ??? ?????

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

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

??? ?

?? ??

???? ???? ??? ?? ?? ????? ?? ?????.

 import React, {usestate} 'react';

?? ??? () {
  const [count, setCount] = usestate (0);

  ?? (
    <div>
      <p> ??? {count} times </p>? ??????
      <?? onclick = {() => setCount (count 1)}> Me </button>? ??????
    </div>
  );
}

? ??? React? useState ??? ???? ??? ???? JSX? ?? HTML ??? ????? ??? ?????.

?? ??

?? ??? ???? ?????? ??? ?? ???? ? ? ??? ???? ?? ?? ???? ?? ?????.

 import React, {usestate} 'react';

?? todolist () {
  const [todos, settodos] = usestate ([]);
  const [??, setInput] = usestate ( '');

  const addTodo = () => {
    if (input.trim ()) {
      settodos ([... todos, input.trim ()]);
      setInput ( '');
    }
  };

  ?? (
    <div>
      <??
        ? = {??}
        onchange = {(e) => setInput (e.target.value)}
        ?? ?? ? = "TODO ??"
      />
      <?? onclick = {addtodo}> ????? </button>
      <ul>
        {todos.map ((todo, index) => (
          <li key = {index}> {todo} </li>
        ))}
      </ul>
    </div>
  );
}

? ??? useState ???? ?? ??? ???? ??? ??? ???? ???? ???? ???? ???? ??? ?????.

???? ?? ? ??? ?

RECT? ??? ?? ???? ???? ?? ????? ???? ???? ?? ??? key ??? ???? ?? ??? ???? ??? ?????. ??? ?? ??? ????.

• React DevTools? ???? ?? ?? ?? ? ?? ?? ??? ??????.
• ?? ??? ??? ?? ??? ??? ? ? ? ??? ?? ?? ? key ??? ??????.
• ???? ???? ??? ?? useEffect ??? ?? ???? ??? ???? ??????.

?? ??? ? ?? ??

?? ????????? React Applications? ??? ????? ?? ?????. ? ?? ??? ??? ??? ????.

• ???? ? ???? ???? React.memo ?? useMemo ??????.
• ???? ??????? ??? ?? useCallback ??? ?? ??? ??? ???????.
• ?? ?? ??? ??? ?? ?? ??? ? ?????? ??????.

?? ??? ???? ?? ??? ?? ??? ???? ??? ???? ?? ???? ??????. ??? ??? ? ??? ?? ?? ????.

 import React, {usestate, usecallback} 'react';

const counter = react.memo (() => {
  const [count, setCount] = usestate (0);

  const ?? = usecallback (() => {
    setCount ((prevCount) => prevCount 1);
  }, []);

  ?? (
    <div>
      <p> ??? {count} times </p>? ??????
      <?? onclick = {ycrement}> me </button>? ??????
    </div>
  );
});

???? ?? ???;

? ????? ?? ??? ????? ?? React.memo ? useCallback ???? ??? ?????.

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

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

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