{"id":20689,"date":"2024-04-11T11:44:00","date_gmt":"2024-04-11T04:44:00","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=20689"},"modified":"2026-03-05T14:02:15","modified_gmt":"2026-03-05T07:02:15","slug":"pengenalan-konsep-dan-tutorial-react-js-untuk-pemula","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/pengenalan-konsep-dan-tutorial-react-js-untuk-pemula\/","title":{"rendered":"Pengenalan Konsep dan Tutorial React JS untuk Pemula"},"content":{"rendered":"

Pengenalan Konsep dan Tutorial React JS untuk Pemula<\/h1><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"tutorial<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Dunia web development semakin dinamis, dan React JS menjadi salah satu framework pemain terdepan. Perlu diketahui bahwa React JS bukanlah framework JavaScript, karena hanya bertugas untuk untuk merender komponen area tampilan aplikasi. Penemuan ini adalah alternatif untuk framework seperti <\/span>Angular<\/span> dan <\/span>Vue<\/span><\/a>, yang sama-sama bisa digunakan untuk membuat fungsi yang kompleks.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa Itu React JS<\/h2><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

React JS adalah pustaka JavaScript yang di gunakan untuk membangun interface pengguna yang interaktif. Dengan ini, pengembang dapat membuat aplikasi web yang dinamis dan responsif dengan mudah. Pustaka JavaScript ini menggunakan pendekatan berbasis komponen, di mana UI di bagi menjadi komponen-komponen yang independen dan dapat digunakan kembali.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Tujuannya adalah untuk memungkinkan developer dengan mudah membuat UI yang cepat untuk situs web. Konsep utama pustaka JavaScript adalah Document Object Model (DOM) virtual. Artinya, pustaka JavaScript adalah tree yang dibuat berdasarkan komponen JavaScript yang meniru tree dari DOM. Pustaka JavaScript melakukan manipulasi DOM sesedikit mungkin untuk menjaga komponennya tetap bisa di-update.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div>

\n\t
\n\t\t\n\t\t
\n\t\t\t
\"React<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Langkah Awal Belajar React JS<\/h3><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Sebelum memulai perjalanan kamu dalam belajar pustaka JavaScript lebih krusial, ada beberapa hal yang perlu kamu perhatikan. Berikut ini beberapa langkah-langkah belajar pustaka JavaScript:<\/span><\/p>\n

    \n
  1. Pengetahuan Dasar JavaScript
    \n<\/span>Pemahaman dasar tentang JavaScript sangat diperlukan sebelum memulai pustaka JavaScript. Pastikan Anda telah menguasai konsep-konsep dasar seperti variabel, fungsi, objek, dan array.<\/li>\n
  2. Node.js dan npm
    \n<\/span>Pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di komputer Anda. Node.js akan membantu Anda dalam menjalankan lingkungan pengembangan pustaka JavaScript dan npm akan digunakan untuk mengelola dependensi proyek.<\/li>\n
  3. Text Editor\/IDE
    \n<\/span>Pilih text editor atau IDE yang nyaman Anda gunakan. Beberapa pilihan popular untuk belajar pustaka JavaScript Pemula diantaranya Visual Studio Code, Sublime Text, dan Atom. Jika Anda sudah memenuhi ketiga syarat itu, maka mari kita belajar Bersama membuat aplikasi pustaka JavaScript.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Latihan: Hello World di React<\/h4><\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t

    Baiklah, mari kita coba membuat aplikasi pertama dengan React JS<\/span><\/p>\n

      \n
    1. Silahkan buat folder baru bernama <\/span>belajar-react<\/span>, kemudian di dalamnya buat file baru bernama <\/span>hello-react.html<\/span>,.<\/span><\/li>\n
    2. Isi file <\/span>hello-react.html<\/span> dengan kode berikut:<\/span><\/li>\n<\/ol>\n

      <!DOCTYPE html><\/span><\/p>\n

      <html><\/span><\/p>\n

      <head><\/span><\/p>\n

      \u00a0\u00a0\u00a0<meta charset=”utf-8″ \/><\/span><\/p>\n

      \u00a0\u00a0\u00a0<title>Belajar Reactjs<\/title><\/span><\/p>\n

      \u00a0\u00a0\u00a0<script src=”https:\/\/unpkg.com\/react@16\/umd\/react.production.min.js”><\/script><\/span><\/p>\n

      \u00a0\u00a0\u00a0<script src=”https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.production.min.js”><\/script><\/span><\/p>\n

      \u00a0\u00a0\u00a0<script src=”https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js”><\/script><\/span><\/p>\n

      <\/head><\/span><\/p>\n

      <body><\/span><\/p>\n

      \u00a0\u00a0\u00a0<div id="”app”"><\/div><\/span><\/p>\n

      \u00a0\u00a0\u00a0<script type=”text\/babel”><\/span><\/p>\n

      \u00a0\u00a0\u00a0\u00a0\u00a0class Hello extends React.Component {<\/span><\/p>\n

      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0render() {<\/span><\/p>\n

      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return <h1>Hello World Reactjs!<\/h1><\/span><\/p>\n

      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

      \u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

      \u00a0\u00a0\u00a0\u00a0\u00a0ReactDOM.render(<Hello\/>, document.getElementById(“app”));<\/span><\/p>\n

      \u00a0\u00a0\u00a0<\/script><\/span><\/p>\n

      <\/body><\/span><\/p>\n

      <\/html><\/span><\/p>\n

      3. Setelah itu, buka file <\/span>hello-react.html<\/span> dengan web browser. Maka hasilnya:<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

      \n\t
      \n\t\t\n\t\t
      \n\t\t\t
      \"tutorial<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t
      \n\t\t\t

      Selamat! sudah berhasil membuat aplikasi react pertama.\u00a0<\/span><\/p>\n

      Untuk Anda yang masih belum mengerti apa maksud kode di atas, berikut penjelasannya. Hal pertama yang perlu kita lakukan adalah kita membutuhkan library react di HTML. kita bisa menyematkannya seperti contoh di bawah ini:<\/span><\/p>\n

      <script src=”https:\/\/unpkg.com\/react@16\/umd\/react.production.min.js”><\/script><\/span><\/p>\n

      <script src=”https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.production.min.js”><\/script><\/span><\/p>\n

      <script src=”<\/span>http<\/span>s:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js<\/span>“><\/script><\/span><\/p>\n

      Tiga library ini bisa langsung mengambilnya di internet. Tetapi, mengapa harus ada tiga library yang digunakan? Jawabannya sudah jelas, karena ketiga-tiganya sangat diperlukan.\u00a0<\/span><\/p>\n

      Pertama, react.production.min.js: File ini berisi versi minimal (dikompresi) dari pustaka inti React, yang penting untuk membuat antarmuka pengguna menggunakan kerangka kerja React.\u00a0<\/span><\/p>\n

      Kedua, react-dom.production.min.js: File ini menyediakan utilitas yang diperlukan untuk merender komponen React di dalam Document Object Model (DOM), memungkinkan mereka berinteraksi dengan halaman web.\u00a0<\/span><\/p>\n

      Ketiga, babel.min.js: Pustaka ini bertindak sebagai transpiler, yang mengubah kode JavaScript modern (misalnya, menggunakan fitur seperti fungsi panah) ke dalam format yang dapat dipahami oleh browser lama.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Pengenalan Konsep dan Tutorial React JS untuk Pemula Dunia web development semakin dinamis, dan React JS menjadi salah satu framework pemain terdepan. Perlu diketahui bahwa React JS bukanlah framework JavaScript, karena hanya bertugas untuk untuk merender komponen area tampilan aplikasi. Penemuan ini adalah alternatif untuk framework seperti Angular dan Vue, yang sama-sama bisa digunakan untuk [...]","protected":false},"author":32,"featured_media":20697,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wds_title":"Pengenalan Konsep dan Tutorial React JS untuk Pemula","_wds_metadesc":"React JS memberikan library yang lengkap dan digunakan bersamaan dengan HTML, selain itu React JS juga memiliki template material-ui dan core-ui yang lengkap.","_wds_focus-keywords":"belajar React JS,tutorial React JS,pustaka JavaScript","_wds_meta-robots-adv":"","_wds_meta-robots-noindex":false,"_wds_meta-robots-nofollow":false,"_wds_meta-robots-index":false,"_wds_meta-robots-follow":false,"_wds_autolinks-exclude":false,"_wds_canonical":"","_wds_opengraph":[],"_wds_twitter":[],"wds_primary_category":300,"footnotes":""},"categories":[300],"tags":[352,353],"class_list":["post-20689","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-react-js","tag-tutorial-react-js"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/20689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=20689"}],"version-history":[{"count":2,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/20689\/revisions"}],"predecessor-version":[{"id":38816,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/20689\/revisions\/38816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/20697"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=20689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=20689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=20689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}