Sample Repo: https://github.com/cliche818/react_router_ts_test The readme for that repo has links to several guides I used to create my project.

This guide is meant for new Rails project and assumes reader has experience with Webpack, React, and Rails before.

Not an in depth guide, more like a reference…for myself lol.

General Steps to setup Webpacker (v3.5) + React(v16.8) + React Router(v4.3) 1)

rails new [INSERT_APP_NAME] --skip-coffee --skip-sprockets --skip-turbolinks --webpack=react

No need for asset pipeline related files, Webpack replaces this.

Important Files:

  • package.json - where you put all your node module dependencies (yarn add will edit this file)
  • webpacker.yml - the equivalent of Webpack’s base.config.js
  • config/webpack/environment.js - the other portion of Webpack’s base.config.js (use development.js or production.js for difference in environments)
  • hello-react.jsx - default entry point to display react components

Follow tutorial created by someone else: https://www.youtube.com/watch?v=5F_JUvPq410

More details on other files, read this guide (only part 1): https://evilmartians.com/chronicles/evil-front-part-1

2) Edit this file: app/views/layouts/application.html.erb Add

  <%= javascript_pack_tag 'application' %>
  <%= stylesheet_pack_tag 'application' %>

This is to tell the view to use the file generated by Webpack/Webpacker

3)

yarn add react-router-dom

Follow Part 2 of the Tutorial by someone else: https://www.youtube.com/watch?v=hBm5M4u2jLs

4)

bundle exec rails webpacker:install:typescript
yarn add @types/react @types/react-dom

Rename all jsx files to tsx: hello-react.jsx to hello-react.tsx

Further reading: https://github.com/rails/webpacker/blob/master/docs/typescript.md