React? ?? ?? ?? ? ?? DOM? ?? ???? ????? ??? ?????? ?????? JavaScript ????????. 1. ?? ?? ? JSX : JSX ??? ???? ?? ??? ???? ?? ??? ??? ??????. 2. ?? DOM ? ??? : ?? DOM ? DIFF ????? ?? ??? ??? ??????. 3. ?? ?? ? ?? : usestate ? useffect? ?? ??? ?? ?? ? ??? ??? ??????. 4. ??? ? : ?? ???? ?? ??? ? ??? ????? ???? API? ??????. 5. ???? ?? ? ??? : ???? ?? ?? ? ?? ?? ???? ??? ??? React DevTools? ???? ???? ??????. 6. ?? ??? ? ?? ?? : React.Memo, UseCallback ? Usememo? ???? ??? ????? ?? ??? ? ?? ??? ?????.

??

AH, AH, IT? ???? ?? ??? ?? ? ??? ??? ?? ?? ?? ??? ????? ????? ?????. ?? ???? React? ???? ? ??? ???? ?? ??? ??? ???? ?? ?????. ?, ??? ?????? ???? ??? ?????. ? ????? React? ??? ?? ??? ?? ?? ??? ?? ? ??? ?? ? ????. RECT? ???? ?? ? ? ??? ?? ?????? ???? ??? ????. ???, ?? ??? ??? ??? ? ????? ?? ?? ?? ? ??? ??? ?? ? ????.

?? ?? ??

??? ??? React? ??? ?????? ?????? JavaScript ????????. Facebook? ?? ?????? ???? DOM ??? ???? ???? ?? ??????. React? ??? ?? ?? - ?? ?? ??? ?????. ?? DOM ??? ???? ?? ?????? ?? ??? ??? ?? ??? ????. ??? ?? ??? ??? UI ?? ?? ??? ??? ?? ? ? ????.

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

?? ?? ?? ?? ??

?? ?? ? JSX

React? ??? ?? ???? ?? ??? ??? ????? JSX ??? ?? ?????. JSX? JavaScript? html ??? ? ??? JavaScript Extension ?????. ??? ?? ?? ?? ?? ?????.

 'React'?? React React;

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

?? ?? ??;

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

?? Dom ? ???

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

 import React, {usestate} 'react';

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

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

???? ?? ???;

? ??? ?? ???? ??? ?? ? ??? count ??? ????? ?? DOM ??? ?? ??? ?? ? ???????.

?? ?? ? ??

React 16.8? ???? ?? ? ??? ?????. Hooks? ???? ???? ?? ?? ?? ? ?? React ??? ??? ? ????. ?? ????? ???? ??? useState and 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>
  );
}

???? ?? ??;

? ???? count ?? ? ? useEffect ?? ??? ???????. ?? ??? ?? ?? ? ??? ??? ????? ??? ?????.

??? ?

?? ??

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

 import React, {usestate} 'react';

function nameform () {
  const [name, setName] = usestate ( '');

  const handlesubmit = (???) => {
    event.preventDefault ();
    ALERT ( '?? ? ?? :'??);
  };

  ?? (
    <?? onsubmit = {handlesubmit}>
      <??>
        ??:
        <??
          type = "text"
          ? = {??}
          onchange = {(e) => setName (e.target.value)}
        />
      </???>
      <?? ?? = "??"? = "??" />
    </form>
  );
}

?? ?? ????;

? ?? ??? useState ???? ?? ??? ???? ??? ?? ??? ???? ??? ?????.

?? ??

?? React? ???? API (Context API)? ???? ??? ??? ???? ??? ?? ?????. ?? ??? ?? ??? ??? ?????.

 import React, {usestate, createContext, usecontext} '??'react ';

const themecontext = createContext ();

?? themeprovider ({children}) {
  const [??, setTheme] = usestate ( 'light');

  const toggletheme = () => {
    setTheme (?? === 'light'? 'dark': 'light');
  };

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

?? ?? ?? () {
  const {??, toggletheme} = usecontext (themecontext);

  ?? (
    <??
      onclick = {toggletheme}
      Style = {{backgroundColor : ?? === &#39;light&#39;? &#39;#ffffff&#39;: &#39;#000000&#39;, ?? : ?? === &#39;light&#39;? &#39;#000000&#39;: &#39;#ffffff&#39;}}
    >
      ?? ??
    </??>
  );
}

?? ? () {
  ?? (
    <ThemeProvider>
      <?? ?? />
    </themeprovider>
  );
}

?? ? ????;

? ?? ???? API? ???? ?? ?? ???? ??? ??? ???? ???? ??? ?????.

???? ?? ? ??? ?

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

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

• ?? ??? ???? ?????? ?? : ?? ??? ??? ? ? key ??? ???? ???? ??? ??????. key ???? ???? ??? React? ?? ??? ???? ???? ?????? ?? ? ????.

• ??? ? : React DevTools? ???? ?? ?? ??, ?? ? ??? ?? ??? ? ? ????. ?? console.log ? useEffect ??? ?? ??? ????? ? ??? ? ? ????.

?? ??? ? ?? ??

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

• ???? ? ???? ????? : React.memo ???? ?? ?? ??? ????? ??? ?? ???? shouldComponentUpdate ?????.

• useCallback ? useMemo ?? :? ??? ?? ?? ??? ????? ? ?? ?? ??? ? ??? ????? ? ??? ? ? ????.

 import React, {usestate, usecallback, usememo}? 'React';

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

?? parentComponent () {
  const [count, setCount] = usestate (0);
  const compute = usecallback (() => {
    // Count * 2? ???? ? ?? ??? ??? ?????.
  }, [??]);

  ?? (
    <div>
      <?? onclick = {() => setCount (count 1)}> ?? </button>
      <ExpensiveComponent Compute = {compute} />
    </div>
  );
}

?? ?? ?? ??;

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

?? ???? ??? ?? ??? ??????? ??? ?????? ??? ??? ? ?? ?? ???? ?? ? ? ??? ??????. useMemo ?? ???? ? ?? ??? ?? ?? ?? ?? ??? ?? ????? ? ???? ??????.

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

? ??? React : ??? ????? (Frontend)? ??? ???.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!