You should see this page load in the browser:

Preparing Twilio credentials

To connect to Twilio video we will need some credentials. From your Twilio console copy your Account SID and enter it in the .env file as the TWILIO_ACCOUNT_SID .

You will also need an API key and secret, you can create these under the Programmable Video Tools in your console. Create a key pair and add the SID and Secret as TWILIO_API_KEY and TWILIO_API_SECRET to the .env file.

Adding some style

We're not going to concern ourselves with CSS for this post, but let's add some so the result doesn't look awful! Grab the CSS from this URL and replace the contents of src/App.css with it.

Now we're ready to start building.

Planning our components

Everything will start in our App component where we can lay out a header and footer for the app as well as a VideoChat component. Within the VideoChat component we'll want to show a Lobby component where the user can enter their name and the room they want to join. Once they have entered those details we'll replace the Lobby with a Room component that will handle connecting to the room and displaying the participants in the video chat. Finally, for each participant in the room we will render a Participant component that will handle displaying their media.

Building the components

The App component

Open up src/App.js , there's a lot of code here from the initial example app that we can remove. Also, the App component is a class based component. We said we'd build the entire app with functional components, so we better change that.