Thursday, 18 February, 2021 UTC
Summary
Of all the JavaScript application frameworks, React.js continues to be the most popular among JavaScript developers.
For developers building Twilio apps, however, learning how to make use of the different Twilio JavaScript SDKs inside React can be a complex process, and there aren’t always easy answers.
In this post, you’ll get a birds eye view of the different Twilio JavaScript SDKs and see examples of how you can utilize them in a React app to make your next project easier.
Prerequisites 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 offers several JavaScript SDKs that are used to develop Twilio apps on the frontend. These are different from the
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.
Programmable Video
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
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.
Conclusion I hope this article helped you start building React apps with the Twilio JavaScript SDKs. Bookmark this page so you have all the resources you need in one place. Also, if you’d love to see more React articles that use these SDKs, send me a shout on Twitter with your ideas!
Ashley is a JavaScript Editor for the Twilio blog. To work with her and bring your technical stories to Twilio, find her at @ahl389 on Twitter. If you can’t find her there, she’s probably on a patio somewhere having a cup of coffee (or glass of wine, depending on the time).
Building Twilio Apps with React: A Guide for Frontend Developers
Get a bird's eye view of the different Twilio JavaScript SDKs and how to utilize them in a React App. See examples, documentation links, and installation instructions in one place.
Quit talking over each other! Muting and Unmuting in your Twilio Programmable Video App with React.js
Expand your Video Chat App built with React.js and Twilio Programmable Video by enabling your participants to mute and unmute their audio and video tracks.
Build React Projects with a Background in Python, Flask, HTML, and CSS
Learn how to use your background in Python, Flask, and HTML to start your first React JavaScript project so you can scale up the project.