Learning Just Enough React

We’ve validated our Webpack setup, but we still don’t have the full picture of what is going on. What is a .jsx file, and what is the odd syntax inside app/javascript/packs/hello_react.jsx? We can answer these questions by talking about what React is and why we’re using it.

In the previous lesson, we stated that React is a view library for JavaScript. Like the .erb files we’ve been using, React dynamically renders HTML. Unlike ERB, React does this in the browser and it is optimized to do it quickly. Since the selected pay type will only affect a small part of our page, it will make for a better user experience to have React rerender that part of our page rather than having the server re-render the entire thing.

React is more than just a library with some handy functions we can call, though. It’s actually a mini-framework that includes extensions to JavaScript to make our work easier. Once we understand how to use those extensions, our job of creating a dynamic payment details form will result in easy-to-understand code that’s also easy to manage thanks to Webpacker.

The core concept in React is components. A component is a view backed by some sort of state. When the state changes, the view rerenders. The view can behave differently depending on the current state inside the component. For us, we’ll track the currently selected pay type as our state and have our view render different input tags based on that.

We could certainly accomplish all of this using React’s JavaScript API. However, the resulting code would be verbose, hard to follow, and hard to maintain. We mentioned React’s extensions to JavaScript, which is JSX. JSX allows us to intermix JavaScript code and HTML-like markup in one file. The result might look a bit odd at first, but it’s quite convenient for implementing components.

React provides a compiler from JSX to JavaScript, and Webpack can use that compiler as part of its build process. Let’s learn what JSX is and what it can do by replacing our existing pay-type drop-down with a React component that behaves the same way.

Creating a React-powered drop-down

To get a sense of how to work with React and Webpack, we’ll replace the existing pay-type drop-down that’s being rendered by Rails with one that’s rendered by React. Doing this requires three steps:

1. Create a new pack called pay_type that’ll be the root of our implementation.

2. Create the PayTypeSelector component in line 7 that we’ll use to replace the existing pay type selector drop-down.

3. Bring the component into our checkout the view using javascript_pack_tag() in line 6 of orders view and a piece of markup that React can hook into to render the component.

This won’t change how our application behaves, but it will allow us to see all the moving parts and understand what they do.

Creating a new pack

As we mentioned, packs go in app/javascript/packs, so we’ll create our new pack in app/javascript/packs/pay_type.jsx. This code is not a React component, but is instead just a few lines of code to bootstrap our React component and get it onto our page.

The most straightforward way to do that is to locate an element in the DOM and use the React function React.render() to render our component into that element. Let’s see the code first, then we’ll go through and explain what’s happening line by line.