Daftar Isi

• Pendahuluan
• Persiapan
• Membuat Proyek Baru
• Struktur Proyek
• Menambahkan Komponen
• Menjalankan Aplikasi
• Kesimpulan

Pendahuluan

React.js adalah salah satu library JavaScript yang paling populer untuk membangun antarmuka pengguna (UI). Dalam artikel ini, kita akan membahas cara membuat aplikasi web sederhana menggunakan React.js. Anda akan belajar langkah demi langkah mulai dari persiapan hingga menjalankan aplikasi Anda.

Persiapan

Sebelum mulai, pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di komputer Anda. Anda dapat mengunduhnya dari situs resmi Node.js.

Instalasi Node.js

Ikuti langkah-langkah berikut untuk menginstal Node.js:

1. Kunjungi situs resmi Node.js.
2. Pilih versi LTS (Long Term Support) untuk stabilitas.
3. Ikuti instruksi instalasi sesuai dengan sistem operasi Anda.

Membuat Proyek Baru

Setelah Node.js terinstal, Anda dapat membuat proyek baru menggunakan Create React App. Buka terminal dan jalankan perintah berikut:

npx create-react-app nama-proyek-anda

Gantilah nama-proyek-anda dengan nama yang Anda inginkan untuk proyek Anda.

Struktur Proyek

Setelah proyek berhasil dibuat, Anda akan melihat struktur folder seperti berikut:

nama-proyek-anda/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Folder src adalah tempat Anda akan menulis kode React Anda.

Menambahkan Komponen

Untuk menambahkan komponen baru, buat file baru di dalam folder src. Misalnya, buat file MyComponent.js:

import React from 'react';

function MyComponent() {
    return 
Ini adalah komponen saya!
;
}

export default MyComponent;

Selanjutnya, impor komponen ini ke dalam App.js:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
    return (
        

            
Selamat datang di Aplikasi React.js
            
        
    );
}

export default App;

Menjalankan Aplikasi

Untuk menjalankan aplikasi, kembali ke terminal dan navigasikan ke folder proyek Anda. Kemudian jalankan perintah berikut:

npm start

Aplikasi Anda akan terbuka di browser secara otomatis pada http://localhost:3000.

Kesimpulan

Dalam artikel ini, Anda telah belajar cara membuat aplikasi web sederhana menggunakan React.js. Anda mulai dari persiapan, membuat proyek baru, menambahkan komponen, hingga menjalankan aplikasi. Dengan pemahaman dasar ini, Anda dapat mulai mengeksplorasi lebih jauh dan membangun aplikasi yang lebih kompleks.