Overview:
The React TypeScript Parcel Boilerplate is an opinionated boilerplate that combines React, TypeScript, and Parcel bundler. It includes additional libraries such as MobX for handling business logic, Styled-Components for styling, and AnimeJS for animations. The boilerplate also provides support for continuous integration using GitHub Actions and testing with TypeScript and React Test Renderer. It is configured with ESLint to work with TypeScript, Prettier, and Jest, and includes Husky for git hooks.
Features:
- Styling: Styled-Components library is used for handling styling in the boilerplate.
- Animations: Animation effects are achieved using the AnimeJS library.
- Business Logic: MobX is utilized for handling business logic in the application.
- Continuous Integration: Continuous Integration (CI) is set up via GitHub Actions for automated testing.
- Testing: The boilerplate supports testing with TypeScript and uses React Test Renderer for rendering React components during tests.
- ESLint Configuration: The boilerplate is pre-configured with ESLint to work with TypeScript, Prettier, and Jest.
- Git Hooks: Husky is included to set up git hooks, specifically the pre-commit hook for checking code quality before committing changes.
Installation:
To install the React TypeScript Parcel Boilerplate, follow these steps:
- Edit the
package.jsonfile and customize the project attributes such as name, version, description, repository, author, etc. - Edit the
.github/CODEOWNERSfile and add your GitHub username. - Edit the Continuous Integration badge in the
README.mdfile. Refer to GitHub documentation on action badges for more information. - (Optional) Delete or edit the Dependabot badge in the
README.mdfile, using the<username>/<reponame>syntax. - Install the project dependencies by running either
npm installoryarn install. - Run the example app using the command
npm run start.
Summary:
The React TypeScript Parcel Boilerplate is a comprehensive starter template for React projects. It combines React, TypeScript, and Parcel bundler, along with additional libraries such as MobX, Styled-Components, and AnimeJS. The boilerplate includes pre-configured settings for continuous integration, testing, linting, and git hooks. Its architecture follows an MVC paradigm, allowing for separate handling of state, features, and layouts. This boilerplate provides a solid foundation for developing React applications with TypeScript.