Real-Time Phoenix

Hands-On with React

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. You’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 you may not be used to, but don’t worry too much if you’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 also a presentation component that sends and receives data from a Channel. This example will be based on a mostly complete codebase so you can jump right ...