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

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

???? ?? ??

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

• ???? ?? ???? ?????.
• ?? ??? ??.
• ??? ?? ? ??? ?? ??? ????.
• ??? ??? ? ??.

?? :

• ??? ?? ??? ???? ??? ??? ?? ?????.
• ????? ?? CSS ?? (?? ? ????? ?? ??)?? ?????.

?? ?? ??

? ?????? node.js ? npm (?? ??? ???)? ?????. ??? ?? ??????. ?? ?? React Creat app? ???? React ????? ????.

 NPX Create-React-App ?? ?????
CD ?? ?????
NPM ??

?? ?? ???? ??? http://localhost:3000 ?? ??????. ??? ?? ? ?? ??? ????? ?? ? ????.

useState

useState ??? ?? ?? ??? ?????. ??? ?? ???? this.state ???? ?? useState ???? ??? ??? ?? ?? ???? ?????. ??? useState ????? ?? ??? ???? ?? ??????.

?? ?? ?? :

 import React, {usestate} 'react';

??? ?? ??? ??? ? ?? "Hello"?? id ??? ???? ??? ??? ?????.

 // app.js
import React, {usestate} 'react';
import './index.css';

???? default () => {
  const [id, setid] = usestate ( "");
  const [nameInput, setNameInput] = usestate ( "");
  const [room, setroom] = usestate ( "");

  const handlesubmit = e => {
    e.preventDefault ();
    if (! nameinput) {
      return alert ( "??? ??? ? ??");
    }
    setid (nameinput); // ?? : ?? ?? nameInput? ?????
    socket.emit ( "??", nameinput, room); // ?? : ?? ?? nameInput? ?????
  };

  // ... (?? ??? ???)
};

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

useSocket hook

Open-Source useSocket Hook? Socket.io ?????? ???? ?? ??? ?????. ?? ?? socket.io ?????? ??? ??? ???? WebSocket ??? ???? ?? ??? ?? ??? ?????.

?? ?? :

 NPM Add use-Socket.io-Client

?? ?? :

 const [socket] = useocket ( 'socket-url');

?? ? ??? :

 'use-socket.io-client'?? avest useocket;
const [socket] = useocket ( ''<your-socket-url> ');
socket.connect ();
Console.log (??);</your-socket-url>

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

useImmer ?

useImmer Hook? ??? ? ??? ?? ??? ?? ??? ??????. ?? ??? ???? ????? ?????. ?? ??? ??? ? ??? ??? ???? ? ?????.

?? ?? :

 NPM ?? IMMER ??

?? ?? :

 const [data, setData] = useImmer (defaultValue);

setData ??? ????? ?? ??? ???? ?? ??? ??? ????????.

 setData (draft => {
  draft.push (newitem);
});

useEffect hook

?? ? useEffect ??? ??? ? ??? ?????. ????? ???? ?? ???? ???? ?? ??? ?????? ?? ? ????.

??:

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

Messages ?? ??? ??? ? ????? ??????.

 const ??? = propss => props.data.map (m =>
  m [0]! == ''?<div> {m [0]} : {m [1]}</div> :<div classname="innermsg"> {m [1]}</div>
));

useEffect ?? ?? ??? ?? ??? ???? ?????.

 useeffect (() => {
  socket.on ( 'update', message => setMessages (draft => {
    draft.push ([ '', message]);
  });
  // ... ?? ?? ???
}, []);

"??"???? ? ?? ???? ??????.

?? ?? ? ??? ??

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

• ??? ???? ???? Online ?? ??.
• ??? ?????? useImmer ? ? ?? ???.
• ??? ?? ???.

??? App.js ? ??? ?????? ?? ?????? ?? ??? Github (?? ??? ??? ??)?? ??? ? ????.

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

? ??? 100 ?? ??? React Hooks? ???? ?? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!