A template repo for creating react-ts apps based on vite. Libs like axios, antd, @apollo/client, eslint, stylelint, react-router-dom and @syy11cn/config-router are pre-installed.

Overview

Template Repo for React + Typescript + Vite

React Vite TypeScript

Introduction

This is a template repo for projects built with react and typescript on the basis of vite.

Features

  • Support React Hooks.
  • Build on Vite.
  • Typescript in use.
  • Code checking and formatting support.
  • Basic components from antd
  • GraphQL support.
  • axios installed.
  • Route configuration and guarding supported by @syy11cn/config-router.
  • Git hooks support.
  • Use yarn for package management.

Usage

Fork

Fork this repo to your account first.

Rename

Rename the repo using the name of your project.

Clone

Clone the repo to your local folder.

Develop

cd <path-to-your-cloned-repo>
yarn
yarn dev

image-20211030153313730

More Scripts

For more yarn scripts, please refer to package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "precommit": "lint-staged",
    "lint:less": "stylelint --fix \"src/**/*.less\" --syntax less",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx",
    "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
    "prettier": "prettier -c --write \"src/**/*\""
  }
}

Packages

Here are the packages installed (in package.json).

{
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@apollo/client": "^3.4.16",
    "@syy11cn/config-router": "^1.0.5",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/react-router-dom": "^5.3.2",
    "@typescript-eslint/eslint-plugin": "^5.2.0",
    "@typescript-eslint/parser": "^5.2.0",
    "@vitejs/plugin-react": "^1.0.0",
    "antd": "^4.16.13",
    "axios": "^0.24.0",
    "eslint": "^7.10.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "esprima": "^4.0.1",
    "graphql": "^15.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^11.2.6",
    "prettier": "^2.4.1",
    "react-router-dom": "^5.3.0",
    "stylelint": "^14.0.1",
    "stylelint-config-standard": "^23.0.0",
    "typescript": "^4.4.4",
    "vite": "^2.6.4"
  }
}
  • react for building user interfaces.
  • @apollo/client for sending gql requests.
  • react-router-dom and @syy11cn/config-router for route configuration and guarding.
  • typescript and peer plugins for writing .ts or .tsx files in react project.
  • esprima for parsing typescript grammar.
  • vite for the base build tool.
  • eslint, stylelint, prettier and editorconfig for code checking and formatting.
  • husky and lint-staged for git hooks configuration.
  • antd for basic components.

Folders

src
│  App.css
│  App.tsx
│  favicon.svg
│  index.css
│  logo.svg
│  main.tsx
│
├─apis
├─components
├─routes
│      index.ts
│
├─typings
│      images.ts
│
├─utils
└─views
        ErrorPage.tsx

Configuration

Modify the following config files.

  • .editorconfig
  • .eslintrc
  • .prettierrc
  • .stylelintrc
  • tsconfig.json
  • vite.config.js

About

Chinese Introduction

CLICK HERE to check the Chinese introduction doc to this repo on Lark.

License

MIT

Copyright (c) 2021, Yiyang Sun

You might also like...
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

Node.js / GraphQL project template pre-configured with TypeScript, PostgreSQL, login flow, transactional emails, unit tests, CI/CD workflow.
Node.js / GraphQL project template pre-configured with TypeScript, PostgreSQL, login flow, transactional emails, unit tests, CI/CD workflow.

Node.js API Starter Kit Node.js API Starter Kit is a project template for building Node.js backend applications optimized for serverless infrastructur

Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes.

Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes. No configuration is required, Start building your App.

This is a template for a Typescript-powered, redux-equipped, React application template supported by Eslint and other basic rules.

Getting Started with React-TS-Redux-App This project was bootstrapped with Create React App. What is it This is a template for Typescript powered, red

Vite-react-template: A starter for React with Typescript with the fast Vite
Vite-react-template: A starter for React with Typescript with the fast Vite

vite-react-template vite + react + router + ts A starter for React with Typescript with the fast Vite directory src assets components layout pages ins

Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Vite-solid-electron - A simple Vite, SolidJS, Electron integration template

vite-solid-electron Overview Very simple Vite, SolidJS, Electron integration tem

A starter Repo with RainbowKit + Vite + React + Tailwind CSS

🌈 Welcome to the Vite + React + Tailwind CSS + RainbowKit Starter! To install dependencies npm install or yarn install To run the project locally npm

A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

Owner
Yiyang Sun
Student of @uestcer. Learning Front End technologies. Love open source spirit.
Yiyang Sun
Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

HackingBay 2 Jan 19, 2022
Gab 3 Mar 5, 2022
Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Event Scheduler App This project was bootstrapped with Create React App. Event Scheduler is a React app that allows users to create events. An event c

ahmed 7 Nov 7, 2022
React Template using TS, Best Practices of Context API, Testing Library and Jest, Axios, React-router-dom and Styled-Components

React Template using TS, Best Practices of Context API, Testing Library and Jest, Axios, React-router-dom and Styled-Components

Gustavo Bispo 3 May 12, 2022
A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router

A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router

Coding Garden 53 Nov 22, 2022
React Native Typescript Template with scalable design and cutting edge technologies like CodePush, Sentry and other libraries pre-configured to save your time.

A React Native Template/Boilerplate containing the best practices and scalable design with cutting edge technologies like CodePush/Sentry and all other neccessary libraries pre-configured and basic helper functions and components to help you save your time and make your App super fast.

KASHAN HAIDER 23 Nov 24, 2022
⚡️ Super-fast Vite + React + Antd + Electron boilerplate.

vite-react-electron English | 简体中文 Run Setup # clone the project git clone [email protected]:caoxiemeihao/vite-react-electron.git # enter the project di

草鞋没号 576 Nov 15, 2022
React starter kit for static apps (NO SSR): React + Vite + wouter + jest + testing-library + Prettier + ESLint + Stylint

Intention is to have some light-weight starter kit for any react (static) applications. Faster ?? build time, type-safe, linting, etc, are the things which have been considered for this setup.

Manish Keer 4 Jul 26, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 136 Oct 26, 2022
Vite + React + TypeScript + Eslint + Prettier Template ⚡

Create a new project with Vite, React JS, TypeScript, Eslint, Prettier in just 1 second. You don't need to do anything anymore.

Hung Minh 83 Nov 17, 2022