React? ??? ?????? ???? ????? ??? ??? ???? ??? ?? ??? ?? ???? (SPA)? ???? ? ???? ?????. 1) ?? ?? ?? : ??? UI? ????? ??? ??? ???? ???? ?? ???? ??? ?? ??????. 2) ?? DOM : ?? DOM? ?? DOM? ??? ???? ??? ??? ??????. 3) ?? ?? : ??? ??? ? ?? ???? ???? ?? ?? ? ??? ?? ??? ??? ?????.

??

???? ??? ?? ???? React? ?? ??? ?? ???? (SPA)? ???? ? ???? ?? ? ????????. ? ??? ?? ????? ??? ??? ?? React? ????? ??? ?? ????? ? ??? React? ??? ?? ?? ??? ???? ?? ??? ??? ??? ?? ? ????. ? ??? ??? React? ????? ?? ?? ???? ??? ??? ??? ?? ?? ??? ?? ????? ??? ? ????? ??? ? ? ??? ? ????.

?? ?? ??

React? Facebook?? ??? ?????? ???? ?? ?? ? JavaScript ????????. ???? ?? ???? ?? ?? ? ???? ??? UI? ?? ? ? ????. SPA? ?? ??? ??? ?? ?? ??? ???? ?? ?? ??? ?? ????? ??? ?? ??? ??? ??? ??? ????? ? ?? ???? ?????.

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

?? ?? ?? ?? ??

React? ??? ??

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

• ?? ??? ?? : ?? ???? ?? ???? ??? UI? ?? ??? ? ???? ??? ??? ?? ?? ? ??? ?? ???? ? ????.
• Virtual DOM : REACT? ?? DOM? ???? ??? ??? ????? ?? DOM? ?? DOM? ??? ???? ??? ?? ? ?????? ???? ? ???? ????.
• ?? ?? : React? ??? ???? ?? ???? ???? ?? ?? ? ??? ?? ?? ?? ??? ??? ?????.

??? ?? ?? ?? ? :

 'React'?? React React;

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

?? ?? ??;

? ?? ??? name ??? ???? ???? ?? ???? ?????.

?? ??

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

• ?? ?? ???? : ?? ?? ???? ???, ???? ? ?? ??? ??? ????? ????. ???? ???? ??? ?? ?? ???? ?? ??? ??? ? ????.
• ?? DOM ? ?? : React? ?? DOM? ?? ???? DOM ??? ?????. ?? ??? ?? ?? ??? ???? ?? DOM? ?? ??? ? ?? ?? ????? ?? ?? ? ??? ?? DOM? ???? ??? ?? ?? DOM? ???????.
• ?? ?? ? ??? ?? : REACT? ?? ??? ??? ?? ??? ?????. ?? ?? ??? ??? ?? ???? ?? ?? ??? ???? ?? ?? ??? ?? ??? ?? ???? ?? ?? ??? ?? ?????. ? ???? ??? ??? ?? ???? ?? ???? ?????.

??? ?

?? ??

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

 import React, {usestate} 'react';

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

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

???? ?? ???;

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

?? ??

?? ??? SPA? ?? ? ? ???, ? ?? ? ??? ??? ?? ?? ??? ?? ? ? ????. ??? React Router ? Redux? ???? ????.

 'React'?? React React;
'react-router-dom'?? {browserrouter, ???, route, link} import;
import {provider, useelector, usedispatch} 'react-redux';
'./Actions'?? {ycrement} ?? ??;

?? ? () {
  const count = useelector (state => state.count);
  const dispatch = usedispatch ();

  ?? (
    <div>
      <H2> ? </h2>
      <p> ? : {count} </p>
      <?? onclick = {() => dispatch (increment ())}> increment </button>
    </div>
  );
}

() {
  </h2>? ?? <h2>? ?????.
}

?? ? () {
  ?? (
    <??? ??? = {Store}>
      <???>
        <div>
          <avi>
            <ul>
              <li> <link to = "/"> home </link> </li>
              <li> <link to = "/about"> inver </link> </li>
            </ul>
          </nav>

          <Route Path = " /"??? ?? ?? = {home} />
          <route path = " /aff"component = {about} />
        </div>
      </router>
    </???>
  );
}

?? ? ????;

? ?? ??? ??? React Router? ???? ??? ??? ? ??? Redux? ???? ??? ?????.

???? ?? ? ??? ?

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

• ?? ?? ?? : ??? ???? ???? ??? ??? ??? ????? ????? ??? ? ????. ??? ??? ???? ?? Redux ?? Context API? ???? ?? ????.
• ?? ?? : ?? ??? ?? ??? ?? ?? ??? ??? ? ????. React.memo ?? useMemo ???? ?? ??? ??? ??? ??? ? ? ????.
• ??? ?? ?? : ??? ??? ??? ?? ???? ???? ???? ?? ? ????. ??? ???? ???? ??? ???? Switch ?? ??? ???? ? ?? ???? ??? ??????.

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

?? ??? ? ?? ??

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

• ?? ??? : React.lazy ? Suspense ???? ?? ???? ???? ?? ?? ??? ????.
• ?? ???? : ? ??? ?? react-window ? ?? ?? ??? ??? ???? ??? ??? ??????.
• ???? ? ???? ????? : React.memo ? useMemo ???? ???? ?? ?? ? ???? ?????.

React Code? ??? ? ??? ?? ? ?? ?? ?? ???? ???? ?? ?? ?????. ?? ??? ??? ????.

• ?? ?? ?? : ??? ?? ??? ?? ? ??? ? ?? ??? ???? ??? ?? ?? ???? ??????.
• ?? ?? ?? : ???? ?? ??? ???? Pascalcase? ??? ?? ?? ? ?? ?? ?? ? Camelcase? ??? ?? ??? ???? ??????.
• ?? ? ?? : ??? ??? ??? ???? ?? ???? ??? ????? ?? ?? ??? ??? ?????.

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

SPA? ???? ???? React? ??? ??? ??? ????? ????? ???? ????? ??? ???? ???? ??? ???????. ? ??? ?? ???? React? ??? ? ? ???? ?? ???? ?? ??? ???? ? ?????? ????.

? ??? React? ?? : ?? ??? ?? ???? ?? (SPA)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!