TheLazy.Dev
Portfolio GitHub

Blog

react |typescript |beginners |test

React boilerplate with Typescript and TDD

akshaykamate

Akshay Kamate

Posted on October 21, 2022

React boilerplate with Typescript and TDD

TL;DR: Creating a ReactJS application with a boilerplate react-boilerplate. This post is regarding the tools used to built a good application

Integration

  • ViteJS: a rapid development tool for modern web projects ⚡
  • TailwindCSS: CSS framework 💄
  • Jest - TDD testing framework 🧪
  • Prettier - opinionated code formatter 🥰
  • Eslint - identifying problematic patterns found in JavaScript code 📃
  • Husky - improves your commits and more 🐶 woof!
  • Typescript - a strict syntactical superset of JavaScript 📝

Manual setup each tool

ViteJS

Official Docs get started with Vite

npm create vite@latest react-boilerplate -- --template react-ts
cd react-boilerplate
npm i
npm run dev # Run the react application
Enter fullscreen mode Exit fullscreen mode

Prettier

Install dependency

npm i -D prettier
Enter fullscreen mode Exit fullscreen mode

Create config file .prettierrc

{
 "printWidth": 80,
 "trailingComma": "none",
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true,
 "jsxSingleQuote": true,
 "bracketSameLine": true
}
Enter fullscreen mode Exit fullscreen mode

Ignore files to be modified by prettier .prettierignore

node_modules
dist
dist-ssr
*.local
.DS_Store
Enter fullscreen mode Exit fullscreen mode

Eslint

Install dependencies

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-simple-import-sort
Enter fullscreen mode Exit fullscreen mode

Create config file .eslint.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "env": {
    "browser": true,
    "amd": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended" // Make sure this is always the last element in the array.
  ],
  "plugins": ["simple-import-sort", "prettier"],
  "rules": {
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
    "react/react-in-jsx-scope": "off",
    "jsx-a11y/accessible-emoji": "off",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": ["Link"],
        "specialLink": ["hrefLeft", "hrefRight"],
        "aspects": ["invalidHref", "preferButton"]
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Ignore files to be lint by eslint .eslintignore

node_modules
.DS_Store
dist
dist-ssr
*.local
node_modules/*
Enter fullscreen mode Exit fullscreen mode

TailwindCSS

Official Docs

Install dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

create postcss.config.cjs

module.exports = {
  plugins: {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    tailwindcss: {},
    autoprefixer: {}
  }
}
Enter fullscreen mode Exit fullscreen mode

create config file tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}
Enter fullscreen mode Exit fullscreen mode

update src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

sample test for tailwindCSS component src/App.jsx

export default function App() {
  return (
    <div className='flex h-screen'>
      <div className='m-auto'>
        <h1 className='text-5xl'>Welcome to React Boilerplate</h1>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Jest

Install dependencies

npm i -D @types/jest babel-jest jest jest-environment-jsdom ts-jest
Enter fullscreen mode Exit fullscreen mode

create config file jest.config.cjs

import type { Config } from 'jest'

const config: Config = {
  verbose: true,
  rootDir: 'src',
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  testEnvironment: 'jsdom'
}

export default config
Enter fullscreen mode Exit fullscreen mode

Husky

Install dependencies

npm i -D husky lint-staged
Enter fullscreen mode Exit fullscreen mode

create pre commit checks via husky .husky/pre-commit

#!/bin/sh

npx lint-staged
npm test
Enter fullscreen mode Exit fullscreen mode

update for linting package.json

{
  ...
  "lint-staged": {
    "*.{js,css,md,vue,json,ts,tsx,jsx}": "lint"
  }
}
Enter fullscreen mode Exit fullscreen mode

Miscellaneous 

npm i -D ts-node
Enter fullscreen mode Exit fullscreen mode

create an editor config file .editorconfig

# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
akshaykamate
Akshay Kamate

Posted on October 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React boilerplate with Typescript and TDD
react React boilerplate with Typescript and TDD

October 21, 2022