ReactJS has been a popular choice for building user interfaces for web applications for years now. And with the advancement in technology and the rise of real-time communication, the use of AgoraJS and Agora-React-UIKit has become essential for building engaging and interactive experiences.

AgoraJS is a powerful and easy-to-use JavaScript library that enables real-time video, voice, and live broadcasting communication. It supports multiple platforms, including web, mobile, and desktop, making it the perfect choice for building modern and dynamic applications.

Agora-React-UIKit, on the other hand, is a collection of pre-built UI components for ReactJS that makes it easier for developers to integrate AgoraJS into their applications. The UI components are customizable, allowing developers to create unique and seamless user experiences.

In this blog, we will be discussing how to use AgoraJS and Agora-React-UIKit to build engaging and interactive video communication applications with examples. We will cover topics such as setting up the development environment, integrating AgoraJS into your ReactJS application, and customizing the UI components to meet your specific needs.

1️⃣ First, make sure you have an Agora account. If not, sign up for a free account at agora.io. 🔑

2️⃣ Next, create a new project in the Agora Dashboard. 💡

3️⃣ Take note of your App ID and App Certificate. 🔑

4️⃣ In your React project, install the Agora.js library by running this command: npm install agora-react-uikit. 📦

5️⃣ Create a new React component for the video chat. 🎉

import React, { useState } from 'react'
import AgoraUIKit from 'agora-react-uikit'

const App = () => {
  const [videoCall, setVideoCall] = useState(true)
  const rtcProps = {
    appId: '',
    channel: 'test', // your agora channel
    token:'', // use null or skip if using app in testing mode
  }
  const callbacks = {
    EndCall: () => setVideoCall(false),
  }
  return videoCall ? (
    <div
      style={{
        display: 'flex',
        width: '100vw',
        height: '100vh',
      }}
    >

      <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks}  />
    </div>
  ) : (
    <h3 onClick={() => setVideoCall(true)}>Start Call</h3>
  )
}

export default App

And that's it! 🎉 Now you have a working video chat application using the Agora.js Video SDK and React.js.