Installing React

We’re going to use React to build up the individual pages for each concert. These pages will contain a seating diagram and will allow you to put together a ticket order.

Now, normally, we wouldn’t use Stimulus and React in the same app—we’d pick one or the other and stick with that choice—but it’s far from the most ridiculous thing we’ve ever done in an app, and we decided that keeping them together would be less confusing than trying to keep track of separate Stimulus and React apps.

We can install React via Webpacker:

bundle exec rails webpacker:install:react

This adds or modifies a couple of files in our build. Most importantly, it adds several packages to the package.json file. In addition to the react package, we get react-dom, which contains React’s DOM-specific features. We also get prop-types, which is a type checking tool that we won’t be using because we’ll be using TypeScript and a couple of add-ons for Babel that will help our Webpacker setup compile the React JSX files.

To get TypeScript working, we need to make a few more changes. First, we need to install the TypeScript type definitions for React and React-DOM:

$ yarn add @types/react @types/react-dom

We need to change the tsconfig.json file to include the line:

"jsx": "react".

It makes that file look like this: