HTML ? React? JSX? ?? ???? ???? ???? ??? ?????? ?? ? ? ????. 1) JSX? ???? HTML ??? ?? ?????. 2) Virtual DOM?? ??? ??? ???, 3) ?? ???? ?? HTML ??? ???? ??????. ? ?? ??? ??? ?? ? ??? ?? ???? ??? ??????.

??

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

HTML ? React? ?? ??? ??????

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

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

React ? HTML? ??? ?? ?? ??

React? HTML? ??

React??, HTML ??? JSX? ?? ?? ??? ?? ?? ? ? ????. ?? ??:

 ?? ? () {
  ?? (
    <div>
      <H1> ? ?? ?? ?? ????? </h1>
      <p> ??? ?????. </p>
    </div>
  );
}

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

?? ??

??? React ?? ??? ??? ? ??? ?? Dom ??? ???? ????. React?? ?? DOM ??? ????? ??? ? ?? DOM ??? ???? ???? ?? ?? ?? ???? ?? DOM? ??? ???????. ? "??? ? ????"?? ??? ?? ??? ??? ?????? ?? ? ? ??? ?? ??????.

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

?? ??

?? ??

???? HTML? ???? ??? ?? ??? ?? ?? ?????.

 'React'?? React React;

?? ?? () {
  ?? (
    <Header>
      <avi>
        <ul>
          <li> <a href = "#home"> home </a> </li>
          <li> <a href = "#about"> ?? </a> </li>
        </ul>
      </nav>
    </??>
  );
}

?? ?? ????;

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

?? ??

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

 import React, {usestate} 'react';

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

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

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

?? ?? ?? ???;

? ???? react? useState ??? ???? ??? ???? HTML ??? ?? ??? ?????? ?????. ? ???? ?? ??? ???? ???? ??? React? ???? ? ?? ?? ??? ?????.

FAQ ? ???

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

• ??? ?? : React? ?? ??? ???? ???? onClick ? ?? RECT ?? ? ??? ???? ???? ???????.
• ??? ?? : React? ??? ??? ?? CSS ??? ???? ??? ??? ??? ??? ?? ???? ???? ?? ????.
• ?? ?? : RECT? ??? HTML value ??? ?? ???? ?? ??? ???? ?? value ? onChange ???????.

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

?? ??? ? ?? ??

?? ?????? React ? HTML? ??? ????? ??? ??????

• ?? DOM? ??? : ???? ? ???? ?????, ?? shouldComponentUpdate ?? React.memo ? ?? ?? ? ? ????.
• ?? ??? : React? ????? ? ?? ??? ??? ???? ?? ?? ??? ????.
• ?? ?? : ??? ?? ????? ?? Redux ?? Context API? ???? ??? ??? ???? ???? ?? ??? ?????.

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

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

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