Installing React

Configuration

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

Stimulus and React are not normally used in the same app, but for the purposes of this course we’ve kept them together to avoid having to keep track of separate Stimulus and React apps.

Webpacker is already set up to handle React if React’s webpack loader is set up, so let’s do that:

yarn add react react-dom @babel/preset-react @types/react @types/react-dom

This command 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 get a Babel package, which allows our build to compile JSX files. We also get the @types packages, which contain TypeScript definitions for React and React-DOM (we’ll talk more about what these modules contain in Advance TypeScript).

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

"jsx": "react",

which makes that file look like this: