Build the future of communications.
Start Building for Free

React posts

  • By Miguel Grinberg
    A Privacy-First Web Analytics Solution with Twilio Segment A Privacy-First Web Analytics Solution with Twilio Segment

    If you own or manage a website, you likely spend a decent amount of time trying to identify the patterns and trends in how visitors interact and engage with your site. This information is invaluable when trying to improve user experience and attract more visitors. Web analytics services such as the popular Google Analytics make it easy for website administrators to collect large amounts of information about visitors in real time, just by adding a <script> tag to the site’s HTML.

    The problem is that in their quest to provide more and more information, analytics tools have become too invasive, installing their cookies on users’ devices with the purpose of tracking browsing habits and preferences, and even following users as they move through different websites. This has become such a problem that in many parts of the world there are now regulations to protect the online privacy of users. In …

    Read More
  • By Miguel Grinberg
    A Great Looking Star Ratings Chart for your React Application A Great Looking Star Ratings Chart for your React Application

    Every blog post and documentation page on the Twilio website lets readers rate the content with a 1 to 5 star rating. But what do we do with these ratings? We actually track them using an in-house tool, along with other content-related metrics. Initially, this tool showed the average rating for each page as a decimal number, but we soon realized that showing just a number is not sufficient. Our documentation pages, for example, are constantly being expanded and improved, so it is useful to see how the more recent ratings fare against the older ones.

    I hoped to find a star ratings chart component for React that can show star ratings in greater detail, but sadly I could not find any. In fact, I could not even find good examples of sites that visualize their star ratings categorized by their age. In the end, I designed and built my …

    Read More
  • By Oluyemi Olususi
    SymfonyとReactでシングルページアプリケーションを構築する SymfonyとReactでシングルページアプリケーションを構築する

    この記事はOluyemi Olususiこちらで公開した記事(英語)を日本語化したものです。

    はじめに

    PHPで構築されたWebアプリケーションは、優れたユーザー体験を提供するために、フロントエンドで処理される膨大な量のロジックを必要とします。LaravelなどのPHPフレームワークには、Vue.jsを使用してクライアント側のロジックを作成するためのサポートが含まれています。これにより、開発者はこれらの技術を組み合わせることで、アプリケーションを迅速に構築できます。

    Laravelの構造とは逆に、再利用可能なPHPコンポーネントを提供するSymfonyは、特定のライブラリやフロントエンドフレームワークを選びません。開発者は、アプリケーションのフロントエンドのロジックを担うツールを柔軟に選ぶことができます。このチュートリアルでは、SymfonyとReactを使ってシングルページのアプリケーションをシームレスに構築する方法をご紹介します。

    このチュートリアルを最後まで進めると、ReactとSymfonyで作られた再利用可能なユーザーインターフェースコンポーネントを作る方法を学べます。

    前提条件

    このチュートリアルを最後まで進めるには、ReactやSymfonyでアプリケーションを構築するための基本的な知識と、PHPによるオブジェクト指向プログラミングの適度な知識が必要です。

    また、開発するマシンにはNode.jsYarnパッケージマネージャがインストールされていることが必要となります。最後に、依存関係を管理するために、Composerをインストールする必 …

    Read More
  • By Miguel Grinberg
    Synchronized State Variables for React using Twilio Sync Synchronized State Variables for React using Twilio Sync

    State variables are one of the most important building blocks in front end applications developed with the React library. When a state variable is updated, React automatically re-renders any application components that depend on it, ensuring that the application always displays updated information to the user.

    The automatic state update mechanisms in React are fantastic, but they are limited to a single instance of the application. Sometimes, however, an application needs state variables that are automatically synchronized across all running instances of the application. In this tutorial you are going to learn how to create a custom React hook that implements synchronized state variables using Twilio Sync as a cloud storage back end.

    Tutorial demonstration

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • By Phil Nash
    TwilioとReactでSMSを送信する方法 TwilioとReactでSMSを送信する方法

    この記事はPhil Nashこちらで公開した記事(英語)を日本語化したものです。

    SMSメッセージをWebアプリケーションから送信する方法はよく紹介されていますが、SMSメッセージをReactアプリケーションから送信することは可能でしょうか?実は、意外と簡単に実装できます。

    本稿では、SMSメッセージをセキュアに送信するReactアプリケーションを構築する方法をご紹介します。

    クライアント側からREST APIを使うべきでない理由

    技術的には、JavaScriptのクライアント側アプリケーションから直接Twilio REST APIを使いSMSを送信できます。ただし、それを実際に実行すると、Twilio認証情報がサイトを使用中の他人に公開される可能性があります。悪意のあるユーザーは、その認証情報を悪用し、アカウントに高額な請求を発生させる可能性もあります。

    ハッカーのイメージ

    認証情報の悪用を避けるために、Twilio REST APIを実装し、認証情報を晒さずにSMSメッセージを送信する、サーバーサイドアプリケーションを作成します。次に、Reactアプリケーションからバックエンドを呼び出し、認証情報をインターネット上に公開せずに、SMSメッセージを送信します。

    必要なツール

    Twilio REST APIを使用し、アプリケーションからテキストメッセージを送信するには、以下の項目が必要になります。

    Read More
  • By Kelley Robinson
    Build phone verification in React Native with Twilio Verify Build phone verification in React Native with Twilio Verify

    SMS verification is a great way to onboard your users, especially in a mobile app where they have access to their text messages. Phone verification can also help ensure unique users, decrease spam and fraud, or can be used for ongoing login verification. There are many options for verifying users, but SMS verification remains a popular choice for its ease of use.

    This blog post will walk you through how to set up a React Native application from scratch and how to use Twilio's purpose built Verify API for SMS phone verification. If you want to skip ahead, you can find the completed code on my GitHub.

    Prerequisites for building phone verification in React Native & Expo

    Set up your React Native developer environment

    We're using ​​Expo CLI and Expo GO for this tutorial which is quick to set up and get running. You can learn more …

    Read More
  • By Mia Adjei
    Build an Audio Livestream App with Twilio Live Build an Audio Livestream App with Twilio Live

    The amount of online audio content and livestreams is increasing every day. More and more, people are tuning into audio for news, music, fitness, study, and entertainment. So if you have been thinking about creating something in the audio space, maybe you have considered building your own live audio application.

    Perhaps you've already explored Twilio Live to livestream your video feed or create a live screen share. But did you know you can use Twilio Live to create an audio-only experience as well?

    In this tutorial, you will learn how to build an audio livestream application with Twilio Live and React, and then deploy it using Twilio Functions and the Twilio Serverless Toolkit. This will allow you to start sharing your live audio with your friends and community right away. In this project, you'll also use the Twilio Paste design system to quickly build and style your …

    Read More
  • By Ashley Boucher
    ReactとTwilio Programmable Videoでカスタムビデオチャットアプリを作成する ReactとTwilio Programmable Videoで作成するカスタムビデオチャットアプリ

    この記事はTwilio Developer VoicesチームのAshley Boucherこちらで公開した記事(英語)を日本語化したものです。

    このチュートリアルでは、ReactとTwilio Programmable Videoを使用してグループビデオチャット用のWebアプリケーションを作成します。ビデオチャットは友人や家族、同僚とのコミュニケーションに大変便利なツールです。それでは、以下にカスタムビデオチャットアプリを作成する基本手順を紹介します。

    必要条件

    作成するアプリケーションは2つのパートで構成されています。

    1. React.jsのフロントエンド
    2. 任意の言語・プラットフォームで作成されたバックエンド。

    バックエンドはアクセストークンの生成に使用し、ユーザーに権限を付与します。フロントエンドはTwilio Programmable Video JavaScript SDKを使用してビデオチャットロジックを処理します。バックエンドの作成は本稿では説明しませんが、Node.jsユーザー向けにブログ記事「Twilio Functionsを使ってTwilio Chat、Video、Voice用のアクセストークンを生成する」で詳しく説明しています。

    クライアントの作成

    Reactアプリをクローンする

    プログラムの …

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 2) Creating an OCR Communication App with Tesseract.js and React (Part 2)

    This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back end development and testing of the app.

    Part 1: Creating an OCR Communication App with Tesseract.js and React (Part 1)

    In part 1, we built the front end of this OCR communication app:


    completed app

    Let’s now build the back end.

    Building the back end

    Create .env and server.js files in the root directory of the project.

    First, let’s store the Twilio credentials in the .env file.

    Open the .env file in a text editor and paste the following code:

    TWILIO_ACCOUNT_SID=XXXXX
    TWILIO_AUTH_TOKEN=XXXXX
    TWILIO_PHONE_NUMBER=XXXXX
    

    XXXXX represents a placeholder for Twili …

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 1) Creating an OCR Communication App with Tesseract.js and React (Part 1)

    Background

    Optical Character Recognition (OCR) is a technology that optically recognizes handwritten or printed characters as data, and converts them into characters that can be used in computer programs. OCR is used in a variety of fields. For example, OCR is used to detect stolen vehicles by recognizing their license plates, and to digitize printed books.

    Tesseract.js is an open source OCR library that supports over 100 languages. Tesseract.js compiles the Tesseract OCR engine written in C into JavaScript WebAssembly. With Tesseract.js, you can easily build OCR programs that run in the browser.

    In this tutorial, we will show you how to build a React application using Tesseract.js to perform OCR on images directly in the browser, and send the recognized text to you as an SMS.

    This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.