Getting Started With React using Vite.js

Traditionally We use create-react-app for developing react applications. it is a great tool with the support of eslint, testing with react testing library,css modules,scss out of the box.

create-react-app uses webpack to bundle our application. If we have a large application webpack takes time to bundle our application And even with Hot realoading it takes a couple of seconds to reflect the change. which is not a good development experience.
Enter Vite.js. it uses Esbuild in the development mode and it is written in Go, So it is faster than javascript-based bundler like webpack, rollup, or parcel in the magnitude of 10-100x.
In this tutorial, we are going to use the yarn package manager. you can also use npm if you like.
To get Started just copy-paste the following command one by one.

yarn create @vitejs/app my-app --template react

cd my-app 

yarn dev

Did you see that how 🚀🚀 it was!!!
Before you start writing your react app, you need to know one thing about vite.js. In vite.js If you want to write jsx in your file, you must have the .jsx or .tsx file extension. jsx won't work in .js file extension.

The reason Vite requires .jsx extension for JSX processing is because in most cases plain .js files shouldn't need full AST transforms to work in the browser. Allowing JSX in .js files means every served file must be full-AST-processed just in case it contains JSX.
— Evan You (@youyuxi) February 17, 2021

And this is one of the reasons why vite.js is so fast.

This template is great but does not provide features like eslint or react-testing-library out of the box. So let's add them.
If You don't want to follow the procedure of adding features you just clone the repo in this Link.


git clone https://github.com/pranshushah/vite_js_react_staterpack.git  my-app

yarn install

and you are good to go.

And if you want to feel the pain of adding these features then let's do this thing.

Eslint :-

First, we will add linting in our application, for that write the following command.


yarn add --dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8

And in the package.json file add the following property

+"eslintConfig": {
+   "extends": "react-app"
+ }

If vs code does not reflect the changes restart the text editor.

Sass or scss:-

Now let's add sass or scss. To add scss just install the following module and vite.js will take care of the rest.

yarn add --dev sass

vite.js also supports CSS-modules out of the box.
React testing library:-

For testing to work We need to add lots of modules so we will add all the modules in one go and I will explain them step-by-step later.


yarn add --dev @babel/core babel-eslint babel-jest babel-preset-react-app @testing-library/dom @testing-library/jest-dom @testing-library/user-event jest jest-circus jest-scss-transform jest-watch-typeahead identity-obj-proxy

Modules @testing-library/dom @testing-library/jest-dom @testing-library/user-event jest jest-circus jest-scss-transform jest-watch-typeahead are useful for for running test. Here we are using jest with react-testing-library but you can also use other Testing suites if you want.

Now add the following property in the package.json file.

"jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/jest/mocks/jest.setup.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.scss$": "jest-scss-transform",
      "^.+\\.css$": "<rootDir>/jest/mocks/cssMock.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "resetMocks": true
  }

These properties are useful for jest to work with jsx,tsx,js,css,scss files.
Jest can not read understand jsx directly So that we need transpiler like babel. Modules @babel/core babel-eslint babel-jest babel-preset-react-app are responsible for these. to use babel add the following property in package.json.

+ "babel": {
+     "env": {
+       "test": {
+         "presets": [
+           "react-app"
+         ]
+      }
+    }
+   }

Now any file with an extension of .test.ts,.test.tsx,.test.jsx,.test.js or .spec.ts,.spec.tsx,.spec.jsx,.spec.js or any js,ts,tsx,jsx file in __test__ folder will be covered in test.
One last thing create the jest/mocks folder at the root level and create the cssMocks.js file in it. and add the following code.

module.exports = {
  process() {
    return 'module.exports = {};';
  },
  getCacheKey() {
    // The output is always the same.
    return 'cssTransform';
  },
};

Now create the jest.setup.js file in the jest folder and add the following code.
```
import '@testing-library/jest-dom';
```
Now let's add a script that will run all the tests.

"scripts": {
      "dev": "vite",
      "build": "vite build",
      "serve": "vite preview",
+    "test": "yarn run jest -env=jsdom"
  },

Run yarn test and you will get all the results of the test suits. -Final package.json will look something like this.

{
  "name": "vite_stater_with_scss_react_testing_lib",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "yarn run jest -env=jsdom"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.1",
    "@testing-library/dom": "^7.29.6",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.3",
    "@vitejs/plugin-react-refresh": "^1.1.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-preset-react-app": "^10.0.0",
    "eslint": "^7.5.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.3.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.8",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "jest-circus": "^26.6.3",
    "jest-resolve": "^26.6.2",
    "jest-scss-transform": "^1.0.1",
    "jest-watch-typeahead": "^0.6.1",
    "sass": "^1.32.8",
    "vite": "^2.0.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/jest/jest.setup.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.scss$": "jest-scss-transform",
      "^.+\\.css$": "<rootDir>/jest/mocks/cssMock.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "resetMocks": true
  },
  "babel": {
    "env": {
      "test": {
        "presets": [
          "react-app"
        ]
      }
    }
  }
}

Again if you don't want to or getting some error just clone this repo. If you have any issue related to eslint sass or react-testing-library just write an issue Here.
For more details, you can visit official Docs.
I hope you liked my blog. you want daily updates please follow me.

Getting Started With React using Vite.js

Eslint :-

Sass or scss:-

React testing library:-