React? ??? ??? ?? ??? ???? ? ???? ?????. 1) ??? ?? ??? ? ?? DOM? ?? UI ??? ??????. 2) ?? ??? ?? ?? ?? ? ??? ?? ??? ????. ?? ?? ??? ? ???? ??? ?? ??? ? ?? ???? ??? ?????. 3) React? ?? ??? ?? DOM ? ?? ????? ???? ??? ??????. 4) ? ???? usestate ?? this.state? ???? ComponentDidMount? ?? ???? ??? ?? ??? ?????. 5) ?? ???? ?? ?? ?? ? ?? ??? ???? ?? ???? ??? ?? ?? ? ?? ???? ?????. 6) ???? ???? ???? ?? ???? ? ?? ??? ???? ??? ?? React DevTools ? ??? ??? ?????. 7) ?? ??? React.Memo ? Usememo? ???? ?? ??? ?????.

??

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

?? ?? ??

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

?? ?? ?? ?? ??

React ?? ??? ?? ? ??

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

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

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

??? ??? ?????

REACT? ?? ?? DOM ? ?? ????? ?????. ?? ??? ?? ?? ??? ???? ?? ?? ?? ??? ?? ?????? ?? DOM? ?? ????? ????. ??, ??? ?? DOM ??? ?? ? ??, ?? ????? ?? ?? ? ??? ?? Dom ??? ???? ???? ??? ?? DOM?? ?? ???? ?? ? ???????. ? ???? DOM? ?? ??? ??? ??? ??? ?? ??????.

?? ?? ? ????

React ?? ??? ?? ??? useState hook (?? ?? ??? ??) ?? this.state (??? ?? ??)? ?? ?????. componentDidMount , componentDidUpdate ? componentWillUnmount ? ?? ???? ??? ???? ???? ?? ??? ?? ???? ?? ??? ??? ? ????.

 // ?? ?? ?? ?? ?? ?? ?? ?? REACT, {usestate}?? 'React';

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

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

// ??? ?? ?? LifeCycleExample Extends React.component {
  componentDidMount () {
    Console.log ( &#39;?? ?? ??&#39;);
  }

  componentDidupdate (prevprops, prevstate) {
    Console.log ( &#39;?? ?? ????&#39;);
  }

  componentWillUnMount () {
    console.log ( &#39;?? ??? ????? ??&#39;);
  }

  ?? () {
    <div> ?????, ??! </div>;
  }
}

??? ?

?? ??

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

 import React, {usestate} 'react';

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

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

?? ??

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

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

?? usewindowsize () {
  const [size, setsize] = usestate ({
    ?? : Window.InnerWidth,
    ?? : Window.innerHeight,
  });

  useeffect (() => {
    ?? handleresize () {
      setSize ({
        ?? : Window.InnerWidth,
        ?? : Window.innerHeight,
      });
    }

    window.addeventListener ( 'resize', handlersize);
    return () => wind
  }, []);

  ?? ??;
}

?? myComponent () {
  const {??, ??} = usewindowsize ();

  ?? (
    <div>
      ? ?? : {width} x {??}
    </div>
  );
}

???? ?? ? ??? ?

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

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

?? ??? ? ?? ??

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

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

 import React, {usememo, usecallback} 'react';

?? myComponent ({data}) {
  const memoizedValue = usememo (() => computeexpensiveValue (data), [data]);

  const handleclick = usecallback (() => {
    // ?? ??? ??}, []);

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

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

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