Skip to content

Using webpacker, react and TypeScript with rails in a new app

Eric Ackermann edited this page Dec 6, 2019 · 1 revision

First, install the lastest nodejs version:
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
After this add to Gemfile:

gem 'webpacker'
gem 'react-rails'

Run this commands to set up webpacker with react:

rails webpacker:install      
rails webpacker:install:react    
rails generate react:install    

Add this statement to the head of application.html.erb, below the turbolinks include:

<%= javascript_pack_tag 'application' %>

Add Typescript:

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

Generate an example component:

rails g react:component HelloWorld greeting:string --ts

Import it into some html.erb view:

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

Working example: https://github.com/swt2-intro-exercise/rails-exercise-19-WorldofJARcraft/tree/ts