React Ecosystem?? ??? ?? ????? (? : Redux), ??? ????? (? : React Router), UI ?? ?? ????? (? : ?? -UI), ??? ?? (? : Jest) ? Webpack? ?? ?? ?? (? : Webpack)? ?????. ??? ??? ???? ??????? ????? ???? ???? ?? ?? ? ?? ???? ???? ? ??? ?? ?????.

??

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

?? ?? ??

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

React? ????? ? ?? ????? (? : Redux ? Mobx), ??? ????? (? : React Router), UI ?? ?? ????? (? : ?? -UI ? ?? ???), ??? ?? (? : Jest ? React Testing Library) ? ?? ?? (? : ? ? ? React App)? ????? ?? ????? ????.

?? ?? ?? ?? ??

React ???? ???? ??

React? ???? ???? ??? ????? ?? ??? ???? ??? ?????. ?? ??, ???, UI ?? ?? ?? ??? ? ???? REACT ????? ?? ???? ????. ? ???? ?? ???? ????? ?? ??? ?? ?? ??? ?? ? ?????? ???? ?? ??? ? ?? ??? ???? ? ????.

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

 // redux ?? 'redux'?? {createstore} import;

?? ??? (state = 0, action) {
  ??? (action.type) {
    ?? '??':
      ?? ?? 1;
    ?? '??':
      ?? ?? -1;
    ??:
      ?? ??;
  }
}

const store = Createstore (???);

store.dispatch ({type : 'increment'});
console.log (store.getState ()); // ?? : 1

???? ?? ???? ??

React ???? ?? ??? ???? ?? ??? ?? ??? ??????. ?? ??, React ???? Redux? ?? Redux? ?? ??? ??? ?????? ??? ?? ??? ???? ? ? ????. ??, ?? -UI? ?? UI ?? ?? ?????? React Router ? Redux? ???? ???? ??? ??? ??? ?? ? ? ????.

?? ????? ??? ??? ? ? ??? ? ??? ??? ??? ??? ????? ???????. ?? ??, Redux?? ??? ??? ???? ??, React ????? ?? ???? ???? ?? ? UI ?? ?? ??????? ???? ??? ???? ??? ?? ??? ? ??? ??? ?? ??????.

??? ?

?? ??

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

 'React'?? React React;
'react-router-dom'?? {browserrouter, ???, route, link} import;

?? ? () {
  <h2> home </h2>;
}

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

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

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

?? ? ????;

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

?? ??

???? Redux? ???? ???? ???? ??? ???? ??? ?? ?? ?????.

 'React'?? React React;
'react-router-dom'?? {browserrouter, ???, route, link} import;
'react-redux'?? {provider, connect} ?? ??;
'redux'?? {createstore} ?? ??;

const initialstate = {
  ??? : 0
};

?? ?? ??? (state = initialstate, action) {
  ??? (action.type) {
    ?? '??':
      ?? {... state, count : state.count 1};
    ?? '??':
      ?? {... state, count : state.count -1};
    ??:
      ?? ??;
  }
}

const store = Createstore (???);

?? ? ({count, ycrement, deengrement}) {
  ?? (
    <div>
      <H2> ? </h2>
      <p> ? : {count} </p>
      <?? onclick = {??}> ?? </button>
      <?? onclick = {dexement}> ?? </button>
    </div>
  );
}

const mapstateProps = state => ({
  ? : state.count
});

const mapdispatchtoprops = dispatch => ({
  ?? : () => dispatch ({type : &#39;increment&#39;}),
  ?? : () => dispatch ({type : &#39;detrement&#39;})
});

const ConnectedHome = Connect (MapStateProps, MapDispatchToprops) (?);

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

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

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

?? ? ????;

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

???? ?? ? ??? ?

React ???? ???? ???? ??? ??? ? ?? ???? ??? ??? ????. ?? ??, Redux? ?? ??????? ???? ??? React ???? ??? ??? ?????? UI ?? ?? ?????? ??? ?? ?? ????.

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

• Redux DevTools? ???? Redux? ?? ??? ?????? ???????.
• ?? ???? <Route> ?? ??? render ??? ???? ??? ??? ???????.
• Browser? ??? ??? ???? UI ?? ?? ??????? ??? ??? ???? ???????.

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

?? ??? ? ?? ??

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

• ???? ?? ?? ??? ??? ?? Component Re-Rendering? ?????? React.memo ??????.
• useCallback ? useMemo ???? ?? ? ?? ??? ??? ????? ???? ??? ????.
• React.lazy ? Suspense ???? ?? ?? ??? ??? ?? ?? ??? ? ?????? ??????.
• ???? ? ???? ??? ?? ?? ??? ???? ??? ?????? shouldComponentUpdate ?? PureComponent ??????.

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

 import React, {usecallback} 'react';

const button = react.memo (({onclick, children}) => {
  Console.log ( '?? ???');
  <button on click = {onclick}> {children} </button>;
});

?? ? () {
  const handleclick = usecallback (() => {
    Console.log ( &#39;?? ??&#39;);
  }, []);

  ?? (
    <div>
      <?? onclick = {handleclick}> me </button>? ??????
    </div>
  );
}

?? ? ????;

? ???? React.memo ???? Button ?? ??? ? ???? ????? handleClick ??? ?? useCallback ????? ???? ?? ?? ??? ????.

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

• ?? ??? ?? ??? ???? ???? ???? ??? ?? ????.
• ???? ?? ??? ?? ??? ???? ?? ??? ? ?? ??? ??????.
• proptypes? ???? ?? ??? ?? ??? ???? ??? ???? ?? ?? ???? ??????.
• ES6 ?? ? ?? JavaScript ??? ???? ?? ??? ? ???? ??????.

??? ?? ??? ?? ? ?? ??? ?? REACT? ???? ? ? ???? ??? ??? ??????? ??? ? ????.

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

? ??? React? ??? : ?????, ?? ? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!