{"id":3528,"date":"2022-11-09T09:12:08","date_gmt":"2022-11-09T09:12:08","guid":{"rendered":"https:\/\/texnokun.uz\/?p=3528"},"modified":"2023-01-27T05:22:18","modified_gmt":"2023-01-27T05:22:18","slug":"react-va-websockets-bilan-eng-qulay-ishlar-jadvalini-yaratish","status":"publish","type":"post","link":"https:\/\/texnokun.uz\/?p=3528","title":{"rendered":"React va Websockets bilan ENG qulay ishlar jadvalini yaratish"},"content":{"rendered":"\n

Ushbu maqola nima haqida?<\/h2>\n\n\n\n

Ushbu maqolada siz React.js<\/strong> va Socket.io<\/strong>-dan foydalanib jamoaviy ishlar ro’yxatini qanday yaratishni o’rganasiz. Foydalanuvchilar Socket.io orqali ishlarni yaratish, o\u2018qish va o\u2018chirish, shuningdek, har bir ishga izoh qo\u2018shish imkoniyatiga ega bo\u2018ladi. Vazifalar yaratilganda yoki o\u02bbchirilganda, ilova bildirishnoma jo\u2019natadigan qilishni ham o\u02bbrganasiz.<\/p>\n\n\n\n

Novu – birinchi ochiq manbali bildirishnoma (notification<\/strong>) tizimi.<\/p>\n\n\n\n

Novu<\/strong> \u2013 bu birinchi ochiq manbali bildirishnoma (elektron pochta, SMS va boshqalar) tizimidir. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Socket.io nima?<\/h2>\n\n\n\n

Socket.io<\/strong> – bu mashhur JavaScript kutubxonasi bo\u02bblib, u bizga web-brauzerlar va Node.js serveri o\u02bbrtasida bir vaqtda ikki yo\u02bbnalishli aloqani<\/strong> yaratish imkonini beradi. Bu katta hajmdagi ma\u02bclumotlarni minimal kechikish bilan qayta ishlashga mo\u02bbljallangan yuqori unumdorli va mustahkam kutubxona. U WebSocket<\/strong> protokoliga amal qiladi va HTTP uzoq so’rovidan qaytish yoki avtomatik qayta ulanish kabi yaxshi funksionallikni ta’minlaydi, bu esa o\u2019z o\u2019rnida bizga real vaqtda<\/strong> samarali ilovalar yaratish imkonini beradi.<\/p>\n\n\n\n

React va Socket.io orasida birikmani qanday yaratish mumkin?<\/h2>\n\n\n\n

Bu erda siz ilovani yaratish uchun loyiha muhitini o’rnatasiz. Shuningdek, siz ilovaga Socket.io ni qanday qo\u2018shishni va Socket.io orqali real vaqt rejimida muloqot qilish uchun React va Node.js serverini ulashni o\u2018rganasiz.<\/p>\n\n\n\n

Loyiha papkasini yarating. Uning ichida client<\/em> – ya’ni mijoz, hamda server<\/em> – ya’ni server nomli papkalarni oching.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
mkdir<\/span> todo-list<\/span><\/span>\ncd<\/span> todo-list<\/span><\/span>\nmkdir<\/span> client server<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Terminal orqali client <\/em>papkasiga o’ting va yangi React.js loyihasini yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd<\/span> client<\/span><\/span>\nnpx create-react-app .\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Socket.io kengaytmasini va Rea\u0441t Routerni o\u2018rnating. React Router – bu JavaScript kutubxonasi bo\u2018lib, u bizga React ilovasidagi sahifalar orasida harakat qilish imkonini beradi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm install socket.io-client react-router-dom<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
React ilovasidan logotip va test fayllari kabi ortiqcha fayllarni o\u2019chirib tashlang va App.js faylini quyida ko\u2018rsatilganidek Hello<\/em> World<\/em> ko\u2018rsatishi uchun yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><div><\/span><\/span>\n            <\/span><p><\/span>Hello World!<\/span><\/p><\/span><\/span>\n        <\/span><\/div><\/span><\/span>\n    )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Server papkasiga o’ting va package<\/em>.json<\/em> faylini yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd<\/span> server <\/span>&<\/span> npm init \u2013y<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Express.js, CORS, Nodemon va Socket.io Server API-sini o’rnating.<\/p>\n\n\n\n
Express.js<\/strong> \u2013 Node.js ni tez, oddiy kutubxonasi bo’lib, unda web-ilovalarini yaratish uchun bir nechta xususiyatlarni taqdim etadi. CORS – bu turli domenlar o’rtasidagi aloqani ta’minlaydigan Node.js to’plami.<\/p>\n\n\n\n
Nodemon<\/strong> – Node.js vositasi bo\u02bblib, fayllarni o\u02bbzgarishini aniqlagandan so\u02bbng serverni avtomatik ravishda qayta ishga tushiradi, Socket.io esa serverda real vaqtda ulanishni o\u02bbrnatish imkonini beradi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm install express cors nodemon socket.io<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Serverga kirish nuqtasini, index<\/em>.js<\/em> faylini yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
touch index.js<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Express.js bilan oddiy Node.js serverini sozlang. Quyidagi kod parchasi brauzerda http:\/\/localhost:4000\/api ga tashrif buyurilganida JSON obyektini qaytaradi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/index.js<\/span><\/span>\nconst<\/span> <\/span>express<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>"<\/span>express<\/span>"<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> <\/span>app<\/span> <\/span>=<\/span> <\/span>express<\/span>()<\/span>;<\/span><\/span>\nconst<\/span> <\/span>PORT<\/span> <\/span>=<\/span> <\/span>4000<\/span>;<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>use<\/span>(<\/span>express<\/span>.<\/span>urlencoded<\/span>(<\/span>{<\/span> <\/span>extended<\/span>:<\/span> <\/span>true<\/span> <\/span>}<\/span>))<\/span>;<\/span><\/span>\napp<\/span>.<\/span>use<\/span>(<\/span>express<\/span>.<\/span>json<\/span>())<\/span>;<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>get<\/span>(<\/span>"<\/span>\/api<\/span>"<\/span>,<\/span> <\/span>(<\/span>req<\/span>,<\/span> <\/span>res<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>res<\/span>.<\/span>json<\/span>(<\/span>{<\/span><\/span>\n        <\/span>message<\/span>:<\/span> <\/span>"<\/span>Hello world<\/span>"<\/span>,<\/span><\/span>\n    <\/span>}<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>listen<\/span>(<\/span>PORT<\/span>,<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>Server listening on <\/span>${<\/span>PORT<\/span>}<\/span>`<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Mijoz va server domenlari o’rtasidagi aloqani yoqish uchun HTTP va CORS kutubxonasini import qiling.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>express<\/span> = <\/span>require<\/span>(<\/span>"express"<\/span>);<\/span><\/span>\nconst<\/span> <\/span>app<\/span> = <\/span>express<\/span>();<\/span><\/span>\nconst<\/span> <\/span>PORT<\/span> = <\/span>4000<\/span>;<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>use<\/span>(<\/span>express<\/span>.<\/span>urlencoded<\/span>({ <\/span>extended:<\/span> <\/span>true<\/span> }));<\/span><\/span>\napp<\/span>.<\/span>use<\/span>(<\/span>express<\/span>.<\/span>json<\/span>());<\/span><\/span>\n<\/span>\n\/\/ Yangi importlar<\/span><\/span>\nconst<\/span> <\/span>http<\/span> = <\/span>require<\/span>(<\/span>"http"<\/span>).<\/span>Server<\/span>(<\/span>app<\/span>);<\/span><\/span>\nconst<\/span> <\/span>cors<\/span> = <\/span>require<\/span>(<\/span>"cors"<\/span>);<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>use<\/span>(<\/span>cors<\/span>());<\/span><\/span>\n<\/span>\napp<\/span>.<\/span>get<\/span>(<\/span>"\/api"<\/span>, (<\/span>req<\/span>, <\/span>res<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>res<\/span>.<\/span>json<\/span>({<\/span><\/span>\n        <\/span>message:<\/span> <\/span>"Hello world"<\/span>,<\/span><\/span>\n    });<\/span><\/span>\n});<\/span><\/span>\n<\/span>\nhttp<\/span>.<\/span>listen<\/span>(<\/span>PORT<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`Server listening on <\/span>${<\/span>PORT<\/span>}<\/span>`<\/span>);<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Keyin real vaqtda ulanishni yaratish uchun loyihaga Socket.io ni qo’shing. app.get() blokidan oldin quyidagi kodni nusxalang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ Yangi importlar<\/span><\/span>\n.....<\/span><\/span>\nconst<\/span> <\/span>socketIO<\/span> = <\/span>require<\/span>(<\/span>'socket.io'<\/span>)(<\/span>http<\/span>, {<\/span><\/span>\n    <\/span>cors:<\/span> {<\/span><\/span>\n        <\/span>origin:<\/span> <\/span>"http:\/\/localhost:3000"<\/span><\/span>\n    }<\/span><\/span>\n});<\/span><\/span>\n<\/span>\n\/\/ Buni app.get() blokidan oldin qo\u2019ying<\/span><\/span>\nsocketIO<\/span>.<\/span>on<\/span>(<\/span>'connection'<\/span>, (<\/span>socket<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`\u26a1: <\/span>${<\/span>socket<\/span>.<\/span>id<\/span>}<\/span> user just connected!`<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>'disconnect'<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n      <\/span>socket<\/span>.<\/span>disconnect<\/span>()<\/span><\/span>\n      <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\ud83d\udd25: A user disconnected'<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Yuqorida keltirilgan kod blokidagi socket.io(\u201cconnection\u201d) funksiyasi React dasturi bilan birikmani o\u2019rnatadi, keyin har bir kirgan kishi uchun noyob ID yaratadi va har safar foydalanuvchi web-sahifaga kirganda, IDni konsolga yozadi.<\/p>\n\n\n\n
Web-sahifani yangilaganingizda yoki yopganingizda, foydalanuvchi chiqib ketganligini bildiradigan hodisasini ishga tushiradi.<\/p>\n\n\n\n
Package.json faylidagi skriptlar ro’yxatiga start buyrug’ini qo’shish orqali Nodemonni sozlang. Quyidagi kod parchasi Nodemon yordamida serverni ishga tushiradi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/  server\/package.json ichida<\/span><\/span>\n<\/span>\n"scripts"<\/span>: {<\/span><\/span>\n    <\/span>"test"<\/span>: <\/span>"echo <\/span>\\"<\/span>Error: no test specified<\/span>\\"<\/span> && exit 1"<\/span>,<\/span><\/span>\n    <\/span>"start"<\/span>: <\/span>"nodemon index.js"<\/span><\/span>\n  },<\/span><\/span><\/code><\/pre>JSON<\/span><\/div>\n\n\n\n
Endi siz quyidagi buyruq yordamida serverni Nodemon bilan ishga tushirishingiz mumkin.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm <\/span>start<\/span><\/span><\/code><\/pre>BAT<\/span><\/div>\n\n\n\n
Foydalanuvchi interfeysini yaratish.<\/h2>\n\n\n\n
Bu yerda biz ishlar jadvali ilovasi uchun foydalanuvchi interfeysini yaratamiz. Foydalanuvchilar tizimga kirishlari, ishlarni qo\u2018shishlari va o\u2018chirishlari hamda har bir holatga izoh qo\u2018shishlari mumkin bo\u2018ladi.<\/p>\n\n\n\n
Client<\/em>\/src<\/em> papkasiga o’ting va Home<\/em>.js<\/em> hamda Main.js<\/em> fayllarini o’z ichiga olgan komponentlar papkasini yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd<\/span> client<\/span><\/span>\nmkdir<\/span> components<\/span><\/span>\ncd<\/span> components<\/span><\/span>\ntouch Home.js Main.js<\/span><\/span><\/code><\/pre>BAT<\/span><\/div>\n\n\n\n
React Router yordamida yangi yaratilgan komponentlarni turli yo’nalishlarda ko’rsatish uchun App.js faylini yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span> <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>socketIO<\/span> <\/span>from<\/span> <\/span>"socket.io-client"<\/span>;<\/span><\/span>\nimport<\/span> { <\/span>BrowserRouter<\/span>, <\/span>Routes<\/span>, <\/span>Route<\/span> } <\/span>from<\/span> <\/span>"react-router-dom"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>Main<\/span> <\/span>from<\/span> <\/span>".\/components\/Main"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>Home<\/span> <\/span>from<\/span> <\/span>".\/components\/Home"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>socket<\/span> = <\/span>socketIO<\/span>.<\/span>connect<\/span>(<\/span>"http:\/\/localhost:4000"<\/span>);<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>App<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>BrowserRouter<\/span>><\/span><\/span>\n            <\/span><<\/span>Routes<\/span>><\/span><\/span>\n                <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>'\/'<\/span> <\/span>element<\/span>=<\/span>{<\/span><<\/span>Home<\/span> <\/span>\/><\/span>}<\/span> <\/span>\/><\/span><\/span>\n                <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>'\/app'<\/span> <\/span>element<\/span>=<\/span>{<\/span><<\/span>Main<\/span> <\/span>socket<\/span>=<\/span>{<\/span>socket<\/span>}<\/span> <\/span>\/><\/span>}<\/span> <\/span>\/><\/span><\/span>\n            <\/span><\/<\/span>Routes<\/span>><\/span><\/span>\n        <\/span><\/<\/span>BrowserRouter<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
src<\/em>\/index.css<\/em> fayliga o’ting va quyidagi koddan nusxa oling. Unda ushbu loyihani shakllantirish uchun zarur bo’lgan barcha CSS kodlari mavjud.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@import<\/span> <\/span>url<\/span>(<\/span>"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"<\/span>);<\/span><\/span>\n*<\/span> {<\/span><\/span>\n    <\/span>box-sizing<\/span>: <\/span>border-box<\/span>;<\/span><\/span>\n    <\/span>margin<\/span>: <\/span>0<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>0<\/span>;<\/span><\/span>\n    <\/span>font-family<\/span>: <\/span>"Space Grotesk"<\/span>, <\/span>sans-serif<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.navbar<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>height<\/span>: <\/span>10vh<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#256d85<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>justify-content<\/span>: <\/span>space-between<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>0<\/span> <\/span>20px<\/span>;<\/span><\/span>\n    <\/span>color<\/span>: <\/span>#dff6ff<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.form<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>min-height<\/span>: <\/span>20vh<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>justify-content<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>0<\/span> <\/span>30px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.input<\/span> {<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>10px<\/span> <\/span>15px<\/span>;<\/span><\/span>\n    <\/span>width<\/span>: <\/span>80%<\/span>;<\/span><\/span>\n    <\/span>margin-right<\/span>: <\/span>15px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.form__cta<\/span>,<\/span><\/span>\n.home__form<\/span> > <\/span>button<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>200px<\/span>;<\/span><\/span>\n    <\/span>cursor<\/span>: <\/span>pointer<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>10px<\/span>;<\/span><\/span>\n    <\/span>height<\/span>: <\/span>45px<\/span>;<\/span><\/span>\n    <\/span>font-size<\/span>: <\/span>16px<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#256d85<\/span>;<\/span><\/span>\n    <\/span>color<\/span>: <\/span>#dff6ff<\/span>;<\/span><\/span>\n    <\/span>border<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>outline<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>border-radius<\/span>: <\/span>3px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.todo__container<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>flex-direction<\/span>: <\/span>column<\/span>;<\/span><\/span>\n    <\/span>min-height<\/span>: <\/span>300px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.todo__item<\/span> {<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>width<\/span>: <\/span>70%<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>20px<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#ddd<\/span>;<\/span><\/span>\n    <\/span>margin<\/span>: <\/span>10px<\/span> <\/span>0<\/span>;<\/span><\/span>\n    <\/span>justify-content<\/span>: <\/span>space-between<\/span>;<\/span><\/span>\n    <\/span>color<\/span>: <\/span>#06283d<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.deleteBtn<\/span> {<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>5px<\/span> <\/span>10px<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>rgb<\/span>(<\/span>202<\/span>, <\/span>22<\/span>, <\/span>22<\/span>);<\/span><\/span>\n    <\/span>border<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>outline<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n    <\/span>cursor<\/span>: <\/span>pointer<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.deleteBtn:hover<\/span> {<\/span><\/span>\n    <\/span>color<\/span>: <\/span>rgb<\/span>(<\/span>202<\/span>, <\/span>22<\/span>, <\/span>22<\/span>);<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.commentsBtn<\/span> {<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>5px<\/span> <\/span>10px<\/span>;<\/span><\/span>\n    <\/span>margin-right<\/span>: <\/span>10px<\/span>;<\/span><\/span>\n    <\/span>outline<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>cursor<\/span>: <\/span>pointer<\/span>;<\/span><\/span>\n    <\/span>border<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.commentsBtn:hover<\/span> {<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#ddd<\/span>;<\/span><\/span>\n    <\/span>border<\/span>: <\/span>1px<\/span> <\/span>solid<\/span> <\/span>#000<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.modal<\/span> {<\/span><\/span>\n    <\/span>min-height<\/span>: <\/span>100vh<\/span>;<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>position<\/span>: <\/span>fixed<\/span>;<\/span><\/span>\n    <\/span>top<\/span>: <\/span>0<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>justify-content<\/span>: <\/span>center<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.modal__container<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>70%<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n    <\/span>min-height<\/span>: <\/span>80vh<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>30px<\/span>;<\/span><\/span>\n    <\/span>border-radius<\/span>: <\/span>3px<\/span>;<\/span><\/span>\n    <\/span>border<\/span>: <\/span>1px<\/span> <\/span>solid<\/span> <\/span>#333<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.modal__container<\/span> > <\/span>h3<\/span> {<\/span><\/span>\n    <\/span>margin-bottom<\/span>: <\/span>30px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.comment__form<\/span> {<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>margin-bottom<\/span>: <\/span>30px<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.comment__form<\/span> > <\/span>input<\/span> {<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>10px<\/span>;<\/span><\/span>\n    <\/span>border<\/span>: <\/span>1px<\/span> <\/span>solid<\/span> <\/span>#256d85<\/span>;<\/span><\/span>\n    <\/span>width<\/span>: <\/span>70%<\/span>;<\/span><\/span>\n    <\/span>margin-right<\/span>: <\/span>20px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.comment<\/span> {<\/span><\/span>\n    <\/span>margin-bottom<\/span>: <\/span>5px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.comment__form<\/span> > <\/span>button<\/span> {<\/span><\/span>\n    <\/span>padding<\/span>: <\/span>15px<\/span> <\/span>20px<\/span>;<\/span><\/span>\n    <\/span>cursor<\/span>: <\/span>pointer<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#256d85<\/span>;<\/span><\/span>\n    <\/span>color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n    <\/span>outline<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>border<\/span>: <\/span>none<\/span>;<\/span><\/span>\n    <\/span>height<\/span>: <\/span>45px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.home<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>min-height<\/span>: <\/span>100vh<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>flex-direction<\/span>: <\/span>column<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>justify-content<\/span>: <\/span>center<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.home__form<\/span> {<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>flex-direction<\/span>: <\/span>column<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.home__form<\/span> > <\/span>*<\/span> {<\/span><\/span>\n    <\/span>margin-bottom<\/span>: <\/span>10px<\/span>;<\/span><\/span>\n}<\/span><\/span>\n.home<\/span> > <\/span>h2<\/span> {<\/span><\/span>\n    <\/span>margin-bottom<\/span>: <\/span>15px<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre>CSS<\/span><\/div>\n\n\n\n
Bosh sahifa.<\/h2>\n\n\n\n
Bu erda dastur foydalanuvchi nomini qabul qiladi va foydalanuvchini aniqlash uchun uni mahalliy xotirada saqlaydi. Quyidagi kodni Home<\/em> komponentiga nusxalang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useState<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\nimport<\/span> { <\/span>useNavigate<\/span> } <\/span>from<\/span> <\/span>"react-router-dom"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>Home<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>const<\/span> [<\/span>username<\/span>, <\/span>setUsername<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    <\/span>const<\/span> <\/span>navigate<\/span> = <\/span>useNavigate<\/span>();<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>handleSubmit<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n        <\/span>localStorage<\/span>.<\/span>setItem<\/span>(<\/span>"_username"<\/span>, <\/span>username<\/span>);<\/span><\/span>\n        <\/span>\/\/ Ilovaga o'tish<\/span><\/span>\n        <\/span>navigate<\/span>(<\/span>"\/app"<\/span>);<\/span><\/span>\n    };<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'home'<\/span>><\/span><\/span>\n            <\/span><<\/span>h2<\/span>><\/span>Sign in to your todo-list<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n            <\/span><<\/span>form<\/span> <\/span>onSubmit<\/span>=<\/span>{<\/span>handleSubmit<\/span>}<\/span> <\/span>className<\/span>=<\/span>'home__form'<\/span>><\/span><\/span>\n                <\/span><<\/span>label<\/span> <\/span>htmlFor<\/span>=<\/span>'username'<\/span>><\/span>Your Username<\/span><\/<\/span>label<\/span>><\/span><\/span>\n                <\/span><<\/span>input<\/span><\/span>\n                    <\/span>value<\/span>=<\/span>{<\/span>username<\/span>}<\/span><\/span>\n                    <\/span>required<\/span><\/span>\n                    <\/span>onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>) <\/span>=><\/span> <\/span>setUsername<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span><\/span>\n                    <\/span>className<\/span>=<\/span>'input'<\/span><\/span>\n                <\/span>\/><\/span><\/span>\n                <\/span><<\/span>button<\/span>><\/span>SIGN IN<\/span><\/<\/span>button<\/span>><\/span><\/span>\n            <\/span><\/<\/span>form<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Home<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Asosiy component.<\/h2>\n\n\n\n
Bu yerda biz dasturning markaziy qismi uchun foydalanuvchi interfeysini yaratamiz.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Quyidagi kod parchasini Main.js fayliga ko\u2019chiring.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useState<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>Nav<\/span> <\/span>from<\/span> <\/span>".\/Nav"<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>Main<\/span>({ <\/span>socket<\/span> }) {<\/span><\/span>\n    <\/span>const<\/span> [<\/span>todo<\/span>, <\/span>setTodo<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Ish identifikatori sifatida tasodifiy qator hosil qiladi<\/span><\/span>\n    <\/span>const<\/span> <\/span>generateID<\/span> = () <\/span>=><\/span> <\/span>Math<\/span>.<\/span>random<\/span>().<\/span>toString<\/span>(<\/span>36<\/span>).<\/span>substring<\/span>(<\/span>2<\/span>, <\/span>10<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>handleAddTodo<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n    <\/span>\/\/ Har bir ish shunday tuzilishga ega - id, ish va sharhlar.<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>({<\/span><\/span>\n            <\/span>id:<\/span> <\/span>generateID<\/span>(),<\/span><\/span>\n            <\/span>todo<\/span>,<\/span><\/span>\n            <\/span>comments:<\/span> [],<\/span><\/span>\n        });<\/span><\/span>\n        <\/span>setTodo<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    };<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span><\/span>\n            <\/span><<\/span>Nav<\/span> <\/span>\/><\/span><\/span>\n            <\/span><<\/span>form<\/span> <\/span>className<\/span>=<\/span>'form'<\/span> <\/span>onSubmit<\/span>=<\/span>{<\/span>handleAddTodo<\/span>}<\/span>><\/span><\/span>\n                <\/span><<\/span>input<\/span><\/span>\n                    <\/span>value<\/span>=<\/span>{<\/span>todo<\/span>}<\/span><\/span>\n                    <\/span>onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>) <\/span>=><\/span> <\/span>setTodo<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span><\/span>\n                    <\/span>className<\/span>=<\/span>'input'<\/span><\/span>\n                    <\/span>required<\/span><\/span>\n                <\/span>\/><\/span><\/span>\n                <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'form__cta'<\/span>><\/span>ADD TODO<\/span><\/<\/span>button<\/span>><\/span><\/span>\n            <\/span><\/<\/span>form<\/span>><\/span><\/span>\n<\/span>\n            <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__container'<\/span>><\/span><\/span>\n                <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__item'<\/span>><\/span><\/span>\n                    <\/span><<\/span>p<\/span>><\/span>Contributing to open-source<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                    <\/span><<\/span>div<\/span>><\/span><\/span>\n                        <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'commentsBtn'<\/span>><\/span>View Comments<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                        <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'deleteBtn'<\/span>><\/span>DELETE<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__item'<\/span>><\/span><\/span>\n                    <\/span><<\/span>p<\/span>><\/span>Coffee chat with the team<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                    <\/span><<\/span>div<\/span>><\/span><\/span>\n                        <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'commentsBtn'<\/span>><\/span>View Comments<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                        <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'deleteBtn'<\/span>><\/span>DELETE<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__item'<\/span>><\/span><\/span>\n                    <\/span><<\/span>p<\/span>><\/span>Work on my side projects<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                    <\/span><<\/span>div<\/span>><\/span><\/span>\n                        <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'commentsBtn'<\/span>><\/span>View Comments<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                        <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'deleteBtn'<\/span>><\/span>DELETE<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Main<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Yuqoridagi kod parchasi foydalanuvchilarga ishlarni yaratish, sharhlarni ko’rish va mavjud ishlarni o’chirish imkonini beruvchi foydalanuvchi interfeysi.<\/p>\n\n\n\n
Nav komponenti ilovaning navigatsiya panelidir \u2013 keyinchalik ushbu qo\u2018llanmada biz ushbu komponentda Novu yordamida bildirishnomalarni yuboramiz.<\/p>\n\n\n\n
Nav komponentini yarating va unga quyidagi kodni ko’chiring:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ \/src\/components\/Nav.js ichida<\/span><\/span>\nimport<\/span> <\/span>React<\/span> <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>Nav<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>nav<\/span> <\/span>className<\/span>=<\/span>'navbar'<\/span>><\/span><\/span>\n            <\/span><<\/span>h2<\/span>><\/span>Todo List<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n        <\/span><\/<\/span>nav<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Nav<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Tabriklaymiz! Siz ilova uchun foydalanuvchi interfeysini yaratdingiz. Keyingi bo’limlarda siz Socket.io yordamida real vaqtda ma’lumotlarni va Novu yordamida bildirishnomalarni qanday yuborishni o’rganasiz.<\/p>\n\n\n\n
Yangi ishni qanday yaratadi.<\/h2>\n\n\n\n
Ushbu bo’limda men sizga yangi vazifalarni yaratish va ularni Socket.io yordamida React ilovasida ko’rsatishni ko’rsataman.<\/p>\n\n\n\n
Yangi topshiriqni serverga Socket.io orqali yuborish uchun Main<\/em>.js<\/em> dagi handleAddTodo<\/em> funksiyasini yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>handleAddTodo<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n    <\/span>\/\/ Voqeani addTodo Socket.io orqali yuboradi<\/span><\/span>\n <\/span>\/\/ id, ish va bir qator sharhlarni o'z ichiga oladi<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"addTodo"<\/span>, {<\/span><\/span>\n        <\/span>id:<\/span> <\/span>generateID<\/span>(),<\/span><\/span>\n        <\/span>todo<\/span>,<\/span><\/span>\n        <\/span>comments:<\/span> [],<\/span><\/span>\n    });<\/span><\/span>\n    <\/span>setTodo<\/span>(<\/span>""<\/span>);<\/span><\/span>\n};<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Serverda voqea tinglovchisini yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
socketIO<\/span>.<\/span>on<\/span>(<\/span>"connection"<\/span>, (<\/span>socket<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`\u26a1: <\/span>${<\/span>socket<\/span>.<\/span>id<\/span>}<\/span> user just connected!`<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"addTodo"<\/span>, (<\/span>todo<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>\/\/ Ish - React ilovasidan ob'ektni o'z ichiga oladi<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>todo<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"disconnect"<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>disconnect<\/span>();<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"\ud83d\udd25: A user disconnected"<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Ichki serverda barcha ishlarni o’z ichiga olgan massiv yarating va ro’yxatga yangi ishni qo’shing.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ Barcha rejalashtirilgan vazifalarni o'z ichiga olgan massiv<\/span><\/span>\nlet<\/span> <\/span>todoList<\/span> = [];<\/span><\/span>\n<\/span>\nsocketIO<\/span>.<\/span>on<\/span>(<\/span>"connection"<\/span>, (<\/span>socket<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`\u26a1: <\/span>${<\/span>socket<\/span>.<\/span>id<\/span>}<\/span> user just connected!`<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"addTodo"<\/span>, (<\/span>todo<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>\/\/ Vazifalar ro'yxatiga todo ob'ektini qo'shadi.<\/span><\/span>\n        <\/span>todoList<\/span>.<\/span>unshift<\/span>(<\/span>todo<\/span>);<\/span><\/span>\n        <\/span>\/\/ Barcha ishlarni React ilovasiga yuboradi<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"todos"<\/span>, <\/span>todoList<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"disconnect"<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>disconnect<\/span>();<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"\ud83d\udd25: A user disconnected"<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
UseEffect ilgaki yordamida React ilovangizda vazifalar tinglovchisini yarating. Quyidagi koddan nusxa oling:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ src\/components\/Main.js ichida<\/span><\/span>\nuseEffect<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"todos"<\/span>, (<\/span>data<\/span>) <\/span>=><\/span> <\/span>console<\/span>.<\/span>log<\/span>(<\/span>data<\/span>));<\/span><\/span>\n}, [<\/span>socket<\/span>]);<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Vazifalar ro’yxatini quyidagidek ko’rsating:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useState<\/span>, <\/span>useEffect<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>Nav<\/span> <\/span>from<\/span> <\/span>".\/Nav"<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>Main<\/span>({ <\/span>socket<\/span> }) {<\/span><\/span>\n    <\/span>const<\/span> [<\/span>todo<\/span>, <\/span>setTodo<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    <\/span>const<\/span> [<\/span>todoList<\/span>, <\/span>setTodoList<\/span>] = <\/span>useState<\/span>([]);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>generateID<\/span> = () <\/span>=><\/span> <\/span>Math<\/span>.<\/span>random<\/span>().<\/span>toString<\/span>(<\/span>36<\/span>).<\/span>substring<\/span>(<\/span>2<\/span>, <\/span>10<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>handleAddTodo<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"addTodo"<\/span>, {<\/span><\/span>\n            <\/span>id:<\/span> <\/span>generateID<\/span>(),<\/span><\/span>\n            <\/span>todo<\/span>,<\/span><\/span>\n            <\/span>comments:<\/span> [],<\/span><\/span>\n        });<\/span><\/span>\n        <\/span>setTodo<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    };<\/span><\/span>\n<\/span>\n    <\/span>useEffect<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"todos"<\/span>, (<\/span>data<\/span>) <\/span>=><\/span> <\/span>setTodoList<\/span>(<\/span>data<\/span>));<\/span><\/span>\n    }, [<\/span>socket<\/span>]);<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span><\/span>\n            <\/span><<\/span>Nav<\/span> <\/span>\/><\/span><\/span>\n            <\/span><<\/span>form<\/span> <\/span>className<\/span>=<\/span>'form'<\/span> <\/span>onSubmit<\/span>=<\/span>{<\/span>handleAddTodo<\/span>}<\/span>><\/span><\/span>\n                <\/span><<\/span>input<\/span><\/span>\n                    <\/span>value<\/span>=<\/span>{<\/span>todo<\/span>}<\/span><\/span>\n                    <\/span>onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>) <\/span>=><\/span> <\/span>setTodo<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span><\/span>\n                    <\/span>className<\/span>=<\/span>'input'<\/span><\/span>\n                    <\/span>required<\/span><\/span>\n                <\/span>\/><\/span><\/span>\n                <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'form__cta'<\/span>><\/span>ADD TODO<\/span><\/<\/span>button<\/span>><\/span><\/span>\n            <\/span><\/<\/span>form<\/span>><\/span><\/span>\n<\/span>\n            <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__container'<\/span>><\/span><\/span>\n                <\/span>{<\/span>todoList<\/span>.<\/span>map<\/span>((<\/span>item<\/span>) <\/span>=><\/span> (<\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__item'<\/span> <\/span>key<\/span>=<\/span>{<\/span>item<\/span>.<\/span>id<\/span>}<\/span>><\/span><\/span>\n                        <\/span><<\/span>p<\/span>><\/span>{<\/span>item<\/span>.<\/span>todo<\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                        <\/span><<\/span>div<\/span>><\/span><\/span>\n                            <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'commentsBtn'<\/span>><\/span>View Comments<\/span><\/<\/span>button<\/span>><\/span><\/span>\n<\/span>\n                            <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'deleteBtn'<\/span>><\/span>DELETE<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                ))<\/span>}<\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Main<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Hozircha biz faqat birini qo’shganimizdagina mavjud ishlarni ko’rishimiz mumkin. Keling sahifa yuklanganda vazifalarni ko’rsata oladigan qilaylik.<\/p>\n\n\n\n
Serverda vazifalar ro’yxatini qaytaradigan marshrut yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
app<\/span>.<\/span>get<\/span>(<\/span>"\/api"<\/span>, (<\/span>req<\/span>, <\/span>res<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>res<\/span>.<\/span>json<\/span>(<\/span>todoList<\/span>);<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Serverdan vazifalar ro\u02bbyxatini olish va yangi vazifalarni tinglash uchun useEffect ilgakini yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
useEffect<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n    <\/span>function<\/span> <\/span>fetchTodos<\/span>() {<\/span><\/span>\n        <\/span>fetch<\/span>(<\/span>"http:\/\/localhost:4000\/api"<\/span>)<\/span><\/span>\n            .<\/span>then<\/span>((<\/span>res<\/span>) <\/span>=><\/span> <\/span>res<\/span>.<\/span>json<\/span>())<\/span><\/span>\n            .<\/span>then<\/span>((<\/span>data<\/span>) <\/span>=><\/span> <\/span>setTodoList<\/span>(<\/span>data<\/span>))<\/span><\/span>\n            .<\/span>catch<\/span>((<\/span>err<\/span>) <\/span>=><\/span> <\/span>console<\/span>.<\/span>error<\/span>(<\/span>err<\/span>));<\/span><\/span>\n    }<\/span><\/span>\n    <\/span>fetchTodos<\/span>();<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"todos"<\/span>, (<\/span>data<\/span>) <\/span>=><\/span> <\/span>setTodoList<\/span>(<\/span>data<\/span>));<\/span><\/span>\n}, [<\/span>socket<\/span>]);<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Tabriklaymiz, endi biz vazifalar ro’yxatiga yangi ishlarni qo’shishimiz mumkin.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Mavjud ishlarni qanday o’chirish mumkin?<\/h2>\n\n\n\n
Tanlangan ishning identifikatorini oladigan o’chirish tugmasi uchun onClick hodisasini qo’shing.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>button<\/span> <\/span>className<\/span>=<\/span>'deleteBtn'<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>() <\/span>=><\/span> <\/span>deleteTodo<\/span>(<\/span>item<\/span>.<\/span>id<\/span>)<\/span>}<\/span>><\/span><\/span>\n    DELETE<\/span><\/span>\n<\/<\/span>button<\/span>><\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
DeleteTodo<\/em> funksiyasini yarating va ish identifikatorini Socket.io orqali serverga yuboring.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>deleteTodo<\/span> = (<\/span>id<\/span>) <\/span>=><\/span> <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"deleteTodo"<\/span>, <\/span>id<\/span>);<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
DeleteTodo<\/em> hodisasi uchun tinglovchi yarating, bu topshiriqni identifikatori bo\u02bbyicha topshiriqlar ro\u02bbyxatidan olib tashlaydi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ Barcha rejalashtirilgan vazifalarni o'z ichiga olgan massiv<\/span><\/span>\nlet<\/span> <\/span>todoList<\/span> = [];<\/span><\/span>\nsocketIO<\/span>.<\/span>on<\/span>(<\/span>"connection"<\/span>, (<\/span>socket<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`\u26a1: <\/span>${<\/span>socket<\/span>.<\/span>id<\/span>}<\/span> user just connected!`<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"addTodo"<\/span>, (<\/span>todo<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>todoList<\/span>.<\/span>unshift<\/span>(<\/span>todo<\/span>);<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"todos"<\/span>, <\/span>todoList<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Bir qator holatlarni filtrlaydi va<\/span><\/span>\n    <\/span>\/\/ yangilangan ishni React ilovasiga yuboradi.<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"deleteTodo"<\/span>, (<\/span>id<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>todoList<\/span> = <\/span>todoList<\/span>.<\/span>filter<\/span>((<\/span>todo<\/span>) <\/span>=><\/span> <\/span>todo<\/span>.<\/span>id<\/span> !== <\/span>id<\/span>);<\/span><\/span>\n        <\/span>\/\/ React ilovasiga yangilangan ishni yuboradi<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"todos"<\/span>, <\/span>todoList<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n<\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"disconnect"<\/span>, () <\/span>=><\/span> {<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>disconnect<\/span>();<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"\ud83d\udd25: A user disconnected"<\/span>);<\/span><\/span>\n    });<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Endi har bir ishni Socket.io orqali qo’shishingiz va olib tashlashingiz mumkin. Endi har bir ish uchun sharh qo’shish va ko’rsatishni o’rganasiz.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Har bir ish uchun sharhlarni qanday ko’rsatish va qo’shish.<\/p>\n\n\n\n
Ushbu bo’limda men sizga har bir vazifaga sharhlar qo’shishni ko’rsataman va siz Reactda modallarni qanday yaratishni ham o’rganasiz.<\/p>\n\n\n\n
React.js da modal yaratish.<\/h2>\n\n\n\n
Quyida ko’rsatilganidek, har bir holat uchun sharhlarni o’z ichiga olgan Modal<\/em>.js<\/em> faylini yarating:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useState<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>Modal<\/span> = ({ <\/span>socket<\/span> }) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>const<\/span> [<\/span>comment<\/span>, <\/span>setComment<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>addComment<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>({ <\/span>comment<\/span> });<\/span><\/span>\n        <\/span>setComment<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    };<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'modal'<\/span>><\/span><\/span>\n            <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'modal__container'<\/span>><\/span><\/span>\n                <\/span><<\/span>h3<\/span>><\/span>Comments<\/span><\/<\/span>h3<\/span>><\/span><\/span>\n                <\/span><<\/span>form<\/span> <\/span>className<\/span>=<\/span>'comment__form'<\/span> <\/span>onSubmit<\/span>=<\/span>{<\/span>addComment<\/span>}<\/span>><\/span><\/span>\n                    <\/span><<\/span>input<\/span><\/span>\n                        <\/span>className<\/span>=<\/span>'comment__input'<\/span><\/span>\n                        <\/span>type<\/span>=<\/span>'text'<\/span><\/span>\n                        <\/span>value<\/span>=<\/span>{<\/span>comment<\/span>}<\/span><\/span>\n                        <\/span>onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>) <\/span>=><\/span> <\/span>setComment<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span><\/span>\n                        <\/span>required<\/span><\/span>\n                    <\/span>\/><\/span><\/span>\n                    <\/span><<\/span>button<\/span>><\/span>Add Comment<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                <\/span><\/<\/span>form<\/span>><\/span><\/span>\n                <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'comments__container'<\/span>><\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'comment'<\/span>><\/span><\/span>\n                        <\/span><<\/span>p<\/span>><\/span><\/span>\n                            <\/span><<\/span>strong<\/span>><\/span>Nevo - <\/span><\/<\/span>strong<\/span>><\/span> Hello guys<\/span><\/span>\n                        <\/span><\/<\/span>p<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Modal<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Ushbu komponentni modal ko’rinishi uchun biz src<\/em>\/index.css<\/em> faylida quyida bajarilganidek, unga biroz stil berishimiz kerak, ayniqsa pozitsiya va z-index stilini.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
.modal<\/span> {<\/span><\/span>\n    <\/span>min-height<\/span>: <\/span>100vh<\/span>;<\/span><\/span>\n    <\/span>width<\/span>: <\/span>100%<\/span>;<\/span><\/span>\n    <\/span>position<\/span>: <\/span>fixed<\/span>;<\/span><\/span>\n    <\/span>z-index<\/span>: <\/span>10<\/span>;<\/span><\/span>\n    <\/span>top<\/span>: <\/span>0<\/span>;<\/span><\/span>\n    <\/span>background-color<\/span>: <\/span>#fff<\/span>;<\/span><\/span>\n    <\/span>display<\/span>: <\/span>flex<\/span>;<\/span><\/span>\n    <\/span>align-items<\/span>: <\/span>center<\/span>;<\/span><\/span>\n    <\/span>justify-content<\/span>: <\/span>center<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre>CSS<\/span><\/div>\n\n\n\n
Endi, keling View Comment tugmasi bosilganda, Main.js<\/em> faylidagi Modal.js<\/em> komponenti o\u2019zgaradigan qilaylik.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useState<\/span>, <\/span>useEffect<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>Nav<\/span> <\/span>from<\/span> <\/span>".\/Nav"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>Modal<\/span> <\/span>from<\/span> <\/span>".\/Modal"<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>Main<\/span>({ <\/span>socket<\/span> }) {<\/span><\/span>\n    <\/span>const<\/span> [<\/span>todo<\/span>, <\/span>setTodo<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    <\/span>const<\/span> [<\/span>todoList<\/span>, <\/span>setTodoList<\/span>] = <\/span>useState<\/span>([]);<\/span><\/span>\n    <\/span>const<\/span> [<\/span>showModal<\/span>, <\/span>setShowModal<\/span>] = <\/span>useState<\/span>(<\/span>false<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>toggleModal<\/span> = () <\/span>=><\/span> <\/span>setShowModal<\/span>(!<\/span>showModal<\/span>);<\/span><\/span>\n    <\/span>\/\/...boshqa funksiyalar<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span><\/span>\n            ...<\/span><\/span>\n            <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__container'<\/span>><\/span><\/span>\n                <\/span>{<\/span>todoList<\/span>.<\/span>map<\/span>((<\/span>item<\/span>) <\/span>=><\/span> (<\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'todo__item'<\/span> <\/span>key<\/span>=<\/span>{<\/span>item<\/span>.<\/span>id<\/span>}<\/span>><\/span><\/span>\n                        <\/span><<\/span>p<\/span>><\/span>{<\/span>item<\/span>.<\/span>todo<\/span>}<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                        <\/span><<\/span>div<\/span>><\/span><\/span>\n                            <\/span>{<\/span>\/* Bu tugma Modal komponentni o\u2019zgartiradi ---*\/<\/span>}<\/span><\/span>\n                            <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'commentsBtn'<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>toggleModal<\/span>}<\/span>><\/span><\/span>\n                                View Comments<\/span><\/span>\n                            <\/span><\/<\/span>button<\/span>><\/span><\/span>\n                            <\/span><<\/span>button<\/span> <\/span>className<\/span>=<\/span>'deleteBtn'<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>() <\/span>=><\/span> <\/span>deleteTodo<\/span>(<\/span>item<\/span>.<\/span>id<\/span>)<\/span>}<\/span>><\/span><\/span>\n                                DELETE<\/span><\/span>\n                            <\/span><\/<\/span>button<\/span>><\/span><\/span>\n                        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                ))<\/span>}<\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span>{<\/span>\/* Modal komponent asosiy komponentni almashtiradi *\/<\/span>}<\/span><\/span>\n            <\/span>{<\/span>showModal<\/span> ? (<\/span><\/span>\n                <\/span><<\/span>Modal<\/span> <\/span>showModal<\/span>=<\/span>{<\/span>showModal<\/span>}<\/span> <\/span>setShowModal<\/span>=<\/span>{<\/span>setShowModal<\/span>}<\/span> <\/span>\/><\/span><\/span>\n            ) : (<\/span><\/span>\n                <\/span>""<\/span><\/span>\n            )<\/span>}<\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Main<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
View tugmasini bosish orqali modalni ko\u2018rsatish imkoniga ega bo\u2018ldik endi keling, sharhlar konteyneridan tashqarisini bosganimizda modal oynasini yopadigan qilamiz.<\/p>\n\n\n\n
Modal.js<\/em> faylini quyida ko’rsatilganidek yangilang:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useState<\/span>, <\/span>useRef<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>Modal<\/span> = ({ <\/span>socket<\/span>, <\/span>showModal<\/span>, <\/span>setShowModal<\/span> }) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>const<\/span> [<\/span>comment<\/span>, <\/span>setComment<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>modalRef<\/span> = <\/span>useRef<\/span>();<\/span><\/span>\n    <\/span>\/\/(modalRef) konteynerini ustiga bosish modalni yopadi.<\/span><\/span>\n    <\/span>const<\/span> <\/span>closeModal<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>if<\/span> (<\/span>modalRef<\/span>.<\/span>current<\/span> === <\/span>e<\/span>.<\/span>target<\/span>) {<\/span><\/span>\n            <\/span>setShowModal<\/span>(!<\/span>showModal<\/span>);<\/span><\/span>\n        }<\/span><\/span>\n    };<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>addComment<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>({ <\/span>comment<\/span> });<\/span><\/span>\n        <\/span>setComment<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    };<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'modal'<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>closeModal<\/span>}<\/span> <\/span>ref<\/span>=<\/span>{<\/span>modalRef<\/span>}<\/span>><\/span><\/span>\n            ...<\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tabriklaymiz! Siz React ilovasiga modallarni qanday qo’shishni o’rgandingiz. Keling, foydalanuvchilar sharhlar qo’shishi va ko’rsatishi mumkin bo’lsin.<\/p>\n\n\n\n
Ishlar sharhi ko\u2019rsatilishi.<\/h2>\n\n\n\n
Tanlangan ishni identifikatorini serverga yuborish uchun Main<\/em>.js <\/em>dagi toggleModal funksiyasini yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>toggleModal<\/span> = (<\/span>todoId<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"viewComments"<\/span>, <\/span>todoId<\/span>);<\/span><\/span>\n    <\/span>setShowModal<\/span>(!<\/span>showModal<\/span>);<\/span><\/span>\n};<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Serverda ish identifikatorini qabul qiladigan, uning tafsilotlarini oladigan va ularni React ilovasiga yuboradigan tinglovchi yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
socket<\/span>.<\/span>on<\/span>(<\/span>"viewComments"<\/span>, (<\/span>id<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span> = <\/span>0<\/span>; <\/span>i<\/span> < <\/span>todoList<\/span>.<\/span>length<\/span>; <\/span>i<\/span>++) {<\/span><\/span>\n        <\/span>if<\/span> (<\/span>id<\/span> === <\/span>todoList<\/span>[<\/span>i<\/span>].<\/span>id<\/span>) {<\/span><\/span>\n            <\/span>\/\/ ko'rsatish uchun bajariladigan ishlar tafsilotlarini React ilovasiga yuboradi<\/span><\/span>\n            <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"commentsReceived"<\/span>, <\/span>todoList<\/span>[<\/span>i<\/span>]);<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Modal<\/em>.js<\/em> da commentsReceived hodisasi uchun tinglovchi yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
useEffect<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"commentsReceived"<\/span>, (<\/span>todo<\/span>) <\/span>=><\/span> <\/span>console<\/span>.<\/span>log<\/span>(<\/span>todo<\/span>));<\/span><\/span>\n}, [<\/span>socket<\/span>]);<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Quyidagilarni nusxalash orqali sharhlaringizni kiriting:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span>, { <\/span>useEffect<\/span>, <\/span>useRef<\/span>, <\/span>useState<\/span> } <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>Modal<\/span> = ({ <\/span>showModal<\/span>, <\/span>setShowModal<\/span>, <\/span>socket<\/span> }) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>const<\/span> <\/span>modalRef<\/span> = <\/span>useRef<\/span>();<\/span><\/span>\n    <\/span>const<\/span> [<\/span>comment<\/span>, <\/span>setComment<\/span>] = <\/span>useState<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    <\/span>const<\/span> [<\/span>comments<\/span>, <\/span>setComments<\/span>] = <\/span>useState<\/span>([]);<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>closeModal<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>if<\/span> (<\/span>modalRef<\/span>.<\/span>current<\/span> === <\/span>e<\/span>.<\/span>target<\/span>) {<\/span><\/span>\n            <\/span>setShowModal<\/span>(!<\/span>showModal<\/span>);<\/span><\/span>\n        }<\/span><\/span>\n    };<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>addComment<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n        <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n        <\/span>console<\/span>.<\/span>log<\/span>({ <\/span>comment<\/span> });<\/span><\/span>\n        <\/span>setComment<\/span>(<\/span>""<\/span>);<\/span><\/span>\n    };<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Serverdan topshiriq tafsilotlarini tinglaydi<\/span><\/span>\n    <\/span>useEffect<\/span>(() <\/span>=><\/span> {<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>on<\/span>(<\/span>"commentsReceived"<\/span>, (<\/span>todo<\/span>) <\/span>=><\/span> <\/span>setComments<\/span>(<\/span>todo<\/span>.<\/span>comments<\/span>));<\/span><\/span>\n    }, [<\/span>socket<\/span>]);<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'modal'<\/span> <\/span>onClick<\/span>=<\/span>{<\/span>closeModal<\/span>}<\/span> <\/span>ref<\/span>=<\/span>{<\/span>modalRef<\/span>}<\/span>><\/span><\/span>\n            <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'modal__container'<\/span>><\/span><\/span>\n                <\/span><<\/span>h3<\/span>><\/span>Comments<\/span><\/<\/span>h3<\/span>><\/span><\/span>\n                <\/span><<\/span>form<\/span> <\/span>className<\/span>=<\/span>'comment__form'<\/span> <\/span>onSubmit<\/span>=<\/span>{<\/span>addComment<\/span>}<\/span>><\/span><\/span>\n                    <\/span><<\/span>input<\/span><\/span>\n                        <\/span>className<\/span>=<\/span>'comment__input'<\/span><\/span>\n                        <\/span>type<\/span>=<\/span>'text'<\/span><\/span>\n                        <\/span>value<\/span>=<\/span>{<\/span>comment<\/span>}<\/span><\/span>\n                        <\/span>onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>) <\/span>=><\/span> <\/span>setComment<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span><\/span>\n                        <\/span>required<\/span><\/span>\n                    <\/span>\/><\/span><\/span>\n                    <\/span><<\/span>button<\/span>><\/span>Add Comment<\/span><\/<\/span>button<\/span>><\/span><\/span>\n                <\/span><\/<\/span>form<\/span>><\/span><\/span>\n<\/span>\n                <\/span>{<\/span>\/*Sharhlarni ko\u2019rsatadi --- *\/<\/span>}<\/span><\/span>\n                <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'comments__container'<\/span>><\/span><\/span>\n                    <\/span>{<\/span>comments<\/span>.<\/span>length<\/span> > <\/span>0<\/span> ? (<\/span><\/span>\n                        <\/span>comments<\/span>.<\/span>map<\/span>((<\/span>item<\/span>, <\/span>index<\/span>) <\/span>=><\/span> (<\/span><\/span>\n                            <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>'comment'<\/span> <\/span>key<\/span>=<\/span>{<\/span>index<\/span>}<\/span>><\/span><\/span>\n                                <\/span><<\/span>p<\/span>><\/span><\/span>\n                                    <\/span><<\/span>strong<\/span>><\/span>{<\/span>item<\/span>.<\/span>name<\/span>}<\/span> - <\/span><\/<\/span>strong<\/span>><\/span> <\/span>{<\/span>item<\/span>.<\/span>text<\/span>}<\/span><\/span>\n                                <\/span><\/<\/span>p<\/span>><\/span><\/span>\n                            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                        ))<\/span><\/span>\n                    ) : (<\/span><\/span>\n                        <\/span><<\/span>p<\/span>><\/span>No comments available yet...<\/span><\/<\/span>p<\/span>><\/span><\/span>\n                    )<\/span>}<\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Modal<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Vazifalarga sharhlar qo’shish.<\/h2>\n\n\n\n
Main<\/em>.js<\/em> da tanlangan ish identifikatorini o’z ichiga olgan holat yarating. Holatni Modal<\/em>.js<\/em> komponentiga o’tkazing.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>toggleModal<\/span> = (<\/span>itemId<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"viewComments"<\/span>, <\/span>itemId<\/span>);<\/span><\/span>\n    <\/span>\/\/ Ushbu identifikatorni Modal komponentga o'tkazing<\/span><\/span>\n    <\/span>setSelectedItemID<\/span>(<\/span>itemId<\/span>);<\/span><\/span>\n    <\/span>setShowModal<\/span>(!<\/span>showModal<\/span>);<\/span><\/span>\n};<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Sharh ma\u02bclumotlarini serverga yuborish uchun Modal<\/em>.js<\/em> dagi addComment funksiyasini yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>addComment<\/span> = (<\/span>e<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>e<\/span>.<\/span>preventDefault<\/span>();<\/span><\/span>\n    <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"updateComment"<\/span>, {<\/span><\/span>\n        <\/span>todoID:<\/span> <\/span>selectedItemID<\/span>, <\/span>\/\/Main.js faylidan uzatilgan identifikator<\/span><\/span>\n        <\/span>comment<\/span>,<\/span><\/span>\n        <\/span>user:<\/span> <\/span>localStorage<\/span>.<\/span>getItem<\/span>(<\/span>"_username"<\/span>),<\/span><\/span>\n    });<\/span><\/span>\n    <\/span>setComment<\/span>(<\/span>""<\/span>);<\/span><\/span>\n};<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Serverda \u201ctopshiriq sharhlariga\u201d sharh qo’shadigan addComment hodisasi tinglovchisini yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
socket<\/span>.<\/span>on<\/span>(<\/span>"updateComment"<\/span>, (<\/span>data<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>\/\/ Obyektdan elementlarni yo'q qilish<\/span><\/span>\n    <\/span>const<\/span> { <\/span>user<\/span>, <\/span>todoID<\/span>, <\/span>comment<\/span> } = <\/span>data<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span> = <\/span>0<\/span>; <\/span>i<\/span> < <\/span>todoList<\/span>.<\/span>length<\/span>; <\/span>i<\/span>++) {<\/span><\/span>\n        <\/span>\/\/\ud83d\udc47\ud83c\udffb Gets the todo<\/span><\/span>\n        <\/span>if<\/span> (<\/span>todoID<\/span> === <\/span>todoList<\/span>[<\/span>i<\/span>].<\/span>id<\/span>) {<\/span><\/span>\n            <\/span>\/\/\ud83d\udc47\ud83c\udffb Add the comment to the list of comments<\/span><\/span>\n            <\/span>todoList<\/span>[<\/span>i<\/span>].<\/span>comments<\/span>.<\/span>push<\/span>({ <\/span>name:<\/span> <\/span>user<\/span>, <\/span>text:<\/span> <\/span>comment<\/span> });<\/span><\/span>\n            <\/span>\/\/\ud83d\udc47\ud83c\udffb Sends an update to React app<\/span><\/span>\n            <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"commentsReceived"<\/span>, <\/span>todoList<\/span>[<\/span>i<\/span>]);<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n});<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Tabriklaymiz! Endi biz har bir vazifaga sharhlar qo\u2018shishimiz va ularni React ilovasida ko\u2018rsatishimiz mumkin.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Qo\u2019shimcha: Novu bilan bildirishnomalarni yuborish.<\/h2>\n\n\n\n
Agar foydalanuvchi sharh yoki yangi vazifa qo\u02bbshganda ilovangizga bildirishnomalar qo\u02bbshmoqchi bo\u02bblsangiz, buni Nav<\/em>.js<\/em> komponentidagi Novu<\/em> bilan osongina qilishingiz mumkin.<\/p>\n\n\n\n
Novu sizga elektron pochta, SMS va ilova ichidagi bildirishnomalar kabi turli xil bildirishnomalarni qo’shish imkonini beradi.<\/p>\n\n\n\n
React va Node.js ilovasiga Novu qanday qo’shiladi?<\/h2>\n\n\n\n
Ilova ichidagi bildirishnomani qo\u2018shish uchun serverga Novu Node.js SDK va React ilovasidagi bildirishnomalar markazini o\u2018rnating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
#Install on the client<\/span><\/span>\nnpm install <\/span>@<\/span>novu\/notification-center<\/span><\/span>\n<\/span>\n#Install on the server<\/span><\/span>\nnpm install <\/span>@<\/span>novu\/node<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Quyidagi kodni bajarish orqali Novu loyihasini yarating. Sizga shaxsiylashtirilgan boshqaruv paneliga kirish huquqi beriladi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
#Install on the client<\/span><\/span>\nnpx novu init<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Novu loyihasini yaratishdan oldin siz Github-ga kirishingiz kerak bo’ladi. Quyidagi kod parchasi npx novu init-ni ishga tushirgandan so’ng bajarishingiz kerak bo’lgan qadamlarni o’z ichiga oladi.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
Now let's setup your account and send your first notification<\/span><\/span>\n\u2753 What is your application name? Devto Clone<\/span><\/span>\n\u2753 Now lets setup your environment. How would you like to proceed?<\/span><\/span>\n   <\/span>><\/span> Create a free cloud account <\/span>(<\/span>Recommended<\/span>)<\/span><\/span>\n\u2753 Create your account with:<\/span><\/span>\n   <\/span>><\/span> Sign-in with GitHub<\/span><\/span>\n\u2753 I accept the Terms and Condidtions <\/span>(<\/span>https:\/\/novu.co\/terms<\/span>)<\/span> and have read the Privacy Policy <\/span>(<\/span>https:\/\/novu.co\/privacy<\/span>)<\/span><\/span>\n    <\/span>><\/span> Yes<\/span><\/span>\n\u2714Create your account successfully.<\/span><\/span>\n<\/span>\nWe've created a demo web page <\/span>for<\/span> you to see novu notifications <\/span>in<\/span> action.<\/span><\/span>\nVisit: http:\/\/localhost:57807\/demo to continue<\/span><\/span><\/code><\/pre>BAT<\/span><\/div>\n\n\n\n
http:\/\/localhost:57807\/demo<\/em> demo web-sahifasiga tashrif buyuring, sahifadan obunachi identifikatoringizni nusxalang va qo’llanmani o’tkazib yuborish tugmasini bosing. Biz undan keyinroq ushbu qo’llanmada foydalanamiz.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Hujjatdagi ilova ichidagi bildirishnomalar uchun Novu va uning kerakli elementlarini o’z ichiga olishi uchun components<\/em>\/Nav<\/em>.jsfile<\/em> faylini yangilang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>React<\/span> <\/span>from<\/span> <\/span>"react"<\/span>;<\/span><\/span>\nimport<\/span> {<\/span><\/span>\n    <\/span>NovuProvider<\/span>,<\/span><\/span>\n    <\/span>PopoverNotificationCenter<\/span>,<\/span><\/span>\n    <\/span>NotificationBell<\/span>,<\/span><\/span>\n} <\/span>from<\/span> <\/span>"@novu\/notification-center"<\/span>;<\/span><\/span>\nimport<\/span> { <\/span>useNavigate<\/span> } <\/span>from<\/span> <\/span>"react-router-dom"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>Nav<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>const<\/span> <\/span>navigate<\/span> = <\/span>useNavigate<\/span>();<\/span><\/span>\n<\/span>\n    <\/span>const<\/span> <\/span>onNotificationClick<\/span> = (<\/span>notification<\/span>) <\/span>=><\/span><\/span>\n        <\/span>navigate<\/span>(<\/span>notification<\/span>.<\/span>cta<\/span>.<\/span>data<\/span>.<\/span>url<\/span>);<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>nav<\/span> <\/span>className<\/span>=<\/span>'navbar'<\/span>><\/span><\/span>\n            <\/span><<\/span>h2<\/span>><\/span>Todo List<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n            <\/span><<\/span>div<\/span>><\/span><\/span>\n                <\/span><<\/span>NovuProvider<\/span><\/span>\n                    <\/span>subscriberId<\/span>=<\/span>'<YOUR_SUBSCRIBER_ID'<\/span><\/span>\n                    <\/span>applicationIdentifier<\/span>=<\/span>'<YOUR_APP_ID>'<\/span><\/span>\n                <\/span>><\/span><\/span>\n                    <\/span><<\/span>PopoverNotificationCenter<\/span><\/span>\n                        <\/span>onNotificationClick<\/span>=<\/span>{<\/span>onNotificationClick<\/span>}<\/span><\/span>\n                        <\/span>colorScheme<\/span>=<\/span>'light'<\/span><\/span>\n                    <\/span>><\/span><\/span>\n                        <\/span>{<\/span>({ <\/span>unseenCount<\/span> }) <\/span>=><\/span> (<\/span><\/span>\n                            <\/span><<\/span>NotificationBell<\/span> <\/span>unseenCount<\/span>=<\/span>{<\/span>unseenCount<\/span>}<\/span> <\/span>\/><\/span><\/span>\n                        )<\/span>}<\/span><\/span>\n                    <\/span><\/<\/span>PopoverNotificationCenter<\/span>><\/span><\/span>\n                <\/span><\/<\/span>NovuProvider<\/span>><\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>nav<\/span>><\/span><\/span>\n    );<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>Nav<\/span>;<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Yuqoridagi kod parchasi Nav komponentiga Novu bildirishnoma qo’ng’irog’i belgisini qo’shib, bizga ilova ichidagi barcha bildirishnomalarni ko’rish imkonini beradi.<\/p>\n\n\n\n
NovuProvider komponenti uchun abonent identifikatoringiz talab qilinadi – avvalroq http:\/\/localhost:57807\/demo<\/em> saytidan ko\u02bbchirilgan va Novu Manage platformasidagi API kalitlari bo\u02bblimidagi Sozlamalar bo\u02bblimida mavjud ilova identifikatoringiz.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Endi, keling siz ilovaga qo\u2019shmoqchi bo\u2019lgan,funksiyalarni tushundiradigan, ilovaga ish jarayoni yarataylik<\/p>\n\n\n\n
\u201cIshlab chiqish yon panelida\u201d bildirishnomani tanlang va bildirishnoma shablonini yarating. O’zingiz yaratgan shablonni tanlang, \u201cIsh jarayoni muharririni\u201d bosing va ish jarayoni quyidagi kabi ko’rinishiga ishonch hosil qiling:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Yuqoridagi rasmdan tushunsak bo\u2019ladiki, Novu ilova ichidagi bildirishnomani yuborishdan oldin, Digest mexanizmini ishga tushiradi.<\/p>\n\n\n\n
Novu Digest bizga ilova ichida bildirishnomalarni qanday yuborishni nazorat qilish imkonini beradi. U bir nechta hodisalarni to’playdi va ularni bitta xabar sifatida yuboradi. Yuqoridagi rasm har 2 daqiqada bildirishnomalarni yuboradi va agar sizda ko’p foydalanuvchilar va tez-tez yangilanishlar bo’lsa, bu samarali bo’lishi mumkin.<\/p>\n\n\n\n
In-Appstep tugmasini bosing va quyidagi tarkibni kiritish uchun bildirishnoma shablonini tahrirlang.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{{<\/span>userId<\/span>}} <\/span>added<\/span> <\/span>a<\/span> <\/span>new<\/span> <\/span>to<\/span>-<\/span>do<\/span>.<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Novu sizga Handlebars shablonlash mexanizmi yordamida shablonlarga dinamik tarkib yoki ma’lumotlarni qo’shish imkonini beradi.<\/p>\n\n\n\n
Update tugmasini bosish orqali shablonni saqlang va kod muharririga qayting.<\/p>\n\n\n\n
Ilovaga Novu qo’shish.<\/h2>\n\n\n\n
Paketdan Novu-ni import qiling va serverda API kalitingizdan foydalanib namuna yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/server\/index.js<\/span><\/span>\n<\/span>\nconst<\/span> { <\/span>Novu<\/span> } = <\/span>require<\/span>(<\/span>"@novu\/node"<\/span>);<\/span><\/span>\nconst<\/span> <\/span>novu<\/span> = <\/span>new<\/span> <\/span>Novu<\/span>(<\/span>"<YOUR_API_KEY>"<\/span>);<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Novu orqali React ilovasiga bildirishnoma yuboradigan funksiya yarating.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>sendNotification<\/span> = <\/span>async<\/span> (<\/span>template_id<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    <\/span>try<\/span> {<\/span><\/span>\n        <\/span>const<\/span> <\/span>result<\/span> = <\/span>await<\/span> <\/span>novu<\/span>.<\/span>trigger<\/span>(<\/span>template_id<\/span>, {<\/span><\/span>\n            <\/span>to:<\/span> {<\/span><\/span>\n                <\/span>subscriberId:<\/span> <\/span><<\/span>SUBSCRIBER_ID<\/span>><\/span>,<\/span><\/span>\n            },<\/span><\/span>\n        });<\/span><\/span>\n        console.log(result);<\/span><\/span>\n    } catch (err) <\/span>{<\/span><\/span>\n        <\/span>console<\/span>.<\/span>error<\/span>(<\/span>"Error >>>>"<\/span>, { <\/span>err<\/span> });<\/span><\/span>\n    <\/span>}<\/span><\/span>\n};<\/span><\/span>\n<\/span>\nsocket.on("addTodo", (todo) => <\/span>{<\/span><\/span>\n        <\/span>todoList<\/span>.<\/span>unshift<\/span>(<\/span>todo<\/span>);<\/span><\/span>\n        <\/span>socket<\/span>.<\/span>emit<\/span>(<\/span>"todos"<\/span>, <\/span>todoList<\/span>);<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Novu orqali bildirishnomani ishga tushiradi<\/span><\/span>\n        <\/span>sendNotification<\/span>(<\/span>"<TEMPLATE_ID>"<\/span>);<\/span><\/span>\n    <\/span>}<\/span>);<\/span><\/span><\/code><\/pre>JSX<\/span><\/div>\n\n\n\n
Yuqoridagi kod parchasi ilovaga yangi ish qo’shilganda barcha foydalanuvchilarga bildirishnoma yuboradi.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ishlar jadvali yaratilishini yakunlaganingiz bilan tabriklaymiz!<\/p>\n\n\n\n
Xulosa.<\/h2>\n\n\n\n
Hozirgacha siz React va Node.js ilovalarida Socket.io-ni qanday sozlashni va Socket.io orqali server va mijoz o’rtasida muloqot qilishni o’rgandingiz.<\/p>\n\n\n\n
Bu Socket.io va React yordamida qurilishi mumkin bo’lgan oddiy bir ilova. Foydalanuvchi sharh qoldirganda autentifikatsiya, real vaqtda ma\u02bclumotlar bazasi va Novu orqali bildirishnomalarni qo\u02bbshish orqali ilovani yaxshilash mumkin.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ushbu maqolada siz React.js va Socket.io-dan foydalanib jamoaviy ishlar ro’yxatini qanday yaratishni o’rganasiz. Foydalanuvchilar Socket.io orqali ishlarni yaratish, o\u2018qish va o\u2018chirish, shuningdek, har bir ishga izoh qo\u2018shish imkoniyatiga ega bo\u2018ladi. Vazifalar yaratilganda yoki o\u02bbchirilganda, ilova bildirishnoma jo\u2019natadigan qilishni ham o\u02bbrganasiz.<\/p>\n","protected":false},"author":1,"featured_media":3541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[14],"tags":[72,71,70],"class_list":["post-3528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dasturlash","tag-reactjs","tag-soketio","tag-websoket"],"_links":{"self":[{"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/posts\/3528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/texnokun.uz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3528"}],"version-history":[{"count":5,"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/posts\/3528\/revisions"}],"predecessor-version":[{"id":5343,"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/posts\/3528\/revisions\/5343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/texnokun.uz\/index.php?rest_route=\/wp\/v2\/media\/3541"}],"wp:attachment":[{"href":"https:\/\/texnokun.uz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/texnokun.uz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/texnokun.uz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}