DEV Community

Cover image for React JS + Vite, TypeScript, dan SWC
ramadhan.dev
ramadhan.dev

Posted on โ€ข Edited on

1

React JS + Vite, TypeScript, dan SWC

Vite adalah Build Tools modern yang di rancang untuk menyediakan pengalaman pengembangan yang cepat dan efisien, terutama untuk aplikasi yang berbasis javascript seperti React, Vue dan lainnya.

Vite sendiri lebih berfokus kepada kecepatan pengambangan dengan konfigurasi yang lebih minimal dan waktu pemuatan yang lebih cepat saat proses pengembangan. waktu build produksinya juga biasa lebih cepat karena optimasi optimasi dari rollup

Dalam tutorial ini, anda akan mempelajari cara install Reactjs deangan vite langkah demi langkah

Step 1
Buka aplikasi terminal yang anda miliki, disini saya menggunakan cmder, dan masuk ke folder dimana anda ingin menginstall aplikasinya

Tampilan Terminal

Step 2
untuk melakukan proses instalasi anda bisa menggunakan "yarn" atau "npm",
ketik perintah berikut di terminal anda,

##NPM
npm create vite@latest

##YARN
yarn create vite
Enter fullscreen mode Exit fullscreen mode

Saya menggunakan yarn.

Setelah perintah di atas anda jalankan, maka anda akan diminta untuk memasukan nama aplikasi yang ingin anda buat, seperti gambar berikut

Proses pembuatan APlikasi

Step 3
Anda akan melihat daftar; gunakan tombol panah untuk berpindah ke atas dan ke bawah daftar, klik enter untuk memilih opsi pilihan Anda.
Pada langkah ini, kita akan memilih React

Daftar aplikasi yang di sediakan oleh Vite

Step 3
Anda akan melihat lima opsi untuk dipilih, Navigasi ke dan pilih
disini saya akan memilih Typescript + SWC

Opsi-opsi yang tersedia untuk reactjs

Dan itu saja; Anda sekarang memiliki proyek Vite Anda
Proses install berhasil

Step 4
Seperti yang sudah di perintahkan di hasil ahir pada step 3, anda disuruh untuk masuk kedalam folder aplikasi yang sudah anda buat, setelah itu jalankan perintah yang disuruh

### masuk ke folder aplikasi anda
cd react-vite

### install dependencies
yarn install
Enter fullscreen mode Exit fullscreen mode

Proses install depedencies

Step 5
setelah semua proses di step 4 berhasil, untuk menjalankan aplikasi anda perlu menjalankan perintah berikut

### npm 
npm run dev

### yarn
yarn dev
Enter fullscreen mode Exit fullscreen mode

Tampilan Aplikasi

setelah aplikasi berhasil di jalankan, anda bisa me akses aplikasinya sesuai deangan link yang ditampilkan di terminal

Preview


Kesimpulan:
Lihat, itu tidak sulit sama sekali, dan semua prosesnya tidak memakan waktu yang lama untuk menyelesaikannya.

Sekarang anda telah berhasil belajar menginstall aplikasi reactJS menggunakan Vitejs

Terimakasih

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

๐Ÿ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay