DEV Community

Akshay Kamate
Akshay Kamate

Posted on

React boilerplate with Typescript and TDD

#react #typescript #beginners #test

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

Top comments (0)

Read next

wormondeck profile image

Harnessing the Power of useEffect.

wormondeck -

temaweb10 profile image

How I made a file downloader on React and posted it on npm

temaweb10 -

syedbalkhi profile image

How to Choose the Right Programming Language as a Beginner

Syed Balkhi -

dancemove_marscode profile image

MarsCode: Code and Innovate Faster with AI, Start for Free

MarsCode -