Boilerplate Typescript React Redux Webpack
[This project is too old, not maintained and outdated, do not use it] Starting template (boilerplate) for a front end Typescript + React project. Updated in 2020.
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
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.
- 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
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.
- 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.