React? ?? ??? ?? ????? ??? ??? ?????? ?????? JavaScript ????????. 1. React? ??? ?? ??? ? ?? DOM?? UI ??? ??? ??????. 2. VUE? ??? ? React??? ????? ??? ?? ??? ????? ??? ????? ?????. 3. Angular? ???? React? ? ??? ?? ?? ??? ???? ???? ??? ????? ?????.

??

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

?? ?? ??

Facebook (?? ??)?? ?? ? React? ??? ?????? ?????? JavaScript ????????. ?? ??? ?? ??? ? ?? DOM?? ??? UI? ?? ? React? ? ?????. ?? ??? ??? ????, ??? ?? ???? ?? ???? ??? ??? ??? ???? ?? ??? ? Vue.js? ??? ? ????. Google? ?? ? ??? ??? ?? ? Angular? ??? ?????? ??? ?? ????? ?????.

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

?? ?? ?? ?? ??

React? ??? ??

React? ??? MVC ??? ??? ??? ??? ?????? ?????? ????????. ?? ??? ?? ????? ???? UI? ????? ??? ??? ?? ??? ?? ? ? ????. React? ?? ?? DOM? ??? ???? ????? DOM ??? ??????? ??? ??? ?? ?????.

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

 'React'?? React React;

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

?? ?? ??;

? ?? ??? name ??? ???? <h1> ???? ?? ???? ??????.

?? ??

React? ?? ??? ?? ?? DOM? ???? ?????. ?? ??? ?? ?? ??? ???? React? ?? ?? DOM ??? ?? ??? ? ?? Diff ????? ?? ?? ? ??? ?? Dom ??? ???? ?? ?? ??? ?? ?? DOM? ?? ?? ? ???????. ? ???? ??? DOM ??? ??? ??? ??? ?? ??????.

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

??? ?

React? ?? ??

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

 'React'?? React React;
'React-Dom'?? Reactdom ?? ??;

?? ? () {
  ?? (
    <div>
      <H1> ? ?? ?? ?? ????? </h1>
      <?? ?? = "Alice" />
    </div>
  );
}

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

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

? ??? ?? ??? ?? ? ???? ??? ?? ?? ????? DOM?? ????? ??? ?????.

?? ??

RECT? ?? ???? ??? ???? ?? ? ???? ???? ?? ?????. ??? ???? ?? ?? ??? ???? ???? ?? ??? ?? ??? ??? ?? ? ????. useState ? useEffect ???? ??? ?? ?????.

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

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

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

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

???? ?? ???;

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

???? ?? ? ??? ?

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

?? ??? ? ?? ??

React? ??? ????? ?? ? ??? ???? ? ???? ??? ????. React.memo ???? ?? ??? ???? ????? shouldComponentUpdate ??? ??? ??? ???? ?? ?? ????? ?? ? ? ????.

?? ???? ? :

 import React, {memo} 'react';

const ExpensiveComponent = ?? (?? ExpensiveComponent (props) {
  // return <div> {props.value} </div>? ?? ?? ??? ????.
});

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

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

? ???, ExpensiveComponent ? ???? value ??? ?? ? ?? ?? ??????.

?? ??? ???? ?? ??? ?? ??? ????, ??? ???, TypeScript? ???? ??? ?? ??? ????? ?? ????.

?? ??? ??? ??

?? ? vue

React and Vue? ?? ?? ?? ? ?? DOM? ?? ?? ?? ???? ?????. ??? Vue? ?? ??? ? ???? ??? ??? ??? ? ??? ?? ???? ??? ????? ? ?????. React??? ???? ?? ??? ?? ??? ?????.

VUE ?? ??? ? :

 <emplate>
  <div>
    <h1> {{message}} </h1>
  </div>
</???>

<cript>
???? ??? {
  ??? () {
    ?? {
      ??? : &#39;?????, Vue!&#39;
    };
  }
};
</????>

?? ? ??

Angular? ??? ?????? ??? ?? ????? ??? ??? ??, ??? ?? ?? ? ?? ??? ???? ??? MVC ??? ?????. React? ? ??? ?? ??? ???? ?? ???? ???? ?????.

?? ?? ??? ? :

 '@Angular/Core'?? {component} ?? ??;

@??({
  ??? : 'App-Root',
  ??? :`
    <h1> {{title}} </h1>
  `
})
?? ??? appComponent {
  ?? = &#39;Angular? ?? ?? ?????!&#39;;
}

??? ??

• REACT? ?? : ???? ?? ??? ?? ?? ???, ?? ??? ??? ?????.
• React? ?? : ?? ??? ???? ???? ???? ? ??? ?? ? ????.
• VUE? ?? : ?? ? ??? ?? ?? ??? ????? ???? ???? ??? ??.
• Vue? ?? : ???? React? ?? ????? ????.
• Angular? ?? : ???? ??? ??? ?? ????? ???? ??? ???? ?????.
• Angular? ?? : ?? ??? ???? ??? React ? Vue?? ?? ?? ? ????.

??? ??????

??? ??? ??? ?? ????? ??, ?? ?? ?? ? ????? ?? ??? ???????. ?? ??????? ??? ??? ?? ??? ??? ???? ?? ?? VUE? ?? ?? ? ? ????. ??? ??? ?????? ?? ??? ?? ???? ??? ???, ?? ?? ??? ? ?? ? ? ????.

??

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

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