React.js

React.js adalah library JavaScript yang dibuat oleh tim Facebook. React.js memudahkan kita untuk membuat aplikasi web yang interaktif. React.js juga memudahkan kita untuk membuat aplikasi web yang kompleks.

Setup React.js

Mulai membuat project React dengan Vite. Jalankan perintah di bawah ini:

npm create vite@latest # using npm
pnpm create vite # using pnpm

Pada saat instalasi, kamu akan melihat petunjuk berikut ini:

• Bakal ditanyain nama projectnya apa? Misal, belajar-react, tekan Enter.
• Selanjutnya, akan tampil untuk pilihan framework. Pilih React, tekan Enter.
• Setelah itu, akan tampil untuk pilihan varian TypeScript, JavaScript, Remix, dsb. Pilih TypeScript, tekan Enter.

Jika sudah selesai, kita dapat masuk ke project belajar-react, install, dan menjalankannya. Contoh:

cd belajar-react
npm install
code .
npm run dev

Referensi: Getting Started | Vite (opens in a new tab)

Instalasi Tailwind CSS dan Beberapa Library/Package

Kita perlu meng-install beberapa library/package, di antaranya.

• tailwindcss
• autoprefixer
• postcss
• react-router-dom
• jotai

npm install -D tailwindcss postcss autoprefixer # using npm
pnpm add -D tailwindcss postcss autoprefixer # using pnpm

npm install react-router-dom jotai # using npm
pnpm add react-router-dom jotai # using pnpm

Setup Tailwind CSS

Generate untuk membuat file tailwind.config.js and postcss.config.js, jalankan perintah di bawah ini:

npx tailwindcss init -p

Tambahkan path untuk content dari tailwind pada file tailwind.config.js.

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
],

Tambahkan direct @tailwind untuk setiap layer Tailwind ke file CSS utama kamu (./src/index.css).

@tailwind base;
@tailwind components;
@tailwind utilities;

Jalankan perintah di bawah ini untuk menjalankan projectnya.

npm run dev # using npm
pnpm dev # using pnpm

Referensi: Install Tailwind CSS with Vite (opens in a new tab)

Instal Ekstensi

Instal ekstensi Visual Studio Code ES7+ React/Redux/React-Native snippets, untuk mempermudah kamu dalam menggunakan React.js.

• ES7+ React/Redux/React-Native snippets (opens in a new tab)

Boilerplate

Kamu bisa menggunakan boilerplate template agar mempercepat pembuatan project dan setupnya.

(opens in a new tab)