React? ?? ? ??? ??? ?????? ?????? ?? ?????. 1) ?? ??? ? JSX? UI ?? ? ???? ???? ????. 2) State Management? Usestate ??? ?? ???? UI ????? ??????. 3) ??? ?? ????? ??? ?? ??? ???? ??? ??? ??????.

??

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

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

?? ?? ??

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

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

?? ?? ?? ?? ??

?? ??? ? JSX

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

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

const element = <?? ?? = "Sara" />;
reftdom.render (??, document.getElementById ( &#39;root&#39;));

? ???? Welcome name ??? ???? JSX ??? ???? ?? ?? ?????. ?? ??? ?? ??? ?? ??? ??? ? ? ????.

?? ??

? ???? React ?? ????? ?? ? ?????. useState hook (hook)? ???? ?? ?? ???? ??? ?? ? ? ??????. ?? ???? ?? ?? ?? ??? ? ???? ?? UI? ???????.

 import React, {usestate} 'react';

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

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

? ??? useState ??? ?? ?? count ? ???? ?? setCount ???? ? ?????. ???? ??? ???? count ?? ???? ?? ??? ? ??? ????? ? ??????.

??? ??

React? ??? ??? ?? ????? ???? ??? ?? ??? ?? ?? ? ? ????. ??? ?? ??? ????? ??? ???? ????? this ??????.

 ?? toggle () {
  Const [Istoggleon, setistoggleon] = usestate (true);

  ?? handleClick () {
    setistoggleon (! istoggleon);
  }

  ?? (
    <?? onclick = {handleclick}>
      {istoggleon? &#39;on&#39;: &#39;off&#39;}
    </??>
  );
}

? ???? ???? ??? ?? ? ? handleClick ??? ???? isToggleOn ??? ???? ?? ???? ?????.

??? ?

?? ??

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

 function nameform () {
  const [value, setValue] = usestate ( '');

  const handlechange = (???) => {
    setValue (event.target.value);
  };

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

  ?? (
    <?? onsubmit = {handlesubmit}>
      <??>
        ??:
        <?? ?? = "text"value = {value} onchange = {handlechange} />
      </???>
      <?? ?? = "??"? = "??" />
    </form>
  );
}

? ??? NameForm ?? ??? useState ???? ?? ?? ? handleChange ? handleSubmit ??? ???? ??? ?? ? ?? ??? ?????.

?? ??

?? ? ??? ?? ?? ????? : ?? ??? ?? ?? ??. ? ?? ??? ?? ? ??? ???? ???? ?? ? ??? UI? ??? ??? ?????.

 function editablelist () {
  const [items, setitems] = usestate ([ '?? 1', '?? 2', '?? 3']);
  const [editingIndex, setEditingIndex] = usestate (null);
  const [newitem, setnewitem] = usestate ( '');

  const handleEdit = (index) => {
    setEditingIndex (??);
    setNewitem (?? [index]);
  };

  const handlesave = (index) => {
    const newitems = [... ??];
    newitems [index] = newitem;
    setitems (newitems);
    setEditingIndex (null);
  };

  const handledelete = (index) => {
    const newitems = items.filter ((_, i) => i! == index);
    setitems (newitems);
  };

  const handleadd = () => {
    if (newitem.trim ()) {
      setitems ([... ??, newitem]);
      setNewitem ( '');
    }
  };

  ?? (
    <div>
      <ul>
        {items.map ((??, ??) => (
          <li key = {index}>
            {editingIndex === ??? (
              <??
                type = "text"
                ? = {newitem}
                onchange = {(e) => setnewitem (e.target.value)}
              />
            ) : (
              ?
            )}
            {editingIndex === ??? (
              <?? onclick = {() => handlesave (index)}> ?? </button>
            ) : (
              <?? onclick = {() => handleEdit (index)}> ?? </button>
            )}
            <?? onclick = {() => handledElete (index)}> delete </button>
          </li>
        ))}
      </ul>
      <??
        type = "text"
        ? = {newitem}
        onchange = {(e) => setnewitem (e.target.value)}
      />
      <?? onclick = {handleadd}> ?? </button>
    </div>
  );
}

? ??? EditableList ?? ??? ?? ?? ??? ???? ?? ??, ?? ?? ? ? ?? ??? ?????. ??? ??? ? ??? ??? ?? ???? ?? ??? ??, ?? ? ??? ??? ?? ??? ??? ??? ? ????.

???? ?? ? ??? ?

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

• ??? ?? ???? : ??? ???? ? ? ??? ???? ?? ( setState ?? useState ? ???? ?? ?)? ???????. ?? ????? ???? ?? ??? ?? ???? ????.

• ??? ??? ?? ??? ?? : ??? ??? ??? ?? ??? ?? ???? ?? ?? ????? ???? ?????????. ??? ?? ?? bind ??? ???? this ???? ??????.

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

?? ??? ? ?? ??

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

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

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

?? myComponent ({items}) {
  const sorteditems = usememo (() => {
    return [... ??] .sort ((a, b) => a -b);
  }, [??]);

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

  ?? (
    <div>
      {sortedItems.map ((??) => (
        <div key = {item}> {item} </div>
      ))}
      <?? onclick = {handleclick}> me </button>? ??????
    </div>
  );
}

? ??? useMemo ??? ? ??? ???? ??? ?? ?? ? ??? ???? ? ?????. useCallback ???? ??????? ??? ?? ??? ???? ???? ? ?????.

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

 'React'?? React React;

const mycomponent = react.memo (function mycomponent (props) {
  // ?? ?? ?? ?? <div> {props.value} </div>;
});

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

• ?? ????? ?? ?? : ??? ?? ??? ?? Redux ?? Context API? ???? ? ?? ??? ???? ?? ??? ?? ???? ?? ? ?? ??? ?????.

??? ?? ??? ?? ??? ??? ??? ???? ????? ?? ?? ??? React Application? ?? ? ? ????.

?? ??????? ?? ?? ?? ??? ??????. ??? ?? ?? ??? ??? ???? ? ??? ?? ?? ?? ??? ?? ????? ??? ???? ?????. React.memo ? useMemo ?????? ??? Re-Render? ????? ??? ?? ?? ? ???? ?? ????? ??? ?? ?? ?????.

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

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