Manage Channel State in React

Introduction

Front-end frameworks have taken over the application development space. There’s a good chance we are using a library such as React, Vue.js, or Angular to develop the front-end of our application. These powerful libraries can all be used to build single-page applications. If we’re using one of these libraries with a real-time Phoenix back end, we need to have a solution in place to use Phoenix Channels. Luckily, it’s easy to integrate Channels into any of these libraries. This section will use Phoenix Channels in a React single-page application.

A user navigates forward and backward in a single-page application without a full-page reload. This allows the application to maintain a state throughout the user’s flow and provide quicker page transitions in the application. The project is fundamental in this section, with much of the code already written for us. This section assumes some React knowledge, but not knowing React won’t block us from progressing.