alexey-koran/react-template

Up-to date react + typescript template

React template

Node	Package manager

Installation

Tip

Highly recommend

PNPM as a package manager

NVM as a Node.js version manager

git clone repo_url
cd project_location
pnpm i

Scripts

Important

Development server use the 8080 port

http://localhost:8080/

Note

allJsTsExtensions = js, cjs, mjs, jsx, cjsx, mjsx, ts, cts, mts, tsx, ctsx, mtsx

For the more details check scripts section in package.json

Scripts table

Command	Description	Path
	Dev server
pnpm dev	dev-server in developer mode (hot reload)
pnpm prod	dev-server in production mode (build optimizations)
	Build application
pnpm clean	clean build folder	./build
pnpm buildapp	build application for deploy	./build
pnpm build	clean build folder & build application for deploy	./build
	Code linting & formatting
pnpm prettier	code format check	**/*.{allJsTsExtensions,pcss}
pnpm prettier:fix	code format autofix	**/*.{allJsTsExtensions,pcss}
pnpm lint	eslint check	**/*.{allJsTsExtensions}
pnpm lint:fix	eslint autofix	**/*.{allJsTsExtensions}
pnpm lint:fix-staged	eslint autofix	only on git staged files
pnpm lint:css	stylelint check	./src
pnpm lint:css:fix	stylelint autofix	./src
pnpm lint:css:fix-staged	stylelint autofix	only on git staged files
pnpm lint-all	prettier, eslint & stylelint check processes in order	see above
pnpm fix-all	prettier, eslint & stylelint autofix processes in order	see above
pnpm fix-staged	scripts from .lintstagedrc in autofix mode	only on git staged files
	Analyzation & config check
pnpm analyze	analyze webpack bundle
pnpm test:eslint-config	eslint config inspector, displays flat configs & rules
pnpm test:webpack-config	webpack config test
	Optimization
pnpm svgo $FILE_PATH	svgo on passed .svg file for optimization	$FILE_PATH
pnpm svgo-all	svgo on all .svg files in the project for optimization	./src
	Utility
pnpm prepare	runs automatically after installation, setup husky

Dependencies

Note

For the more details check dev & prod dependencies in package.json

Dependencies table

Package name	Description	Version
	Webpack
webpack	application bundler	v5.94.*
webpack-cli	CLI for webpack	v5.1.*
webpack-dev-server	development server	v5.0.*
webpack-bundle-analyzer	application bundle analysis	v4.10.*
	Plugins
fork-ts-checker-webpack-plugin	runs TypeScript type checker on a separate process	v9.0.*
html-webpack-plugin	generate HTML5 output file entry path: ./src/public/index.html	v5.6.*
mini-css-extract-plugin	create a CSS file per JS file which contains CSS	v2.9.*
copy-webpack-plugin	copy files to the build directory entry path ./src/static	v12.0.*
dotenv-webpack	support .env and other environment variables	v8.1.*
	Loaders
esbuild-loader	faster alternatives for transpilation and minification with esbuild	v4.2.*
@svgr/webpack	transform SVG's into React components	v8.1.*
style-loader	inject CSS into the DOM	v4.0.*
css-loader	interprets @import and url() like import/require() and will resolve them	v7.1.*
postcss-loader	loader to process CSS with PostCSS	v8.1.*
	Typescript
typescript	TypeScript is JavaScript with syntax for types	v5.5.*
ts-node	TypeScript execution and REPL for node.js	v10.9.*
	React
react	library for web and native user interfaces	v18.3.*
react-dom	React package for working with the DOM	v18.3.*
react-error-boundary	reusable React error boundary component	v4.0.*
	CSS
tailwindcss	A utility-first CSS framework for rapidly building custom user interfaces	v3.4.*
postcss	tool for transforming styles with JS plugins	v8.4.*
postcss-preset-env	polyfills modern CSS based on .browserslistrc	v10.0.*
postcss-import	PostCSS plugin to transform @import rules by inlining content	v16.1.*
postcss-assets	asset manager for CSS (archived)	v6.0.0
clsx	utility for constructing className strings conditionally	v2.1.*
	Git hooks
husky	automatically lint commit messages, code run tests upon committing or pushing, works with git hooks	v9.1.*
lint-staged	run linters & formatters scripts on git staged files	v15.2.*
	Code linting & formatting
	Tools
eslint	configurable JavaScript linter	v9.9.*
prettier	opinionated code formatter	v3.3.*
stylelint	mighty CSS linter that helps you avoid errors and enforce conventions	v16.9.*
	Configs
@alexey-koran/prettier-config	Prettier sharing configuration	v0.1*
@alexey-koran/eslint-config	ESLint shareable config	v0.1*
stylelint-config-clean-order	order your styles with stylelint-order	v6.1.*
stylelint-config-standard	standard shareable config for Stylelint	v36.0.*
	Plugins
@eslint/js	ESLint JavaScript plugin Separating out JavaScript-specific functionality from ESLint	v9.9.*
prettier-plugin-tailwindcss	Prettier plugin for Tailwind CSS v3.0+ that automatically sorts classes	v0.6.*
stylelint-prettier	runs Prettier as a Stylelint rule and reports differences as individual Stylelint issues	v5.0.*
	Other
svgo	Node.js library and command-line application for optimizing SVG files	v4.0.*-rc
cross-env	run scripts that set and use environment variables across platforms (archived)	v7.0.3
@eslint/config-inspector	ESLint config inspector	v0.5.*
@alexey-koran/tsconfig	TSConfig sharing configuration	v0.1.*
	@types
@types/dotenv-webpack	type definitions for dotenv-webpack	v7.0.*
@types/html-webpack-plugin	type definitions for html-webpack-plugin	v3.2.*
@types/node	type definitions for node.js	v22.5.*
@types/react	type definitions for react	v18.3.*
@types/react-dom	type definitions for react-dom	v18.3.*
@types/webpack	type definitions for webpack	v5.28.*
@types/webpack-bundle-analyzer	type definitions for webpack-bundle-analyzer	v4.7.*