Cara Install React: Membuat Aplikasi React dengan Vite

Untuk install React, buat proyek baru dengan Vite: jalankan npm create vite@latest my-app -- --template react, lalu cd my-app, npm install, dan npm run dev. Kamu perlu menginstall Node.js lebih dulu. Vite menyiapkan React, kompilasi JSX, dan dev server yang memuat ulang halaman setiap kali kamu menyimpan file.

Kamu tidak butuh semua itu untuk mulai belajar. Editor di bawah menjalankan React di halaman ini; isinya versi sederhana dari file App.jsx yang dibuat Vite untukmu.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Klik tombolnya, lalu ubah teks heading-nya: pratinjau diperbarui selagi kamu mengetik, sama seperti dev server Vite memasukkan perubahanmu tanpa memuat ulang halaman (itulah arti "HMR", hot module replacement).

Prasyarat: Node.js

Tool untuk build aplikasi React berjalan di Node.js, dan npm (package manager-nya) sudah ikut terpasang. Install rilis LTS terbaru dari situs Node.js atau dengan version manager seperti nvm, lalu periksa di terminal:

node -v
npm -v

Kedua perintah itu seharusnya mencetak nomor versi. Jika node -v mencetak versi lama, upgrade: Vite 8 butuh Node.js 20.19 atau lebih baru (22.12 atau lebih baru di jalur 22) dan menampilkan peringatan di rilis yang lebih lama.

Membuat aplikasi React dengan Vite

Jalankan empat perintah ini di folder tempat kamu menyimpan proyek-proyekmu:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest mengunduh generator proyek terbaru. my-app adalah nama folder-nya, dan --template react memilih React biasa dengan JavaScript. -- tambahan itu meneruskan opsi template melewati npm ke generator.
• npm install mengunduh React, React DOM, Vite, dan dependensi lain yang tercantum di package.json ke node_modules.
• npm run dev menjalankan development server dan mencetak alamat lokal, biasanya http://localhost:5173. Buka alamat itu di browser.

Generator kemudian mengajukan dua pertanyaan: linter mana yang akan dipasang (Oxlint atau ESLint), dan apakah aplikasinya akan langsung diinstall dan dijalankan. Jika kamu menjawab ya untuk pertanyaan kedua, generator menjalankan npm install dan npm run dev untukmu, jadi kamu bisa melewati dua perintah terakhir. Untuk TypeScript, pakai --template react-ts; lihat React dengan TypeScript.

File yang dibuat Vite

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Tiga di antaranya paling penting:

index.html adalah halaman yang dimuat browser. Body-nya berisi satu elemen kosong, <div id="root"></div>, dan tag script yang memuat src/main.jsx. React menggambar seluruh aplikasi di dalam div itu.

src/main.jsx adalah entry point. File ini menghubungkan React ke halaman:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot mengambil elemen #root dan membuat React bertanggung jawab atas semua yang ada di dalamnya. render(<App />) menggambar komponen teratasmu di sana. StrictMode adalah helper development yang menjalankan beberapa pemeriksaan tambahan; ia tidak berpengaruh di build production (lihat Strict Mode). Kamu jarang perlu mengedit file ini.

src/App.jsx adalah komponen pertamamu, dan file yang kamu edit. Versi milik Vite mengimpor tiga gambar (gambar hero serta logo Vite dan React) dan App.css, lalu diakhiri dengan export default App. Itu sama saja dengan menulis export default function App() di bagian atas, bentuk yang dipakai contoh-contoh di halaman ini.

Lakukan editan pertamamu

Buka src/App.jsx, hapus isinya, lalu ganti dengan komponenmu sendiri. Simpan, dan browser akan diperbarui. Berikut aplikasi pertama yang kecil untuk kamu ketik; coba dulu di sini:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Ketik di kotaknya, dan heading-nya ikut berubah. Lalu tambahkan <Greeting name="Vite" /> kedua di bawah yang pertama: komponen bisa dipakai ulang, dan setiap salinan menerima name-nya sendiri.

Saat App.jsx makin besar, pindahkan komponen ke file masing-masing, seperti src/Greeting.jsx, ekspor, lalu impor di tempat kamu memakainya. Halaman komponen menunjukkan caranya.

Build untuk production

Dev server dipakai saat mengerjakan kodemu. Saat kamu siap memublikasikan, build aplikasinya:

npm run build
npm run preview

npm run build mengompilasi JSX, menggabungkan dan memperkecil kodemu, lalu menulis file statis ke folder dist/. npm run preview menyajikan folder itu secara lokal agar kamu bisa memeriksa hasil build yang sesungguhnya. Unggah dist/ ke host statis mana pun. React juga beralih ke mode production di build ini, yang lebih cepat dan melewatkan peringatan development.

Create React App sudah deprecated

Selama bertahun-tahun, cara standar untuk memulai adalah npx create-react-app my-app. Pada Februari 2025, tim React menjadikan Create React App deprecated, dan tool itu tidak lagi dirawat. Banyak tutorial lama masih memakainya, jadi kamu akan melihat react-scripts start dan file entry src/index.js di sana; komponen-komponennya sendiri bekerja sama saja di proyek Vite.

Yang sebaiknya dipakai sebagai gantinya:

• Vite untuk aplikasi sisi client, proyek belajar, atau widget: setup di atas.
• Framework saat kamu butuh routing, server rendering, atau pemuatan data bawaan. Next.js dan framework mode milik React Router adalah pilihan yang umum:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Untuk memindahkan proyek Create React App yang sudah ada ke Vite, langkah utamanya adalah: install vite dan @vitejs/plugin-react lalu hapus react-scripts; tambahkan vite.config.js yang memuat plugin React; pindahkan index.html dari public/ ke root proyek, hapus placeholder %PUBLIC_URL%, lalu tambahkan tag <script type="module" src="/src/index.jsx"> untuk file entry-mu; ganti nama file yang berisi JSX menjadi .jsx; ganti nama variabel environment REACT_APP_ menjadi VITE_ dan baca dari import.meta.env; lalu ganti perintah react-scripts di package.json dengan vite, vite build, dan vite preview.

Menambahkan React ke halaman yang sudah ada

React tidak harus menguasai seluruh halaman. Kamu bisa merendernya ke satu elemen di situs yang sudah ada, seperti widget keranjang di toko yang dirender oleh server. Kamu tetap butuh bundler seperti Vite untuk mengompilasi JSX. Install kedua package ini:

npm install react react-dom

Lalu buat root pada elemen yang ingin dikendalikan React:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Semua yang berada di luar #cart tetap seperti semula. Kamu bisa membuat beberapa root di satu halaman, satu untuk setiap elemen, dan masing-masing berjalan sendiri-sendiri.