React? ??? ?????? ?????? JavaScript ????????. ?? ????? ?? ???? ?? UI? ???? ????. 1. ?? ??? UI ?? ? ???? ????? ??? ?? ?????. 2. ?? DOM ? ?? ??? ?? ?? ??? ???? State? SetState? ?? ???????. 3. ?????? ???, ???? ? ??? ? ??? ?????. ???? ??? ??? ??? ? ? ????. 4. usestate ? ???? API? ???? ??? ???? ?? ?? ??? ? ? ??? ?? ??? ??????. 5. ???? ???? ???? ?? ???? ? ?? ??? ????, ?? React DevTools? ?? ??? ? ? ????. 6. ?? ??? ???? ?? ??, ???? ? ??? ??, USEMEMO ? USECALLBACK ?? ? ?? ??? ? ??? ??? ?????.

??

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

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

?? ?? ??

React? ??? ?????? ?????? JavaScript ????????. Facebook? ?? ?????? 2013 ?? ???????. REACT? ?? ????? ?? ???? ?? UI? ???? ??? ? ?? ??? ?? ?? ? ??? ??? ?????. ? ??? ???? ????? ????? ?? ?? ? ? ??????.

React? ???? ?? ES6 ??, ??? ??, ?? ?? ?? ?? ?? JavaScript ??? ???????. ??? ?? ??? React? ?? ?? ? ?? ??? ? ? ???? ? ??????.

?? ?? ?? ?? ??

?? ??? ?? ? ??

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

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

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

?? ??? ??? UI? ??? ??? ??? ???? ???? ????. ??? ?? ???? ???? ?? ??? ?? ??? ???? ??? ??? ???? ?? ???? ??? ? ? ????. ? ??? ???? ?? ?? ?? ??? ? ???? ?? ?????.

?? ??? ?? ??

RECT ?? ??? ?? ??? ?? ?? DOM ? ?? ??? ?????. ?? DOM? ?? DOM? ??? ???? ?? JavaScript ?????. ?? ??? ??? ???? ?? DOM? ?? ????? DIFF ????? ?? ?? ?? ??? ?? ? ?? ?? DOM? ???????.

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

 ??? ???? react.component {
  ??? (??) {
    ?? (??);
    this.state = {count : 0};
  }

  ?? = () => {
    this.setstate ({count : this.state.count 1});
  };

  ?? () {
    ?? (
      <div>
        <p> ? : {this.state.count} </p>
        <?? onclick = {this.increment}> ?? </button>
      </div>
    );
  }
}

????

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

 Class LifecycleExample Extends React.component {
  ??? (??) {
    ?? (??);
    Console.log ( '???');
  }

  componentDidMount () {
    console.log ( 'componentDidMount');
  }

  componentDidupdate (prevprops, prevstate) {
    console.log ( 'componentDidupDate');
  }

  componentWillUnMount () {
    console.log ( 'componentwillUnmount');
  }

  ?? () {
    Console.log ( 'render');
    <div> ?????, ??! </div>;
  }
}

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

??? ?

?? ??

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

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

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

reftdom.render (<counter />, document.getElementById ( &#39;root&#39;));

? ??? usestate ??? ???? ?? ??? ??? ???? ??? ??? ??? ?? ??? ?????? ??? ?????.

?? ??

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

 const themecontext = react.createContext ();

?? ? () {
  const [??, setTheme] = react.usestate ( 'light');

  ?? (
    <thecontext.provider value = {{??, setTheme}}>
      <?? ?? />
    </themecontext.provider>
  );
}

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

?? ?? ?? () {
  const {??, setTheme} = react.usecontext (themecontext);

  ?? (
    <??
      Style = {{backgroundColor : ?? === &#39;light&#39;? &#39;???&#39;: &#39;?? ?&#39;, ?? : ?? === &#39;?&#39;? &#39;??&#39;: &#39;???&#39;}}
      onclick = {() => setTheme (?? === &#39;light&#39;? &#39;dark&#39;: &#39;light&#39;)}
    >
      ?? ??
    </??>
  );
}

reftdom.render (<app />, document.getElementById ( &#39;root&#39;));

? ?? ???? API? ???? ?? ?? ???? ??? ??? ???? ?????? ??? ?????. ???? API? ???? ??? ?? ??? IT ??? ???? ??? ??? ??? ?? ????? ??? ? ????.

???? ?? ? ??? ?

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

• ???? ?? ???? : ?? ?????? ?? ??? ???? ?? ??? ??? ?? ??? ????????.
• ?? ??? ???? ???? ?? : ?? ??? ???? ??? ? ??? ???? ???? ??? ??? ?????.
• ?? ?? : React DevTools? ???? ?? ??? ??? ??? ???? ???? ? ???? ??????.

?? ??? ? ?? ??

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

• ??? ?? ??? ??????? : React.Memo? ???? ?? ?? ? ???? ???? ??? ?? ?? ??? ?????.

 const mycomponent = react.memo (function mycomponent (props) {
  / * ??? ???? ??? */
});

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

 ??? mycomponent extends react.purecomponent {
  ?? () {
    return <div> {this.props.value} </div>;
  }
}

• USEMEMO ? USECALLBACK ?? :? ??? ?? ?? ? ??? ???? ???? ? ??? ?? ? ????.

 const memoizedValue = usememo (() => computeexpensiveValue (a, b), [a, b]);

const memoizedcallback = usecallback (() => {
  ??? (a, b);
}, [a, b]);

• ?? ?? ? ??? ?? : react.lazy and spessense? ???? ?? ??? ? ??? ??? ???? ?? ?? ??? ????.

 const othercomponent = react.lazy (() => import ( './ othercomponent'));

?? myComponent () {
  ?? (
    <div>
      <???? ?? = {<div> ?? ... </div>}>
        <?? ?? />
      </????>
    </div>
  );
}

???, ?? ??? ??? ??? ?? ????? ??? ?? ?????? ??? ??? ?? ?? ? ???? ???? ? ??? ??????. ??? ???? ??? ??? ?? ?? ???? ? ?? ??? ?? ???????.

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

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