Membangun Aplikasi Web dengan React: Tutorial Praktis

React adalah pustaka JavaScript yang populer untuk membangun antarmuka pengguna, terutama untuk aplikasi web satu halaman (Single Page Applications). Artikel ini akan memberikan panduan langkah demi langkah untuk memulai proyek React Anda.

• Persiapan Awal

Instalasi Node.js dan NPM:

• Pastikan Anda sudah menginstal Node.js dan NPM (Node Package Manager) di komputer Anda. Anda bisa mengunduhnya dari nodejs.org.

Buat Proyek React Baru:

• Buka terminal atau command prompt, lalu jalankan perintah berikut untuk membuat proyek React baru:luaCopy codenpx create-react-app nama-proyek-anda
• Gantilah nama-proyek-anda dengan nama proyek Anda.

Jalankan Aplikasi:

• Masuk ke direktori proyek yang baru dibuat:bashCopy codecd nama-proyek-anda
• Jalankan aplikasi dengan perintah:sqlCopy codenpm start
• Aplikasi React default akan terbuka di browser Anda.

• Struktur Dasar Proyek

Struktur dasar dari proyek React yang baru dibuat adalah sebagai berikut:

• node_modules/
• public/
• src/
  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js
  • …
• .gitignore
• package.json
• README.md

Membuat Komponen Sederhana

1. Buat File Komponen:
   • Di dalam folder src, buat file baru bernama HelloWorld.js.
2. Tulis Kode Komponen:
   • Buka HelloWorld.js dan tambahkan kode berikut:jsxCopy codeimport React from 'react'; function HelloWorld() { return ( <div> <h1>Hello, World!</h1> </div> ); } export default HelloWorld;
3. Import dan Gunakan Komponen di App.js:
   • Buka App.js dan ubah kodenya menjadi seperti berikut:jsxCopy codeimport React from 'react'; import './App.css'; import HelloWorld from './HelloWorld'; function App() { return ( <div className="App"> <HelloWorld /> </div> ); } export default App;

• Menjalankan dan Memeriksa Hasil

Pastikan server pengembangan React masih berjalan. Jika belum, jalankan kembali dengan npm start.Buka browser Anda dan lihat hasilnya. Anda seharusnya melihat teks “Hello, World!” ditampilkan di halaman.