React? Meta? ??? ?????? ???? ?? ?? ? JavaScript ??????? ??? ?? ?? ?? ? ?? DOM ?????. 1. ?? ?? ? ?? ?? : React? ?? ?? (?? ?? ???) ? ?? (? : usestate)? ?? ??? ???? ?? ??? ? ?? ??? ?????. 2. ?? DOM ? ?? ??? : ?? DOM? ?? ?? DOM? ????? ?????? ??? ??????. 3. ??? ??? ? ?? : ?? (? : ???) ?? ?? ??? ??? ???? ???? ??? ??? ?? ? ? ??????. 4. ?? ? : ?? Helloworld ?? ???? ?? ??? ? ?? (USECONTEXT ? USEREDUCER)? ????? React? ?? ?????. 5. ???? ?? ? ??? : React DevTools ? Console.log? ???? Debug? ???? ???? ? ???? ??? ?? ??? ???????. 6. ?? ??? ? ?? ?? : React.Memo, Usememo ? Usecallback? ???? ??? ????? ??? ?? ? ?? ?? ??? ?????.

??

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

?? ?? ??

React? Facebook (?? Meta)?? ?? ? JavaScript ??????? ??? ?????? ????? ???????. ?? ?????? ?? ????? ??? UI? ?????? ??? ??? ???? ??? ??? ??? ?????. React? ?? ????? ?? ?? ?? ?? ???, ? ?? ???? ?? ? ??? ????? ??? ??? ?? ?? ??? ?? ?????.

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

?? ?? ?? ?? ??

?? ?? ? ?? ??

React? ??? ?? ????, ? ?? ??? ?? (??)? ???? ?? ?? (??)? ?? ? ??? ??? ? ?? ?????. ?? ??? ??? ?? ?? ?? ??? ?? ??? ? ? ????. ??? ?? ????? ??? ?? ? ??? ?? ??? ??? ????????.

 import React, {usestate} 'react';

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

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

? ??? useState hook? ???? ?? ?? ??? ??? ?? ? ? ??????. ???? ??? ???? count ??? ?????? ?? ??? ? ??? ????? ? ??????.

?? DOM ? ?? ???

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

 'React'?? React React;

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

? ??? List ?? ??? items ??? ??? ?? ??? ???????. React? Virtual DOM? ?? ?? ?? DOM ????? ???? ??? ??????.

???? ? ??

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

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

?? datafetcher ({url}) {
  const [data, setData] = usestate (null);

  useeffect (() => {
    ?? (URL)
      .Then (?? => response.json ())
      . (data => setData (data));
  }, [url]);

  return <div> {data? json.stringify (data) : &#39;?? ...&#39;} </div>;
}

? ??? useEffect ???? API?? ???? ?? ?? ?? ?? ?? ???? ??? ??? ?? ? ? ????. useEffect ? ? ?? ?? ??? ??? ?????. ???? ???? ?? ??? ?? ?????.

??? ?

?? ??

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

 'React'?? React React;

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

?? ?? Helloworld;

? ??? ?? ??? "Hello, World!"? ???? <h1> ??? ??????.

?? ??

RECT? ?? ???? ?? ??, ??? ? ?? ??????? ??? ?????. ?? ??, 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>
  );
}

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

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

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

???? ?? ? ??? ?

RECT? ??? ?? ???? ???? ???? ?? ??, ??? ?? ?? ???? ? ?? ??? ?????. ??? ?? ??? ????.

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

?? ??? ? ?? ??

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

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

 import React, {usememo} 'react';

?? ExpensiveComponent ({data}) {
  const result = usememo (() => {
    // ?? ??? return expensiveCalculation (???);
  }, [data]);

  return <div> {result} </div>;
}

? ??? useMemo hook? ???? ?? ?? ??? ?? ? ? ???, ?? data ?? ? ?? ?? ?????.

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

• ???? ?? ?? ??? ?? ??? ??????.
• ?? ??? ?? ??? ???? ???? ???? ???????.
• ??? ???? ??? ?? ? ?? ??? ??????.

????? React? ? ????? ????? ???? ??? ??? JavaScript ????????. React? ?? ??? ?? ??? ????? ??? ??? ??? ??? ???? ? ??????? ?? ? ? ????. ? ??? ???? ??? ?????? ????. ??? ??? ?????? ??? ??? ???? ????!

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