JSX ?? ?? : JSX ??? ???? JSX ??? ???? HTML ??? JavaScript ??? ????? ??? ? DOM? ??????. ?? ??? HTML? ?????. React ?? ??? ??? ?? ???? ???? ? ?? HTML ???? ???? ?????. ??? ?? ?? : React? ??? ??? ?? ????, ?? ?? ???? ?? ?? ??? ???? ??? ???? ???? ? ?? ??? ?? ??? ??? ?? ? ? ??????. ?? ?? ? :?? ??? ???? ??? ?????? ?? ?? ???? ?? ?? ??? ???????. ?? ?? ? : usestate ??? ???? ??? ????, ?? ??? ???? ???? ??? ????, ?? ?? ?? ??? ??????. ?? ??? : ???? ???? ?? ?? ??? ?? ???, ?? ? ??? ?? ?? ??? ???? ?? ???? ???? ??? ?? ?? ??? ?????. ?? ??? : React.Memo? ???? ???? ? ???, ? ?? ? ?? ??? ???? ?? ??? ??? ?? ????? ???? ??? ??? ???? ? ??? ???????.

??

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

?? ?? ??

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

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

?? ?? ?? ?? ??

React ?? ??? HTML? ??

RECT ?? ??? HTML ??? ???? ??? ?? ???? ??? ??? HTML ??? ???? ?? ? ? ????. ?? ??? HTML ???? ???? ?? ? ? ????.

 ?? ??? (??) {
  ?? <H1> ?????, {props.name}! </h1>;
}

REACTDOM.RENDER (
  <??? ?? = "World" />,
  document.getElementById ( &#39;root&#39;)
);

? ??? Greeting ?? ??? name ??? ?? ?? HTML? <h1> ??? ?????. ? ??? ?? ??? ??? ???? ????? ????.

??? ??? ?????

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

 ?? ? () {
  const name = "?? ???";
  return <greeting name = {name} />;
}

? ??? App ?? ??? name Greeting ?? ??? ?????. ? ??? ??? ??? ??? ?? ??? ? ?? ??? ? ?????.

??? ?

?? ??

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

 ?? ?? (??) {
  const ?? = props.items;
  ?? (
    <ul>
      {items.map ((??, ??) => (
        <li key = {index}> {item} </li>
      ))}
    </ul>
  );
}

const ?? = [ &#39;Apple&#39;, &#39;Banana&#39;, &#39;Cherry&#39;];
REACTDOM.RENDER (
  <list items = {afferm} />,
  document.getElementById ( &#39;root&#39;)
);

? ???? map ??? ???? items ??? ???? ? ??? ?? <li> ??? ?????. key ??? ??? ? ??? ???? ??? ??? ????? ? ??????.

?? ??

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

 ?? todolist (props) {
  const [todos, settodos] = usestate (props.todos);
  const [Newtodo, setnewtodo] = usestate ( '');

  const addTodo = () => {
    if (newtodo.trim ()) {
      Settodos ([... Todos, Newtodo]);
      setnewtodo ( '');
    }
  };

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

const initialtodos = [ &#39;Learn React&#39;, &#39;todo ? ??&#39;];
REACTDOM.RENDER (
  <todolist todos = {initialtodos} />,
  document.getElementById ( &#39;root&#39;)
);

? ???? useState hook? ???? ??? ???? Todo ??? ???? ???? ??? ?????. ??? ??? ? ??? ??? ?? ????? ???? ???????.

???? ?? ? ??? ?

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

<li> ?? ?? ??? ?? ????? . ??? ??? ? ? ? ??? ?? ? ? ??? ???? ??? ??? ???? ? ? RECT? ?? ??? ??? ? ????.<li> ??? ?? ?? : ?? ?? ??? ?? ? ??? ??? ??? ???? ??????. ??? ??? ??? ??? ??? ? ????.<li> ??? ??? ??? ?? ?? : ??? ??? ??? ??? ?? ? ?? ????? ???? ????? ??????.

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

<li> React DevTools? ???? ?? ??? ??? ??? ??????.<li> ??? ??? ???? ??? ?? ? ??? ??? ???? ? ??????.<li> React? ??? ??? ???? ??? ? ??? ??????.

?? ??? ? ?? ??

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

<li> React.memo ???? ?? ??? ??????? : ??? ?? ?? ??? ?? React.memo ???? ???? ? ???? ?????.

 const mycomponent = react.memo (function mycomponent (props) {
  // component logic});

<li> ???? ? ???? ????? : ?? ?? ?? ????? shouldComponentUpdate ?? React.PureComponent ? ??.

 ??? mycomponent extends react.purecomponent {
  // ?? ?? ??}

<li>

??? ?? ?? : ? ??? ?? ??? ?? (? : react-window )? ???? ??? ???? ? ????.

<li>

?? ??? ? ?? ?? : ?? ??? ?? ??? ????, ??? ???, ?? ??? ? ?? ??? ?????.

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

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