Overview

If you’re diving into modern web development with TypeScript and React, especially using hooks and routing, there are several essential practices and tools that can enhance your workflow and project structure. The latest versions of TypeScript and React streamline the development process, but they come with their own set of intricacies that every developer should be aware of.

In this setup, leveraging CSS Modules, integrating routing with react-router, and ensuring your testing and linting practices are up to par will create a robust foundation for any application. Below, I’ll outline some key features that will make your development experience smoother and more efficient.

Features

Transpile-Only Mode: In ts-loader's transpileOnly mode, the TypeScript compiler skips generating declaration files, boosting build speed. You can still generate them using the tsc command for type checking.
CSS Modules Support: When using CSS Modules, it’s crucial to add declaration files for your styles, such as less files, by creating a corresponding .d.ts file.
Global Styles Import: To ensure that Iconfont works correctly with CSS Modules, import styles in the global scope, avoiding potential conflicts in your styling.
React Router Configuration: Utilize the withRouter() function call instead of decorators to prevent TypeScript issues related to class signatures when using react-router.
Effective Testing: Implement testing with Jest and @testing-library to ensure your components work as intended and provide a reliable user experience.
Linter Integration: Incorporating ESLint and TypeScript-eslint ensures your code adheres to best practices and maintains high quality via automated linting.
Optimized Development Workflow: Tools like react-hot-loader and webpack improve development speed and enhance the live reload experience, making for a seamless coding environment.

Nonoroazoro

Typescript React Boilerplate

Webpack Boilerplate