Introduction to Using React with Rails
Explore how React works within Rails to add interactive, stateful components using JSX. Understand the differences between React and Stimulus, and learn how React manages state and updates the DOM automatically to enhance user experience.
We'll cover the following...
Introduction
React has emerged as the most popular of the current JavaScript frameworks, with a large ecosystem and user base. Structurally, React is the polar opposite of Stimulus. It is more complex, and its design reflects fundamentally different assumptions about how to manage state and logic in a JavaScript program. Specifically, a React application expects to get data from the server, managing state and HTML by manipulating the DOM on the client using a custom HTML-generation language called JSX.
For this course, we will only use a fraction of React’s capabilities. That is, we’ll focus on using React to support interactivity on a single page while working with our Rails application. We won’t focus on using React for a single-page application. A single-page application is very useful in some circumstances, but it is more complex and less likely to benefit from Rails as the back-end. We’re going to focus on simpler use cases for the purposes of this course.
What is React?
React is a JavaScript client-side framework that allows us to enhance HTML markup with custom JavaScript for complex user interactions. React uses a mini-language called JSX to allow us to write HTML-style markup inside our JavaScript or TypeScript code.
How React is Different from Stimulus?
React is designed using a fundamentally different model of interaction than Stimulus. Stimulus is designed to allow us to add interactivity to HTML markup that is already completed. In React, the markup is written using React’s own JSX language and React controls what is written to the DOM within its boundaries.
The two tools also handle internal state differently. In Stimulus, we keep state using the DOM itself or on the server and are responsible for updating the page when state changes. In React, state is kept within the React system. When the state changes, the React run-time loop updates the DOM automatically to reflect the new state.
Reacts Approach
React’s approach to displaying values is called declarative or reactive. Both terms refer to the same process. When it comes to displaying information in React, it’s the developer’s job to declare the output in code and the system’s job to react to changes in values by redrawing the page.
React manages this process by maintaining its own virtual DOM and using that virtual DOM to update only the parts of the DOM that change when a state value changes. In order to allow the DOM to change automatically, however, React needs to be notified of when we change a value that is relevant to the display in the browser. Because of this, we can only change state in React using specific functions provided by the framework, which trigger the resulting browser display changes.
As we’ll see, React allows us to declare a specific value as part of the changeable state, and when we do so, React provides us with a custom setter function that changes that value. When we use these setter functions, React notices the state change and updates the parts of the DOM that are affected by the change in values.
Most of the code we write in React will be in a component. A React component is a function that behaves somewhat like a template, combining data with markup written using JSX that results in the HTML that is sent to the DOM. As we’ll see, JSX allows us to mix JavaScript logic with HTML tags and calls to other React components.