How to create an UI app using latest Rails + React + Typescript + Jest — June, 2020

This article will show you how to create an UI app using Rails + React + Typescript + Jest with the latest versions.

First, make sure you have these requirements installed:

• ruby 2.7.0p0
• gem 3.1.2
• rails 6.0.3.1
• node 13.x
• yarn 1.22.0

Create your Rails application with React support:

$ rails new myapp --webpack=react
$ cd myapp
Add Typescript:
$ bundle exec rails webpacker:install:typescript

Add `eslint` which is a linting program to check for syntax errors in your typescript code:

$ yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-preact @types/webpack-env eslint-plugin-react -D
$ yarn add babel-plugin-transform-react-jsx

Add ".eslintrc" - a config file of eslint:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  settings: {
    react: {
      version: 'detect'
    }
  }
};

Now we have the base rails app with React & Typescript support. Next, create your first Rails Controller:

$ rails generate controller hello
Open "app/controllers/hello_controller.rb", update it:
class HelloController < ApplicationController
  def home
  end
end
Open "config/routes.rb", update it to point root URL to the new controller:
Rails.application.routes.draw do
  root to: 'hello#home'
end

We also need a "View" file to render the page:

Open "app/views/hello/home.html.erb", add:
<%= javascript_pack_tag 'hello_typescript' %>
<h1>Hello world!</h1>

Finally, you can create your first React component in Typescript: "app/javascript/packs/hello_typescript.tsx" (source link at the bottom)

It's time to add Jest so you can write some jest tests:

$ yarn add jest ts-jest @types/jest @testing-library/react @testing-library/jest-dom -D

In "package.json", add "jest" section point to "setupTests.ts" file to configure jest. Also add "script" section so we can run `$ yarn lint` and `$yarn test`:

"scripts": {
  "lint": "eslint app/javascript/**/*.ts[x]",
  "test": "jest"
}

Write your first test "hello.spec.tsx"

import * as React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { Hello } from './hello_typescript';
it('Hello test', () => {
  const { container } = render(<Hello name="Jest" />);
  expect(container).toHaveTextContent('Hello Jest!');
});

That's it! Now you can enjoy your Rails app with the latest support from React, Typescript and Jest! It's time to run your app:

$ rails s --binding=127.0.0.1

I will write another article to show how to create and use a Rails API endpoint from a React component.

Links:

• Source code: https://github.com/ngduc/rails-react-typescript-jest