How to create an UI app using latest Rails + React + Typescript + Jest - June, 2020.
Tags: webdev, react, typescript, rails
Published: 2020-06-06 02:44:13

---
title: How to create an UI app using latest Rails + React + Typescript + Jest - June, 2020.
published: true
description: 
cover_image: https://i.ibb.co/1bxB3Gx/image.png
tags: #webdev #react #typescript #rails
//cover_image: https://direct_url_to_image.jpg
---

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:

```json
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](https://github.com/ngduc/rails-react-typescript-jest/blob/master/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"

```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