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
which makes that file look like this: