dan5py / react-vite-ts

Simple React + Vite + TS template with TailwindCSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React + Vite + TypeScript Template (react-vite-ts)

License

A minimalistic template for kickstarting React projects with Vite and TypeScript.

πŸŽ‰ Features

  • React - A JavaScript library for building user interfaces.
  • Vite - A fast, opinionated frontend build tool.
  • TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
  • Tailwind CSS - A utility-first CSS framework.
  • Tailwind Prettier Plugin - A Prettier plugin for formatting Tailwind CSS classes.
  • ESLint - A pluggable linting utility for JavaScript and TypeScript.
  • PostCSS - A tool for transforming CSS with JavaScript.
  • Autoprefixer - A PostCSS plugin to parse CSS and add vendor prefixes.

βš™οΈ Prerequisites

Make sure you have the following installed on your development machine:

  • Node.js (version 16 or above)
  • Yarn (package manager)

πŸš€ Getting Started

Follow these steps to get started with the react-vite-ts template:

  1. Clone the repository:

    git clone https://github.com/Dan5py/react-vite-ts.git
  2. Navigate to the project directory:

    cd react-vite-ts
  3. Install the dependencies:

     yarn
  4. Start the development server:

    yarn dev

πŸ“œ Available Scripts

  • yarn dev - Starts the development server.
  • yarn build - Builds the production-ready code.
  • yarn lint - Runs ESLint to analyze and lint the code.
  • yarn preview - Starts the Vite development server in preview mode.

πŸ“‚ Project Structure

The project structure follows a standard React application layout:

react-vite-ts/
  β”œβ”€β”€ node_modules/      # Project dependencies
  β”œβ”€β”€ public/            # Public assets
  β”œβ”€β”€ src/               # Application source code
  β”‚   β”œβ”€β”€ components/    # React components
  β”‚   β”œβ”€β”€ styles/        # CSS stylesheets
  β”‚   β”œβ”€β”€ lib/           # Utility functions
  β”‚   β”œβ”€β”€ App.tsx        # Application entry point
  β”‚   └── index.tsx      # Main rendering file
  β”œβ”€β”€ .eslintrc.json     # ESLint configuration
  β”œβ”€β”€ index.html         # HTML entry point
  β”œβ”€β”€ postcss.config.js  # PostCSS configuration
  β”œβ”€β”€ tailwind.config.js # Tailwind CSS configuration
  β”œβ”€β”€ tsconfig.json      # TypeScript configuration
  └── vite.config.ts     # Vite configuration

πŸ“„ License

This project is licensed under the MIT License. See the LICENSE file for details.

About

Simple React + Vite + TS template with TailwindCSS

License:MIT License


Languages

Language:TypeScript 62.1%Language:JavaScript 21.6%Language:HTML 11.7%Language:CSS 4.6%