Vite + React Starter Template🚀

Deskripsi

Dalam repository ini berisikan sebuah starter template untuk Vite dan React yang biasa saya gunakan, bersifat open-source dan dapat dirubah sesuai dengan kebutuhan kalian. Termasuk banyak alat dan pustaka yang berguna yang menerapkan praktik terbaik dan perbaikan otomatis saat disimpan.

What's New?

Dalam repository ini memiliki beberapa configurasi yang sudah disesuaikan dengan kebutuhan, seperti:

• Menerapkan eslint bersama dengan pustaka nya untuk menerapkan praktik terbaik
• Konfigurasi vite:
  • aplikasi akan berjalan konsisten di port 3000 (anda bisa merubah nya di vite.config.json)
  • memungkinkan untuk mengimport dengan menggunakan alias
• Konfigurasi vscode:
  • otomatis akan menginstall extensions yang dibutuhkan
  • otomatis memformat dan lint ketika file disimpan
• Konfigurasi Javascript:
  • menerapkan path utama yaitu di root directory
  • memberitahu file javascript untuk menerapkan path @/* sama dengan src/*
• Menerapkan tailwindcss memungkinkan untuk membuat web yang modern

Library

• Vite: Memberikan path alias @/ untuk memanggil element yang berada di ./src.
• React-router-dom: Perutean Deklaratif Router untuk React js.
• ESLint: Menemukan dan memperbaiki masalah dalam kode JavaScript dengan tambahan plugin.
• TailwindCSS: Membuat situs web modern dengan cepat tanpa harus meninggalkan HTML Anda.
• Prettier: Pemformat kode yang konsisten.

Cara Memakai Aplikasi

Untuk mendapatkan code ini diversi local atau computer kalian bisa mengikuti langkah langkah sederhana ini:

Langkah 1

Kalian bisa mengclick di bagian pojok kanan atas yang bertuliskan use this template

Langkah 2

Setelah itu kalian akan diarahkan untuk membuat repository baru, beri nama repository sesuai dengan kebutuhan kalian

Langkah 3

Kalian sudah berhasil membuat repository di github. Sekarang kalian bisa meng-clone atau mendownloadnya

Optional

Jika kalian ingin membuat aplikasi multi-page, jalankan perintah ini:

npm install -S react-router-dom atau pnpm install react-router-dom

Scripts

Start Dev

npm run dev atau pnpm run dev atau yarn run dev dan buka pada browser pada http://localhost:3000

Build dan Production

npm run build atau pnpm run build atau yarn run build

Locally Preview Production atau Build

npm start atau yarn start dan buka pada browser pada http://localhost:3000

Lint Untuk Melihat Kesalahan

npm run lint atau yarn run lint atau pnpm run lint

Lint Untuk Memperbaiki Kesalahan

npm run lint:fix atau yarn run lint:fix atau pnpm run lint:fix