Introduction to React #1: Pengenalan dan Contoh Penggunaan Komponen pada Aplikasi Web

 


React adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna pada website atau aplikasi web. React sangat populer di kalangan pengembang web karena memungkinkan mereka untuk membuat aplikasi yang responsif dan mudah dipelihara.

 

Mengapa menggunakan React?

Salah satu alasan utama mengapa pengembang web memilih React adalah karena kemampuannya dalam mempercepat pengembangan aplikasi web. Dengan React, pengembang dapat membuat komponen UI yang dapat digunakan kembali dan memudahkan pengembangan fitur-fitur baru. Selain itu, React juga memungkinkan pengembang web untuk memperbarui tampilan aplikasi secara dinamis tanpa harus memuat ulang halaman.

 

Cara Menggunakan React

Untuk menggunakan React, kita perlu membuat sebuah proyek React terlebih dahulu. Proyek React dapat dibuat dengan menggunakan perintah:

 

 create-react-app my-app pada terminal. 

my-app bisa diganti dengan nama yang ingin kalian mau

kemudian masuk kedalam folder yang telah dibuat, dapat dilakukan dengan perintah pada terminal:

cd my-app 

 

Setelah masuk coba untuk menjalankan React untuk pertama kali dengan perintah pada terminal:

npm start atau npm run start


berikut tampilan pertama react ketika dijalankan:


 

 

Setelah proyek dibuat, kita dapat mulai membuat komponen pada aplikasi web. Komponen pada React adalah sebuah unit atau bagian kecil dari antarmuka pengguna yang dapat digunakan kembali. Dengan menggunakan komponen, pengembang web dapat membangun antarmuka pengguna yang kompleks dengan lebih mudah.

Berikut adalah contoh kode untuk membuat sebuah komponen sederhana pada React:

 

 

 

Pada kode di atas, kita membuat sebuah komponen bernama Hello dengan menggunakan function. Komponen tersebut akan menampilkan teks "Hello World!" pada halaman web.

Setelah membuat komponen, kita bisa memanggil komponen tersebut pada halaman web dengan menggunakan tag HTML yang sesuai. Berikut adalah contoh kode untuk memanggil komponen Hello pada halaman web:

 

 

 

Pada kode di atas, kita membuat sebuah komponen App yang akan memanggil komponen Hello dan menampilkannya pada halaman web.

Setelah membuat komponen, kita perlu menjalankan aplikasi React untuk melihat tampilan antarmuka pengguna yang telah kita buat. Berikut adalah cara menjalankan aplikasi React:

  1. Buka terminal pada folder proyek React yang telah dibuat sebelumnya.
  2. Ketik perintah npm start pada terminal dan tekan enter.
  3. Aplikasi React akan dijalankan pada server lokal dan dapat diakses pada browser melalui alamat http://localhost:3000.

Selain itu, saat kita melakukan perubahan pada kode, aplikasi React akan secara otomatis melakukan hot-reloading atau refresh secara otomatis pada browser, sehingga kita tidak perlu melakukan refresh secara manual pada browser.

 

Kesimpulan

Dalam artikel ini, kita telah membahas pengenalan React, mengapa pengembang web memilih React, cara menggunakan React, contoh penggunaan komponen pada aplikasi web, serta cara menjalankan aplikasi React. Dengan React, pengembang web dapat membangun aplikasi web dengan lebih cepat dan mudah dipelihara. Semoga artikel ini bermanfaat bagi Anda yang ingin belajar React.

 

Posting Komentar

0 Komentar