Building Real-time Applications with Phoenix & Elixir/

...

/

Hands-on with React

Hands-on with React

Let's look at a sample React application.

We'll cover the following...

Components in a React application

Well-factored components can be difficult to grasp without a concrete example to show the way. We’ll be working on a Phoenix application with a single-page React front-end. We’ll see examples of container components, presentation components, and how to wire them together with contexts and React Router. There will be a bit of React-specific patterns that we may not be used to, but don’t worry too much if we’re not familiar with React.

The application has several different single-purpose components. We’ll build a container component that holds a basic Phoenix Socket and a presentation component that sends and receives data from a Channel. This example will be based on a mostly complete codebase, so we can jump right into the code without worrying about setting up React.

This example has four pages and looks like the following image:

This is a single-page application; the browser will not perform a full-page reload as we navigate around it. Here’s an overview of the four pages in the application:

  • Home: This page serves only static content, so it doesn’t use a Socket or Channel. The Phoenix Socket is disconnected when this page loads.
  • Pings: This page receives data from the ping topic and displays it in a textarea element. This page has a button that will send data to the Channel when pressed—the response from the Channel is displayed in the textarea element.
  • Other Pings: This page is a clone of the Pings page but is for the other topic. When this page is visited, the ping Channel is closed, and the other Channel is joined.
  • Counter: This page receives data from the ping topic and shows the number of received messages.

The application is basic but will demonstrate how different pages can use other real-time Channels. When we run the application locally, later in the chapter, we’ll see that the Socket and Channel are efficiently cleaned up based on the currently loaded page.

Setting up the project

This application is mostly complete already. An Elixir back-end looks very familiar to what we’ve ...