Hands-on with React

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: