https://github.com/dan5py/react-vite-ts
Simple React + Vite + TS template with TailwindCSS
https://github.com/dan5py/react-vite-ts
eslint react react-typescript react-typescript-template reactjs tailwind tailwindcss typescript vite vite-react vite-react-typescript vite-template vite-template-react vitejs yarn
Last synced: 2 months ago
JSON representation
Simple React + Vite + TS template with TailwindCSS
- Host: GitHub
- URL: https://github.com/dan5py/react-vite-ts
- Owner: dan5py
- License: mit
- Created: 2023-05-30T22:07:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-07T00:00:51.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T07:36:25.557Z (4 months ago)
- Topics: eslint, react, react-typescript, react-typescript-template, reactjs, tailwind, tailwindcss, typescript, vite, vite-react, vite-react-typescript, vite-template, vite-template-react, vitejs, yarn
- Language: TypeScript
- Homepage:
- Size: 44.9 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React + Vite + TypeScript Template (react-vite-ts)
[](https://github.com/Dan5py/react-vite-ts/blob/main/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:
```bash
git clone https://github.com/Dan5py/react-vite-ts.git
```
2. Navigate to the project directory:
```bash
cd react-vite-ts
```
3. Install the dependencies:
```bash
yarn
```
4. Start the development server:
```bash
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:
```python
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](https://choosealicense.com/licenses/mit/) file for details.