? ??? ???? ??, ???? ?? ??? ? ???? ??? ? ??? ?? ??? ??? ???????. Unstated-Next? ??? ? ?? ????? React Hook ? Context API? ???? ?? React Hooks? ??? ??? ? ?? ?????? ???? ?? ??? ?????. Unstated-Next? ???? ?? ? ?? ?? ?? ??? ?????. ??? ???? ?? ??? ?? ?? ?? ?????? ???? ????? ????.

?? ?? ?? ?? ??

??? ?? ??? ?? ??? ???? ??? ?? ??? ???????. ???? ??? ?? ?? ?????. ?? ??? Github?? ??? ? ????. ? ??? Create React App ? Bootstrap? ?????.

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

 npx create-react-app unstated-next-form
CD Unstated-Next-Form

???? ?? ??? ?? :

 # ??
??? ???? ?? ???? ?????

# npm
NPM ??-? ??? ? ???

??? ??? App.js ? ?????.

 // src/app.js
import React, {usestate} 'react';
"Unstated-next"?? {createcontainer} ?? ??;

??? ?? ?? ?? :

 // src/app.js
// ... ?? ??

const useform = () => {
  const [??, setValue] = usestate ( "");
  const [name, setname] = usestate ( "Barney Stinson");

  const handleInput = (event) => setValue (event.target.value);
  const updateName = (???) => {
    event.preventDefault ();
    setName (??);
    setValue ( "");
  };

  return {??, ??, handleInput, updateName};
};

createContainer ???? ????? ????.

 // src/app.js
// ... ?? ??

const formcontainer = createcontainer (useform);

?? ?? ?? ?? :

 // src/app.js
// ... ?? ??

const form = () => {
  const form = formcontainer.usecontainer ();
  ?? (
    <div>
      <p>?????! {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">???</button>
      </form>
    </div>
  );
};

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

 const app = () => (
  <formcontainer.provider>
    <form></form>
  </formcontainer.provider>
);

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

?? ?? ???? ??? ?????

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

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

 NPX CREATE-REACT-APP UNSTADE-NEXT-APP
CD UNSTATED-NEXT-APP
??? ??? ?? ???? ?????

?? ??? ????? store.js ??????.

 // src/store.js
"??"?? {usestate} ?? ??;
"shortid"?? shortid? ?????.
'Unstated-next'?? {createcontainer} ?? ??;

const usestore = () => {
  const [??, setValue] = usestate ( "");
  const [name, setname] = usestate ( "Barney Stinson");
  const [todos, settodos] = usestate ([{id : 1, title : 'write code'}, {id : 2, title : 'milk'}]);
  const [item, setitem] = usestate ( "");

  const handleInput = (event) => setValue (event.target.value);
  const updateName = (???) => {
    event.preventDefault ();
    setName (??);
    setValue ( "");
  };
  const handleitem = (event) => setitem (event.target.value);
  const handlesubmit = (???) => {
    event.preventDefault ();
    settodos ([... todos, {id : shortid.generate (), ?? : item}]);
    setitem ( "");
  };

  return {??, ??, handateNput, UpdateName, todos, item, handlesItem, handlesUbmit};
};

???? Const StoreContainer = CreateContainer (Usestore);

form.js ?? : JS :

 // src/form.js
"React"?? React React;
"./store"?? {storecontainer} ?? ??;

const formcomponent = () => {
  const form = storecontainer.usecontainer ();
  ?? (
    <div>
      <p>?????! {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">?? ??</button>
      </form>
    </div>
  );
};

?? ?? ?? ????;

todo.js ??? :

 // src/todo.js
"React"?? React React;
"./store"?? {storecontainer} ?? ??;

const todocomponent = () => {
  const todo = storecontainer.usecontainer ();
  ?? (
    <div>
      <p>Todos? ??????</p>
      <form onsubmit="{todo.handleSubmit}">
        <input type="text" value="{todo.item}" onchange="{todo.handleItem}">
        <button type="submit">????</button>
      </form>
      <p>???? {todo.name}, ??? ?? ?????.</p>
      <ul>
        {todo.todos.map ((??) =><li key="{item.id}"> {item.title}</li> )}
      </ul>
    </div>
  );
};

?? ?? ??;

App.js ???? :

 'React'?? React React;
"./todo"?? todocomponent ?? ??;
"./form"?? Formcomponent ?? ??;
"./store"?? {storecontainer} ?? ??;

?? ? () {
  ?? (
    <storecontainer.provider>
      <formcomponent></formcomponent>
      <todocomponent></todocomponent>
    </storecontainer.provider>
  );
}

?? ? ????;

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

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