Blogger Jateng
Home / HTML

Cara Menggunakan React pada HTML

Posted by Adi Prayitno
Cara Menggunakan React pada HTML - React adalah sebuah library JavaScript yang sangat populer untuk membangun antarmuka pengguna (UI) yang interaktif dan dinamis. Dengan mengintegrasikan React pada HTML, Anda dapat mengambil keuntungan dari fitur-fitur hebat yang ditawarkan oleh React dalam pengembangan aplikasi web. 

Dalam artikel ini, kami akan menjelaskan cara menggunakan React pada halaman HTML. Berikut adalah langkah-langkah untuk menggunakan React pada HTML:

Langkah-langkah Menggunakan React pada HTML

cara menggunakan react pada HTML

1. Persiapkan Lingkungan Pengembangan

Sebelum Anda dapat menggunakan React pada halaman HTML, Anda perlu mempersiapkan lingkungan pengembangan yang sesuai.

* Instal Node.js

Node.js adalah platform yang memungkinkan Anda menjalankan JavaScript di sisi server. React membutuhkan Node.js untuk menjalankan alat pengembangan dan server pengembangan. Untuk menginstal Node.js, Anda dapat mengunjungi situs resmi Node.js di https://nodejs.org dan mengunduh versi terbaru yang sesuai dengan sistem operasi Anda. Ikuti petunjuk instalasi yang disediakan pada situs tersebut.

* Periksa Instalasi Node.js

Setelah Node.js terinstal, buka terminal atau command prompt, lalu ketik perintah berikut untuk memeriksa apakah Node.js telah terpasang dengan benar:

node -v
Perintah ini akan menampilkan versi Node.js yang terpasang jika instalasi berhasil.

* Instal npm

npm (Node Package Manager) adalah manajer paket yang digunakan untuk mengelola dependensi proyek JavaScript. npm akan digunakan untuk menginstal Create React App dan paket-paket React lainnya. npm secara otomatis terinstal bersamaan dengan Node.js. Untuk memeriksa versi npm yang terpasang, Anda dapat menjalankan perintah berikut:

npm -v

* (Opsional) Instal Yarn

Yarn adalah alternatif lain untuk npm, juga digunakan untuk mengelola dependensi proyek. Meskipun tidak wajib, Yarn dapat digunakan sebagai pengganti atau pelengkap npm. Jika Anda ingin menginstal Yarn, Anda dapat mengunjungi situs resmi Yarn di https://yarnpkg.com dan mengunduh versi terbaru sesuai dengan sistem operasi Anda. Ikuti petunjuk instalasi yang disediakan pada situs tersebut.

Setelah lingkungan pengembangan terpasang dengan sukses, Anda siap untuk menggunakan React pada halaman HTML. Anda dapat melanjutkan dengan langkah-langkah berikutnya.

2. Buat Proyek React

Setelah Anda mempersiapkan lingkungan pengembangan, Anda dapat membuat proyek React menggunakan Create React App. Berikut adalah langkah-langkah untuk membuat proyek React:

  •  Buka terminal atau command prompt.
  • Navigasikan ke direktori di mana Anda ingin membuat proyek React baru. Misalnya, jika Anda ingin membuatnya di direktori "Documents", Anda dapat menggunakan perintah berikut:
cd Documents
  • Jalankan perintah berikut untuk membuat proyek React baru menggunakan Create React App:
npx create-react-app nama-proyek
Ganti "nama-proyek" dengan nama yang Anda inginkan untuk proyek Anda. Perintah ini akan membuat proyek React dengan struktur direktori yang siap untuk digunakan.

  • Tunggu hingga proses inisialisasi selesai. Create React App akan mengunduh dan menginstal semua dependensi yang diperlukan untuk proyek React.

Setelah proses selesai, Anda telah berhasil membuat proyek React baru. Direktori proyek akan memiliki struktur seperti ini:

nama-proyek/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
Proyek React baru Anda siap untuk dikembangkan. Anda dapat melanjutkan dengan langkah-langkah berikutnya, seperti mengintegrasikan React dengan halaman HTML atau mengubah komponen-komponen yang ada sesuai kebutuhan Anda.

3. Tambahkan Script React pada Halaman HTML

Setelah Anda membuat proyek React, Anda perlu menambahkan script React pada halaman HTML yang ingin Anda gunakan. Berikut adalah langkah-langkah untuk menambahkan script React pada halaman HTML:

  • Buka file "public/index.html" dalam direktori proyek Anda menggunakan editor teks favorit Anda.
  • Temukan bagian <head> di dalam file HTML.
  • Di dalam bagian <head>, tambahkan tag <script> berikut sebelum tag penutup </head>:
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
Script ini akan memuat pustaka React dan React DOM dari CDN (Content Delivery Network). Anda juga dapat menggunakan versi produksi (minified) dari pustaka tersebut untuk meningkatkan performa dengan mengganti development menjadi production dalam URL script.
  • Setelah menambahkan script React, halaman HTML Anda siap untuk menggunakan React.
