X Tutup
Skip to content

Latest commit

 

History

History

README.md

React + Vite + TailwindCSS

A minimal and modern React application built with the latest dependencies and recommended best practices.

🚀 Tech Stack

  • React 19.2 - Latest version of React with improved performance
  • Vite 7.2 - Next-generation frontend tooling with lightning-fast HMR
  • TailwindCSS 4.1 - Modern utility-first CSS framework with CSS-based configuration
  • ESLint 9 - Latest ESLint with flat config format
  • Prettier 3 - Opinionated code formatter

📦 Features

  • ⚡ Lightning-fast development with Vite HMR
  • 🎨 TailwindCSS v4 with CSS-based configuration
  • 🔧 Modern ESLint configuration (flat config)
  • 💅 Prettier for consistent code formatting
  • 📱 Responsive design out of the box
  • 🏗️ Optimized production build with code splitting

🛠️ Getting Started

Prerequisites

  • Node.js 18+ and npm 10+

Installation

# Install dependencies
npm install

Development

# Start development server
npm run dev

The app will open automatically at http://localhost:3000

Build

# Create production build
npm run build

Preview

# Preview production build
npm run preview

Linting & Formatting

# Run ESLint
npm run lint

# Format code with Prettier
npm run format

📁 Project Structure

react-vite-app/
├── src/
│   ├── App.jsx          # Main App component
│   ├── main.jsx         # Application entry point
│   └── index.css        # Global styles with Tailwind imports
├── index.html           # HTML entry point
├── vite.config.js       # Vite configuration
├── postcss.config.js    # PostCSS configuration
├── eslint.config.js     # ESLint configuration (flat config)
├── .prettierrc          # Prettier configuration
└── package.json         # Dependencies and scripts

🎯 Best Practices

  • ES Modules: Uses modern ES module syntax throughout
  • Strict Mode: React StrictMode enabled for highlighting potential problems
  • Code Splitting: Automatic code splitting for React vendor bundle
  • Hot Module Replacement: Fast refresh for instant feedback during development
  • Modern ESLint: Uses the new flat config format introduced in ESLint 9
  • TailwindCSS v4: Leverages the new CSS-based configuration system

📝 Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build locally
  • npm run lint - Run ESLint
  • npm run format - Format code with Prettier

🔗 Resources

X Tutup