mirror of
https://github.com/logos-messaging/docs.waku.org.git
synced 2026-01-09 08:13:07 +00:00
1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
|
"use strict";(self.webpackChunkwaku_guide=self.webpackChunkwaku_guide||[]).push([[6344],{3502:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>c,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"build/javascript/use-waku-react","title":"Build React DApps Using @waku/react","description":"Currently, the JavaScript Waku SDK (@waku/sdk) is NOT compatible with React Native. We plan to add support for React Native in the future.","source":"@site/docs/build/javascript/use-waku-react.md","sourceDirName":"build/javascript","slug":"/build/javascript/use-waku-react","permalink":"/build/javascript/use-waku-react","draft":false,"unlisted":false,"editUrl":"https://github.com/waku-org/docs.waku.org/tree/develop/docs/build/javascript/use-waku-react.md","tags":[],"version":"current","lastUpdatedAt":null,"frontMatter":{"title":"Build React DApps Using @waku/react","hide_table_of_contents":true,"displayed_sidebar":"build"},"sidebar":"build","previous":{"title":"Encrypt, Decrypt, and Sign Your Messages","permalink":"/build/javascript/message-encryption"},"next":{"title":"Scaffold DApps Using @waku/create-app","permalink":"/build/javascript/use-waku-create-app"}}');var a=n(74848),r=n(28453),i=n(4865),o=n(19365);const c={title:"Build React DApps Using @waku/react",hide_table_of_contents:!0,displayed_sidebar:"build"},d=void 0,l={},u=[{value:"Install the dependencies",id:"install-the-dependencies",level:2},{value:"Initialise the Waku provider",id:"initialise-the-waku-provider",level:2},{value:"Build the application interface",id:"build-the-application-interface",level:2},{value:"Send messages using light push",id:"send-messages-using-light-push",level:2},{value:"Receive messages using filter",id:"receive-messages-using-filter",level:2},{value:"Retrieve messages using store",id:"retrieve-messages-using-store",level:2}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.admonition,{type:"caution",children:(0,a.jsxs)(t.p,{children:["Currently, the JavaScript Waku SDK (",(0,a.jsx)(t.code,{children:"@waku/sdk"}),") is ",(0,a.jsx)(t.strong,{children:"NOT compatible"})," with React Native. We plan to add support for React Native in the future."]})}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.a,{href:"https://www.npmjs.com/package/@waku/react",children:"@waku/react"})," package provides components and UI adapters to integrate ",(0,a.jsx)(t.code,{children:"@waku/sdk"})," into React applications effortlessly. This guide provides detailed steps for using ",(0,a.jsx)(t.code,{children:"@waku/react"})," in your project."]}),"\n",(0,a.jsx)(t.h2,{id:"install-the-dependencies",children:"Install the dependencies"}),"\n",(0,a.jsxs)(t.p,{children:["First, set up a project using any ",(0,a.jsx)(t.a,{href:"https://react.dev/learn/start-a-new-react-project",children:"production-grade React framework"})," or an existing React application. For this guide, we will create a boilerplate using ",(0,a.jsx)(t.a,{href:"https://vitejs.dev/guide/",children:"ViteJS"}),":"]}),"\n","\n",(0,a.jsxs)(i.A,{groupId:"package-manager",children:[(0,a.jsx)(o.A,{value:"npm",label:"NPM",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"npm create vite@latest [PROJECT DIRECTORY] -- --template react\n"})})}),(0,a.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"yarn create vite [PROJECT DIRECTORY] --template react\n"})})})]}),"\n",(0,a.jsxs)(t.p,{children:["Next, install the required packages for integrating ",(0,a.jsx)(t.code,{children:"@waku/sdk"})," using your preferred package manager:"]}),"\n",(0,a.jsxs)(i.A,{groupId:"package-manager",children:[(0,a.jsx)(o.A,{value:"npm",label:"NPM",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-shell",children:"npm install @waku/react @waku/sdk protobufjs\n"})})}),(0,a.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,a.jsx)(t.pre,{ch
|