quickstart.mdx

sidebar_position	2

Quickstart

import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem";

Get the roomName for the meeting and the participant's authToken from our backend APIs (read more about our server APIs here), and pass them as props to Dyte's DyteMeeting React component.

You can initialize a meeting in your React app, using this component, like below.

<Tabs groupId="node-language" defaultValue="js" values={[ { label: 'JavaScript', value: 'js', }, { label: 'TypeScript', value: 'ts', }, ] }>

import { DyteMeeting } from "dyte-client";

function App() {
  return (
    <div className="App">
      <DyteMeeting
        onInit={(meeting) => {}}
        clientId={`orgId || clientId`}
        meetingConfig={{
          roomName: `roomName`,
          authToken: `authToken`,
        }}
      />
    </div>
  );
}

export default App;

import { DyteMeeting, Meeting } from "dyte-client";

function App() {
  return (
    <div className="App">
      <DyteMeeting
        onInit={(meeting: Meeting) => {}}
        clientId={`orgId || clientId`}
        meetingConfig={{
          roomName: `roomName`,
          authToken: `authToken`,
        }}
      />
    </div>
  );
}

export default App;