Pendahuluan

React adalah pustaka JavaScript yang populer untuk membangun antarmuka pengguna. Dalam artikel ini, kita akan membahas cara membuat aplikasi web sederhana dengan React. Proses ini akan mencakup persiapan, instalasi, dan penulisan kode aplikasi.

Persiapan

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

Membuat Aplikasi

Instalasi React

Untuk membuat aplikasi React, kita akan menggunakan Create React App, yang merupakan alat resmi untuk memulai proyek React. Buka terminal dan jalankan perintah berikut:

npx create-react-app nama-aplikasi

Gantilah nama-aplikasi dengan nama yang Anda inginkan untuk proyek Anda. Setelah perintah ini selesai, Anda akan memiliki struktur proyek dasar React.

Struktur Proyek

Setelah instalasi selesai, masuk ke direktori proyek dengan perintah:

cd nama-aplikasi

Struktur proyek yang dihasilkan akan terlihat seperti ini:

nama-aplikasi/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── package.json
└── README.md

Kode Aplikasi

Selanjutnya, buka file src/App.js dan ubah kontennya menjadi seperti berikut:

import React from 'react';
import './App.css';

function App() {
    return (
        

            

                
Selamat Datang di Aplikasi Web Sederhana!
                
Ini adalah aplikasi React pertama Anda.
            
        
    );
}

export default App;

Dengan kode di atas, Anda telah membuat komponen React sederhana yang menampilkan pesan selamat datang.

Menjalankan Aplikasi

Untuk menjalankan aplikasi, kembali ke terminal dan jalankan perintah berikut:

npm start

Ini akan membuka aplikasi Anda di browser pada http://localhost:3000. Anda akan melihat pesan selamat datang yang telah Anda buat.

Kesimpulan

Dalam artikel ini, kita telah membahas langkah-langkah untuk membuat aplikasi web sederhana menggunakan React. Dari persiapan hingga menjalankan aplikasi, Anda sekarang memiliki dasar yang kuat untuk mulai mengeksplorasi lebih lanjut dengan React. Selamat mencoba!