Overview

This product is a starting template or boilerplate for a front-end Typescript + React project. It was created by ejecting a create-react-app project and adding additional features. While the ejecting was done a couple of years ago in 2018 and may lack some recent features, it offers simplicity in updating, extending, and troubleshooting compared to more recent create-react-app versions. This boilerplate is ideal for quick prototyping or trying new versions of libraries, but for serious projects, it is recommended to use a non-ejected create-react-app, vite, Next-js, or Razzle.

Features

• Typescript: Version 4.0.2
• React: Version 16.13 with support for hooks
• Redux: Optional integration, use the no-redux branch to avoid Redux
• Jest + Enzyme: Installed with example basic tests included
• connected-react-router: Supports navigation with Redux
• TSLint: Custom rules to discourage certain practices like using “object” or “any” in a static typed language
• TSLint errors: Displayed as warnings in the browser’s console for better visibility
• Prettier: Configured with pre-commit hooks to automatically fix files before commit
• Webpack: Exposes Webpack configuration
• Styled Components: Installed with an example theme for the project
• CSS Modules: Configured as an alternative to Styled Components
• PostCSS: Includes basic plugins to automatically transform CSS/SASS code for better cross-browser compatibility
• Environment variables (.env) webpack plugin: Supports environment variables configuration
• Axios: Installed with an example HTTP request function implemented using React hooks
• HMR (Hot Module Replacement): Enables fast component reload during development

Installation

1. Run npm install
2. On MS-Windows, also run npm install -g win-node-env
3. Optional but highly recommended: Install TSLint and Prettier extensions for VSCode or your preferred text editor
4. Optional: This project is compatible with the chrome extension “Redux DevTools,” you can install it as well

Summary

This product is a starting template for front-end Typescript + React projects. It offers simplicity in updating, extending, and troubleshooting compared to recent create-react-app versions. It includes features like Typescript, React with hooks support, Redux integration (optional), Jest + Enzyme for testing, connected-react-router for navigation with Redux, TSLint with custom rules, Prettier for code formatting, Webpack configuration, Styled Components and CSS Modules for styling, PostCSS for automatic CSS/SASS transformations, support for environment variables, Axios for HTTP requests, and HMR for fast component reload. The installation process involves running npm install and optionally installing TSLint and Prettier extensions for your text editor.