Tutorial Install React di Windows 10 (2026 Edition)

Halo semua! Di artikel ini, admin bakal bantu lu buat Tutorial Install React di Windows 10. admin tau kadang setup environment itu bikin pusing, tapi tenang aja, kita bakal jalanin ini step-by-step. Tujuan akhirnya jelas: lu bakal punya project React yang jalan mulus di localhost:3000 dan siap buat dioprek.

Tutorial ini diadaptasi dari video React JS Tutorial – 1 – How to Install React on Windows 10. admin bakal rangkum semua poin pentingnya biar lu gak perlu bolak-balik pause video. Kita bakal mulai dari nol banget, dari install Node.js sampe lu bisa edit halaman pertama React lu. Yuk gas!

Prasyarat: Yang perlu lu siapin dulu

Sebelum kita mulai “ngotorin” tangan, ada beberapa tools tempur yang wajib lu punya. Gak banyak kok, tapi krusial banget buat kelancaran proses installasi.

Checklist Persiapan

• Node.js (Versi LTS): Ini jantungnya. Tanpa Node.js, React gak bakal jalan.
• Koneksi Internet: Buat download package React yang lumayan gede.
• Terminal: Lu bisa pake Command Prompt (CMD), PowerShell, atau Git Bash. Pilih yang lu nyaman aja.
• Visual Studio Code (VS Code): Text editor sejuta umat buat ngoding React.

Sumber resmi yang kita pake adalah dokumentasi dari reactjs.org dan installer dari nodejs.org. Pastikan lu selalu ambil dari sumber resmi ya biar aman.

Langkah 1: Install Node.js (LTS) + Verifikasi

Langkah pertama adalah install Node.js. Ini wajib hukumnya. Kalo lu belum punya, langsung aja meluncur ke website resminya.

1. Buka browser dan masuk ke nodejs.org.
2. Pilih yang versi LTS (Long Term Support). Kenapa? Karena versi ini paling stabil dan disaranin buat kebanyakan user.
3. Download installernya dan jalanin.
4. Ikutin wizard instalasinya: Klik Next → Centang Accept Agreement → Klik Next terus sampe tombol Install muncul.
5. Tunggu sampe selesai, trus klik Finish.

Nah, buat mastiin Node.js beneran udah kepasang, kita cek dulu pake terminal. Buka CMD atau PowerShell, terus ketik perintah ini:

node -v

Kalo keluar angka versinya (misalnya v16.15.0 atau yang lebih baru), berarti selamat! Node.js udah siap dipake.

Langkah 2: Bikin Proyek React pake `npx create-react-app`

Sekarang saatnya bikin “folder” buat aplikasi React lu. Kita bakal pake perintah sakti npx create-react-app.

Pertama, bikin folder buat nyimpen proyek lu, misalnya di Desktop kasih nama React Projects. Masuk ke folder itu, tahan tombol Shift + Klik Kanan di area kosong, terus pilih Open PowerShell window here.

Di terminal yang muncul, ketik perintah ini:

npx create-react-app sample-react-app

sample-react-app itu nama folder proyek lu nanti, bebas sih mau diganti apa aja, asal jangan pake spasi ya.

Note: Di video, ada bagian di mana terminal nanya konfirmasi “Why?” atau sejenisnya, dan dia tekan Enter. Kalo di tempat lu muncul pertanyaan konfirmasi buat install package create-react-app, tekan aja y atau Enter.

Proses ini butuh koneksi internet dan mungkin agak lama tergantung kecepatan internet lu, soalnya dia bakal download banyak file dependencies. Sabar aja ya. Lu juga bisa pake terminal lain kayak Git Bash atau CMD kalo lu lebih suka.

Langkah 3: Jalanin app di `localhost:3000`

Kalo proses instalasi udah kelar dan muncul pesan “Happy Hacking!”, berarti proyek udah jadi. Sekarang kita masuk ke foldernya dan jalanin servernya.

cd sample-react-app
npm start

Setelah lu jalanin npm start, tunggu bentar. Ajaibnya, browser default lu bakal otomatis kebuka dan ngarah ke alamat:

http://localhost:3000

Halaman default React dengan logo muter-muter bakal tampil di sini.

Langkah 4: Intip kode di VS Code

Aplikasi udah jalan, sekarang kita liat isinya. Balik ke terminal (jangan di-close ya servernya, buka tab baru atau terminal baru aja kalo mau), pastikan lu masih di dalem folder proyek, terus ketik:

code .

Perintah ini bakal ngebuka VS Code langsung di folder proyek lu. Struktur foldernya bakal keliatan di sebelah kiri.

• Folder public: Isinya file-file statis.
• File App.js (di dalem src): Ini komponen utama yang lu liat di browser tadi.

Tips Pro: Setiap kali lu mau lanjut ngoding setelah nutup komputer, lu harus masuk lagi ke folder proyek lewat terminal dan jalanin npm start lagi. Servernya gak jalan sendiri kalo abis direstart.

Langkah 5: Edit kecil di halaman default (hot reload)

Biar makin yakin ini beneran jalan, kita coba edit dikit. Buka file src/App.js di VS Code.

Di video, dia nyontohin buat ngehapus tag <p> dan link “Learn React”. Coba lu hapus bagian itu, terus Save (Ctrl + S).

Perhatiin browser lu. Tanpa perlu di-refresh manual, halamannya bakal update sendiri (Hot Reload). Teks atau link yang lu hapus tadi bakal ilang seketika. Keren kan?

Catatan penting & hal yang perlu lu tahu

Pilihan Terminal

Di video disebutin lu bebas pake terminal apa aja: CMD, PowerShell, atau Git Bash. Hasilnya sama aja, pilih yang menurut lu paling enak dipake.

Ada satu bagian di video yang mungkin bikin bingung. Narator bilang “press around axis” pas server baru jalan. Jujur, kalimat ini agak ambigu dan gak jelas maksud teknisnya apa (kemungkinan maksudnya “Allow Access” di popup Firewall yang sering muncul, tapi di transkrip tertulis begitu). Jadi kalo lu denger itu, abaikan aja atau anggap itu instruksi buat nge-klik popup izin yang mungkin muncul.

Penutup: Lu udah siap ngoprek React

Nah, sekarang lu udah punya environment React yang siap tempur di Windows 10. Lu udah berhasil install Node.js, bikin app pertama, jalanin di port 3000, dan bahkan udah nyoba ngedit kodenya dikit.

Perjalanan lu baru aja dimulai. Dari sini lu bisa mulai eksplorasi bikin komponen, mainan state, dan bikin web app keren lainnya. Selamat ngoding, bro!