React Template

screenshot of React Template
react
vite

React Template

React + TS + Vite + FSD template

Overview

The TS + React + Vite + FSD project template is a repository containing a collection of preferred tools and guides for setting up a project. This template includes features such as Conventional Commits, deployment to GitHub Pages, basic CSS layout, ESLint, Prettier, Autoprefixer, Storybook, npm-check-updates helper, vite loadEnv, vite-tsconfig-paths, vite-plugin-checker, and local HTTPS through vite-plugin-mkcert.

Features

  • Conventional Commits: Uses the Conventional Commits approach for consistent and structured commit messages.
  • Deploy to gh-pages workflow: Allows for easy deployment of single-page application projects to GitHub Pages using GitHub Actions.
  • Basic CSS layout + clsx util lib: Provides a basic CSS layout and leverages the clsx utility library.
  • eslint: Includes ESLint for code linting. Can be added to the project using the npm init @eslint/config command.
  • prettier: Includes Prettier for code formatting. Follow the official guide to add it to the project.
  • autoprefixer: Includes Autoprefixer to automatically add vendor prefixes to CSS. Add it to the project by running npm i -D postcss@latest autoprefixer@latest and creating a postcss.config.js file in the project's root directory.
  • storybook: Includes Storybook, a tool for building UI components and pages in isolation. Follow the official guide to add it to the project.
  • npm-check-updates helper: A tool used for manually updating dependencies on a weekly basis.
  • vite loadEnv: Allows for the use of environment variables in the project's configuration.
  • vite-tsconfig-paths: Enables Vite to resolve imports using TypeScript's path mapping.
  • vite-plugin-checker: A Vite plugin that provides various checks, such as TypeScript error checking.
  • local https via vite-plugin-mkcert: Allows for the use of HTTPS on localhost during development using the vite-plugin-mkcert plugin.

Installation

  1. Adjust the VITE_BASE_URL in the .env file to match your repository name.
  2. Follow the provided installation instructions for each feature mentioned above.

Summary

The TS + React + Vite + FSD project template is a comprehensive repository that offers a collection of tools and guides for setting up a project. It includes features such as Conventional Commits, deployment to GitHub Pages, CSS layout, code linting and formatting, environment variable usage, Storybook integration, and various plugins for improving development workflows. By following the installation instructions provided, developers can quickly set up a project with all the necessary tools and configurations.

react
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

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
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.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
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.