Creating an open source React component with TypeScript

Opening up our Dell Boomi React components

Here at Dell Boomi, we are proud of the fact that much of the code we write is open source.

Nearly all of our front-end stack is open on Github, but we are always striving to make even more of it available to you guys and gals out there in the open source community. With that in mind, one of our strategies has been to identify those aspects of our stack that would be easy to extract and make more generic.

As a starting point we decided to begin with our React components.

This article will hopefully offer some insight into how I set up a project for a stand-alone React component for a simple login form.

Grab the code for the login form project here on our Github repository.

manywho/react-login-form

Dell Boomi project constraints

To align with our internal technologies, this project must:

• Be written in TypeScript
• Adhere to ESLint rules
• Use Jest and Enzyme for testing

Project prerequisites

• A repository set up on Github
• An NPM account set-up (Need help? See our other Dell Boomi blog!)
• NPM package set up inside the project
• Install React and React DOM
• Creation of a webpack.config.js file in the project root
• Creation of a src folder for the component code

How I got to grips with authoring npm packages

1) Get TypeScript to play nicely with Webpack

Our first step involves getting TypeScript to play nicely with Webpack. TypeScript is a typed super-set of JavaScript that can be compiled to plain JavaScript.

TypeScript - JavaScript that scales.

Here at Dell Boomi we like to use it in our engineering projects as it allows for:

• Static type checking and defining interfaces (JavaScript is a loosely-typed language and so can be quite unwieldy)
• Support of upcoming ES6/ES7 features
• IntelliSense support for many IDE’s.

2) Compiling with Babel and Webpack

Compiling TypeScript for our React component requires using a JavaScript compiler in combination with a JavaScript bundling tool. For this project we are using Babel with Webpack.

Babel is typically used for compiling newer versions of ECMAScript to older, browser compatible versions, but now comes with a preset for compiling TypeScript.

Using just a Babel loader makes the project configuration simpler and has also improved the time it takes to bundle our projects.

To configure Webpack to compile the code using Babel requires installing the following dependencies:

npm install --save @babel/core @babel/preset-react @babel/preset-env @babel/preset-typescript @types/react babel-loader typescript webpack webpack-cli

The following configuration can then be added to the projects webpack.config.js file.

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
},
module: {
  rules: [
     {
       test: /\.tsx?$/,
       use: 'babel-loader',
       exclude: /node_modules/,
     },
   ],
}

The following presets must also be set in the .babelrc file. This file is used by Babel to define the local configuration for this project.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3) Setting up ESLint rules

Applying linting rules are really important when starting any code project.

Why? They improve code quality and enable teams to follow the same coding conventions.

Now, we are using ESLint as opposed to TSLint, since we are using Babel when compiling (JavaScript).

But how can you apply ES linting rules to TypeScript?

The answer? Use the excellent typescript-eslint package:

npm install --save lint eslint @typescript-eslint/eslint-plugin

And then add the following to the projects .eslintrc file:

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
}

If you’re using VS Code as your IDE, you can now enable the VS Code ESLint extension to catch linting errors whilst writing your code. You can take it a step further by running ESLint every time you try to commit code to Github using the lint-staged package which leverages Git hooks.

npm install --save-dev lint-staged

Add the following configuration to the projects package.json file:

"lint-staged": {
  "*.ts": "eslint",
  "*.tsx": [
    "eslint",
    "git add",
  ]
}

Additionally, in the package.json file, inside the scripts key add:

"precommit": "lint-staged",

This will prevent Git commits completing should any linting errors be displayed, which helps ensure code quality.

4) Setting up Jest and Enzyme for testing

With all the different testing frameworks available, writing tests for JavaScript projects can be a bit of a minefield!

For testing React components, we have found that using the Jest testing framework in combination with AirBnb’s Enzyme component testing utility works really well. Configuration for a TypeScript project can be a little more involved though. Start by installing the following packages:

npm install --save-dev jest enzyme enzyme-adapter-react-16 ts-jest react-test-renderer babel-jest @types/jest @types/enzyme

Add a setup file called test-setup.js in the project root. The contents of this file will be executed by Jest when the test suite is run. We are using it to load in Enzyme and define the Enzyme adapter, otherwise we would have to do this inside every test suite that we write.

const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");
enzyme.configure({ adapter: new Adapter() });

The following Jest configuration can then be added to the package.json file:

"jest": {
  "setupFiles": [
    "<rootDir>/test-setup.js"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  }
}

Additionally, in the package.json file, inside the scripts key add:

"test": "jest"

Tests can now be written in TypeScript inside a __tests__ directory in the project root.

Note: It is also important to note that since tests are written in TypeScript, a tsconfig.json file needs to be included in the project root.

You can find out more about writing tests with Jest and Enzyme by reading their excellent documentation (see links at the bottom of this page).

Alternatively, check the basic example test initially written for this project.

Now it’s over to you!

So, it’s over to you to prove the value of the open source community to us here at Dell Boomi…

…can you help make our login form React component even better?

If you would like to contribute to this project then simply clone the repository and follow the steps in the readme to get set up in your development environment. Issues are being tracked inside Github, so go ahead and pick one to tackle and submit a pull request.

manywho/react-login-form

Useful resources

Find out more about the technologies discussed in this post:

TypeScript — JavaScript that scales.

ESLint — Pluggable JavaScript linter

Jest · 🃏 Delightful JavaScript Testing

Introduction · Enzyme

About Dell Boomi

Dell Boomi (Boomi), one of the Dell group of companies, is the leading provider of cloud integration and workflow automation for building The Connected Business.

Our cloud-native, low-code platform helps more than 7,500 organizations run better, faster and smarter. Our technologies connect applications, assure data quality and automate business processes.

Please visit www.boomi.com for more information.