Dengan menambahkan script React tersebut, Anda telah mengintegrasikan React pada halaman HTML Anda. Sekarang, Anda dapat melanjutkan dengan langkah-langkah berikutnya, seperti membuat komponen React dan menampilkan mereka pada halaman HTML.

4. Buat Komponen React

Setelah Anda menambahkan script React pada halaman HTML, Anda dapat membuat komponen React di dalam proyek Anda. Berikut adalah langkah-langkah untuk membuat komponen React:
  • Buka file "src/App.js" dalam direktori proyek Anda menggunakan editor teks favorit Anda. File ini adalah tempat Anda dapat membuat komponen React pertama Anda.
  • Hapus konten yang ada di dalam file "App.js" dan gantikan dengan kode berikut:
import React from 'react';

function App() {
  return (
    <div>
      <h1>Halo, Dunia!</h1>
    </div>
  );
}

export default App;

 Kode di atas mendefinisikan komponen React bernama "App". Komponen ini adalah komponen fungsional yang mengembalikan elemen div dengan sebuah elemen heading h1 di dalamnya. Anda dapat mengubah konten komponen sesuai kebutuhan Anda.

  • Simpan perubahan pada file "App.js".
Dengan langkah-langkah di atas, Anda telah berhasil membuat komponen React pertama Anda. Komponen ini siap untuk ditampilkan pada halaman HTML melalui integrasi dengan React. Selanjutnya, Anda dapat melanjutkan dengan langkah-langkah berikutnya, seperti menampilkan komponen React pada halaman HTML.

5. Tampilkan Komponen React pada Halaman HTML

Setelah Anda membuat komponen React, langkah selanjutnya adalah menampilkan komponen tersebut pada halaman HTML. Berikut adalah langkah-langkah untuk menampilkan komponen React pada halaman HTML:
  • Buka file "src/index.js" dalam direktori proyek Anda menggunakan editor teks favorit Anda.
  • Perhatikan baris kode berikut:
ReactDOM.render(, document.getElementById('root'));

Baris kode tersebut bertanggung jawab untuk merender komponen "App" dan menampilkannya pada elemen dengan ID "root" pada halaman HTML.

  • Pastikan elemen dengan ID "root" ada dalam file "public/index.html" dalam direktori proyek Anda. Temukan baris kode berikut:

<div id="root"></div>

 Jika elemen tersebut belum ada, tambahkan baris kode di atas sebelum tag penutup </body>.

  • Simpan perubahan pada file "index.js" dan file "index.html".
Setelah Anda menjalankan aplikasi React, komponen "App" akan dirender dan ditampilkan pada elemen dengan ID "root" pada halaman HTML. Hal ini akan mengintegrasikan komponen React yang telah Anda buat dengan halaman HTML.

Anda dapat melanjutkan dengan mengedit atau menambahkan komponen React lainnya sesuai kebutuhan Anda. Setiap perubahan yang Anda buat pada komponen React akan secara otomatis diperbarui pada halaman HTML yang sedang berjalan.

6. Menjalankan Aplikasi

Setelah Anda melakukan persiapan dan menambahkan komponen React pada halaman HTML, langkah selanjutnya adalah menjalankan aplikasi React Anda. Berikut adalah langkah-langkah untuk menjalankan aplikasi:
  • Buka terminal atau command prompt.
  • Pastikan Anda berada dalam direktori proyek React Anda. Jika tidak, navigasikan ke direktori tersebut menggunakan perintah berikut:
cd path/ke/direktori/proyek
Ganti "path/ke/direktori/proyek" dengan jalur sebenarnya ke direktori proyek React Anda.
  • Jalankan perintah berikut untuk memulai server pengembangan:
npm start
Perintah ini akan memulai server pengembangan dan menjalankan aplikasi React Anda.
  • Tunggu beberapa saat hingga server pengembangan selesai memuat dan membangun aplikasi Anda. Setelah itu, Anda akan melihat pesan di terminal yang memberitahukan bahwa aplikasi berjalan dan dapat diakses melalui browser.
  • Buka browser web dan akses URL http://localhost:3000
Ini akan mengarahkan Anda ke aplikasi React yang sedang berjalan. Halaman tersebut akan menampilkan komponen React yang telah Anda buat.

Dan selamat! Anda telah berhasil menjalankan aplikasi React Anda. Sekarang, Anda dapat melihat komponen React Anda bekerja dan mulai mengembangkan lebih lanjut dengan menambahkan lebih banyak komponen, membuat interaksi, dan membangun fungsionalitas yang lebih kompleks. Setiap kali Anda melakukan perubahan pada komponen React, server pengembangan akan secara otomatis memperbarui halaman Anda di browser.