React? View Focus? ?? ??? ??? ???? ??? ?? ???? ??? ?????. 1) RECT ??? ?? ??? ???? ??? ??? ???? ? ??? ???. 2) ??? ?? ????? Redux, Mobx ?? Context API? ?? ??? ???? ?? ???? ????? ????? ??? ? ????????.

React??? ?? : ??? ?? ???? ??? ?????

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

??, React ??? ?? ??? ?? ???? ??? ??? ????? ???? ??? ? ??? ???. ?? ??? ?? ????? ?? ? ? Redux, Mobx ?? Context API? ?? ??? ???? ?? ?? ??? ??? ???? ?? ?????. ? ??? ?? ???? ??? ???? ?? ????? ????? ?? ????? ?????.

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

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

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

 import React, {usestate} 'react';

?? cartitem ({item, onremove}) {
  ?? (
    <div>
      {item.name} - $ {item.price}
      <?? onclick = {() => onremove (item.id)}> ?? </button>
    </div>
  );
}

?? ?? ?? () {
  const [??, setitems] = usestate ([]);

  const additem = (??) => {
    setitems ([... ??, ??]);
  };

  const removeitem = (id) => {
    setitems (items.filter (item => item.id! == id));
  };

  ?? (
    <div>
      <H2> ?? ?? </h2>
      {items.map (item => (
        <cartitem key = {item.id} item = {item} onremove = {remokitem} />
      ))}
      <?? onclick = {() => addItem ({id : date.now (), ?? : &#39;? ??&#39;, ?? : 10})}> ?? ?? </button>
    </div>
  );
}

? ??? ShoppingCart ?? ??? ?? ?? ??? ??? ?????. ??? ?? ?? ?? ??? ??? ?????? ?? ???? ?? ??? ??????.

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

 import React, {CreateContext, usecontext, usestate} 'react';

const cartContext = createContext ();

?? Cartprovider ({children}) {
  const [??, setitems] = usestate ([]);

  const additem = (??) => {
    setitems ([... ??, ??]);
  };

  const removeitem = (id) => {
    setitems (items.filter (item => item.id! == id));
  };

  ?? (
    <cartcontext.provider value = {{items, additem, removeItem}}>
      {????}
    </cartcontext.provider>
  );
}

?? usecart () {
  usecontext (cartcontext)? ?????.
}

?? cartitem ({item}) {
  const {removeitem} = usecart ();

  ?? (
    <div>
      {item.name} - $ {item.price}
      <?? onclick = {() => removeItem (item.id)}> ?? </button>
    </div>
  );
}

?? ?? ?? () {
  const {??, additem} = usecart ();

  ?? (
    <div>
      <H2> ?? ?? </h2>
      {items.map (item => (
        <cartitem key = {item.id} item = {item} />
      ))}
      <?? onclick = {() => addItem ({id : date.now (), ?? : &#39;? ??&#39;, ?? : 10})}> ?? ?? </button>
    </div>
  );
}

?? ? () {
  ?? (
    <artprovider>
      <?? ?? />
    </cartprovider>
  );
}

????? ???? ?? ?? ??? CartProvider ?? ??? ?? ? ? ???? ?? ?? ?? ??? useCart ??? ?? ????? ??? ????? ??? ? ????.

??? ???? API? ?? ????? ?? ?? ? ?? ??? ???? ?? ??? ??? ?? ? ?? ??? ??? ? ????. ??? ??? ???? ?? Redux ?? Mobx? ???? ??? ? ?? ?????? ?? ? ? ????.

Redux? ???? ?? ??? ??? ???? ??? ?? ?????.

 'React'?? React React;
'redux'?? {createstore} ?? ??;
import {provider, useelector, usedispatch} 'react-redux';

// ?? ? ?? ?? const initialstate = {
  ?? : []
};

const add_item = 'add_item';
const remove_item = 'remove_item';

?? ???? (State = InitialState, Action) {
  ??? (action.type) {
    CASE ADD_ITEM :
      ?? {... ??, ?? : [... State.Items, action.PayLoad]};
    ?? remove_item :
      ?? {... state, ?? : state.Items.Filter (item => item.id! == action.payload)};
    ??:
      ?? ??;
  }
}

Const Stor = Createstore (Cartreducer);

?? cartitem ({item}) {
  const dispatch = usedispatch ();

  ?? (
    <div>
      {item.name} - $ {item.price}
      <?? onclick = {() => dispatch ({type : remove_item, payload : item.id})}> ?? </button>
    </div>
  );
}

?? ?? ?? () {
  const items = useelector (state => state.items);
  const dispatch = usedispatch ();

  ?? (
    <div>
      <H2> ?? ?? </h2>
      {items.map (item => (
        <cartitem key = {item.id} item = {item} />
      ))}
      <button on click = {() => dispatch ({type : add_item, payload : {id : date.now (), ?? : &#39;? ??&#39;, ?? : 10}})}> ?? ?? </button>
    </div>
  );
}

?? ? () {
  ?? (
    <??? ??? = {Store}>
      <?? ?? />
    </???>
  );
}

Redux? ???? ?? ???? ?? ??? ??? ???? ?? ??? ?? ?? ???? ??? ?? ? ? ??????. ? ???? ? ?????? ?? ???? ?? ?? ????? ?? ????? ???? ?? ??? ??????.

?? ?? ???? ??? ??? ?? ?? ???? ?? ????? ???? ?? ?? ??? ?? ????. ???? API ?? Redux? ???? ??? ???????.

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

Redux? ??? ??? ?? ???? ? ??? ?? ?? ??? ??? ??? ?? ?? ????? ????? ????. ??? ? ??? ?? ??? ???? ?? ????? ???? ???? ? ??? ????.

??? ? ?? ????? ??? ? ??? ? ? ?? ???? ??? ?? ??? ????. ?? ??, ???? API? ??? ?? ????? ?? ??? ?????. ?? ?? ???? ? ??? ??? ? ????. Redux? ??? ?? ?? ??? ?? ???? ? ???? ?? ? ???? ???? ???? ?????????.

????? React? View Focus? ??? ?? ???? ??? ?? ? ?? ??? ??? ???????. ??? ??? ????? ???? ???? ??? ?? ????? ??? ????? ???? ????? ?? ?? ??? ?? ????? ?? ? ? ????.

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