Announcing vite-react-ts-extended

Ryota Murakami
Ryota Murakami

Getting Start template! 👉 https://github.com/laststance/vite-react-ts-extended

2020 Webpack & Babel is de facto

This year there has been a big movement in build tools in the JavaScript community.
In 2020, Webpack https://2020.stateofjs.com/en-US/technologies/), especially in combination with Babel, seemed to be the de facto standard for build tools.

2021 New bundler ESBuild by Golang

However, in 2021, the popularity of a completely new development environment/build tool that does not include Webpack has skyrocketed.
Yes, it is Vite.
Super-fast DevServer, super-fast HMR, super-fast build with [ESBuild](https://esbuild.github.io/) that starts without build.
Vite solves the problem that Webpack+Babel stacks used to have, that Local environment and Production builds become noticeably slower in proportion to the scale of the project.
In [NPM Trend](https://www.npmtrends.com/vite-vs-create-react-app), you can see that Vite has overtaken the number of downloads of create-react-app since July. Next.js adopt SWC over the Babel

The Next.js team has also responded by abandoning Babel and introducing [SWC](https://github.com/swc-project/swc), an ultra-fast TypeScript compiler, in Next v12.

vite-react-ts-extended

What does that mean for us React Developers?
The answer is that Create React App is no longer a good choice for many use cases.
After four to five years of use as a Production Web Service, a demo for libraries, etc., and as a front-end for Toy App, the create react app seems to have become difficult to keep up with.ASo I created a Vite template for React-TypeScript that inherits the good points of create-react-app.

The Vite default `react-ts` template lacked Jest and ESLint (Prettier integrated).
TailwindCSS has also been set up, which is useful if you want to start writing demo or experimental code right after installation.

Jest comes pre-installed with React-Testing-Library, Hook-Testing-Library, MSW, and TypeScript support.

You can easily install and run Jest with the following commands,

yarn
````
npx degit laststance/vite-react-ts-extended myapp
cd myapp
yarn install
yarn dev
```
npm
```
npx degit laststance/vite-react-ts-extended myapp
cd myapp
npm install
npm run dev
```

github: https://github.com/laststance/vite-react-ts-extended

so I would be happy if you could use it as a way to build a instant React+TypeScript development environment for new libraries or anything else! 💅