React? ??? ??? ? ?? ?? ??, ?? ??? ? ?? ?? ???? ?? ??? ??? ? ????. 1) RECT? ?? ??? ?? ? ??? ?? ????? ??? ? ?? ?? ??? ?????. 2) ?? ???? ?? ??? ?? ?????? ??????. 3) React? ?? ??? ????? ?? GraphQL ? TypeScript? ?? ??? ?? ?? ? ????.

??

???? ??? ???? ??? ????, ??? ?? ??? ?? ??? ???? React? ???? ??? ??? ????. ????? ?? ? ?????, REACT? ?? ??? ??? ???? ?? ?????. ? ??? ?? ?? ???, ???? ?? ???? ? ??? ??? ??? ????? ???? ??? ???? RECT? ??? ?? ? ????. ? ??? ?? ??? REACT? ??? ?? ??? ? ??? ???? ?? ?? ??? ??? ? ????.

?? ?? ??

2013 ?? ?? ? ?? React? ??? ?? ??? ????????. ??? ?????? ???? ?? ??? ? ?? ?????? ?????? JavaScript ????????. React? ?? ???? Virtual DOM, ?? ?? ???? ? ?? ??? ????, ?? React? ?? ??? ?????? ?????.

Virtual DOM? React? ?? ????, ???? ??? DOM ??? ???? ??? ??????. ?? ?? ????? ???? ??? ????? ?? ??? ??? ???? ??, ?? ??? ?? ??? ??? ??? ??????, ??? RECT? ????? ??? ??? ?????.

?? ?? ?? ?? ??

??? ?? ???

React? ??? ???? ????? ?????. ??, React? ??? ?? ?? ??? ?? ???? ?? ??? ?? ? ??? ?? ??? ? ????. ??, React? ?? ???, ?? ??? ?? ????? ??? ? ?? ??? ??? ????. ?????, React? GraphQL ? TypeScript? ?? ?? ?? ??? ?? ???? ? ??? ?? ??? ?????.

?? ??

RECT? ?? ??? ?? DOM ? ?? ?? ????? ??? - ?? ????? ?? ????. Virtual DOM? DOM? ?? ???? ??? ????? ??? ????? ??, ?? ?? ???? ???? ?? ?? ?? ? ??? ? ? ?? ? ? ??????. ??? REACT? ? ??? ???? ???? ? ? ?? ?? ?? ??? ?? ? ?? ??? ??? ?? ? ? ????.

?

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

 import React, {usestate, useeffect} '??'react ';

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

  useeffect (() => {
    document.title =`??? $ {count} times`? ??????.;
  }, [??]);

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

???? ?? examplecomponent;

? ??? useState ? useEffect ???? ?? ??? ?? ? ????? ???? ??? ?????. useState ?? ??? ??? ???? ? ????, Component? ??? ? ??? useEffect ??? ??? ?????.

??? ?

?? ??

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

 'React'?? React React;

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

?? ?? Helloworld;

? ?? ??? ??? <h1> ??? ????? React ?? ??? ?? ??? ?????.

?? ??

RECT? ?? ???? ??, ???? API ? ??? ?? ?? ??? ???? ??? ?? ? ?? ??? ???? ?? ?????. ??? useContext ? useReducer ???? ????.

 import React, {usecontext, usereducer} 'react';

const initialstate = {count : 0};

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

const countcontext = react.createContext ();

?? countprovider ({children}) {
  const [state, dispatch] = usereducer (experer, initialstate);
  ?? (
    <countcontext.provider value = {{state, dispatch}}>
      {????}
    </countcontext.provider>
  );
}

?? countdisplay () {
  const {state} = usecontext (countcontext);
  ?? <div> {state.count} </div>;
}

?? ??? () {
  const {dispatch} = usecontext (countcontext);
  ?? (
    <div>
      <?? onclick = {() => dispatch ({type : &#39;increment&#39;})}> </button>
      <?? onclick = {() => dispatch ({type : &#39;detrement&#39;})}>-</button>
    </div>
  );
}

?? ? () {
  ?? (
    <countprovider>
      <countdisplay />
      <??? />
    </countprovider>
  );
}

?? ? ????;

? ??? useContext ? useReducer ???? ??? ??? ???? ??? ??? ?? ??? ??? ??? ?????.

???? ?? ? ??? ?

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

• React DevTools? ???? ?? ??? ??? ??? ??????.
• console.log ? console.error ???? ?? ?? ????? ??????.
• React.memo ? useMemo ???? ?? ??? ??? ??? ???????.

?? ??? ? ?? ??

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

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

??? React.memo ? useMemo ???? ????.

 import React, {usememo} 'react';

?? ExpensiveComponent ({compute}) {
  const result = usememo (() => compute (), [compute]);
  return <div> {result} </div>;
}

const memoizedexpensivecomponent = react.memo (ExpensiveComponent);

?? ? () {
  const compute = () => {
    // ??? ??? ?? ??? ?? ?? return math.random ()??? ?????.
  };

  ?? (
    <div>
      <memoizedexpensiveComponent Compute = {compute} />
    </div>
  );
}

?? ? ????;

? ??? React.memo ? useMemo ???? ?? ?? ??? ????? ???? ? ???? ??? ??? ?????.

??? ? ???? ??

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

• Component ??? ??? ? ?? : REACT? ??? ??? ? ?? ?? ??? ?? ?? ? ????. ?, ?? ??? ??? ?? ???? ? ????? ???????. ??? ???? ?? ? ??? ????? ?? ? ?? ?? ?? ?????? ??? ?? ? ? ????.
• ?? ??? : React? ?? ???? ?? ??? ?? ?????? ???? ??????. ???? ?? ???, ????? ? ?? ?? ???? ?? ? ?? ?? ??? ??? ????????.
• ?? ?? ???? ?? : React? GraphQL ? TypeScript? ?? ?? ?? ??? ?? ?? ?????. ?? ???? React? ???? ?? ??? ??? ???????? ?? ?????.

??? ?? ? ??

• ?? :

  • ??? : React? ?? ??? ? ?? ?????? ?? ???? ??? ?????? ???? ???? ?? ? ? ??????.
  • ?? : ?? DOM ? ?? ?? ????? ???? ?? React? ?????.
  • ??? : React?? ??? ??? ?????? ???? ??? ???? ????.

• ?? :

  • ?? ?? : ???? ?? React ? Hooks? ??? ?? ?? ??? ?? ? ????.
  • ?? ?? ??? : ??? ?? ???? ? ???? ???? ? ??? Redux ?? Context API? ?? ?? ??? ???????.

• ?? ??? :

  • ???? ?? ?? : ??? ?? ??? ?? ?? ??? ?? ????? ?? ??? ??? ? ????.
  • ???? ?? : ?? ?? ??? ?? ???? ??? ?? ? ?? ??? ??? ? ????.
  • ?? ?? ?? : ??? ?? ???? ??? ?? ???? ???? ??? ?? ?? ??? ??? ? ????.

?? ??

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

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

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