Typescript React Boilerplate
:ghost: Minimal example for React with TypeScript.
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.tsfile. -
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.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.