To make the most of the resources in this post, you should have:
- A free Twilio account (if you sign up with this link, we’ll both get $10 in Twilio credit when you upgrade your account)
- A working knowledge of React
- Node.js installed on your machine
- npm, yarn, or another package manager
twilio-node server-side helper library that you could use inside a Twilio Function or another backend Node.js app. These SDKs allow you to build browser apps for video calling, voice calling, chat, and more. They include:
- The Twilio Client JS SDK for Programmable Voice
- The Conversations API JS SDK for building chat apps
- The Twilio Programmable Video JS SDK
- The Twilio Sync JS Library
Generating Access Tokens
To make use of these SDKs, you need a way to authenticate your users with Twilio in a way that doesn’t expose your Twilio credentials. That means that even though the app is built on the client side, you’ll still need a backend server to generate access tokens. These tokens verify the client's identity and grant it access to Twilio API features.
Generate Access Tokens in Node.js
Generate Access Tokens in Python
Programmable Voice and Twilio Client JS SDK
The Twilio Client JS SDK is for building Programmable Voice apps in the browser. With this SDK, you can “open inbound and outbound audio connections to Twilio for building softphones, walkie-talkies, conference calls, click-to-talk systems, and more, all from the browser.”
To install it from your command line:
npm install twilio-client
Once you’ve installed the SDK and generated your access token, you’re free to start building your Programmable Voice React app.
See how to build a browser-based walkie talkie with the Twilio Client JS SDK and React.
Conversations API and Programmable Chat
Twilio Programmable Chat, used to develop text-based chatting applications, is being replaced by the Conversations API. Programmable Chat will be sunsetted in July of 2022. Luckily, the Conversations API is built on the same foundations as Programmable Chat, with a few key differences. And for React developers, the overall implementation strategy should be the same.
Install the Conversations API JS SDK:
npm install --save @twilio/conversations
Explore building a multi-room web chat app with Flask, React, and the Conversations API.
Learn how this author built a basic React chat app with Programmable Chat.
The Programmable Video JS SDK can be used to build robust and high quality video and voice calling apps in the browser. Check out the detailed API documentation available.
Install the Programmable Video JS SDK:
npm install --save twilio-video
Learn how to build a basic video chat app with React class components.
See how to build a video chat app with React functional components and hooks.
Twilio Sync is a “state synchronization service, offering two-way real-time communication between browsers, mobiles, and the cloud.” Many of Twilio’s APIs use Sync under the hood.
To get started with the Sync JS Library, install it with this command:
npm install --save twilio-sync
Develop a server push solution with React, Flask, and Twilio Sync.
Checkout the Twilio Sync and React Quickstart by the Twilio Developer Education team.