SISTEM WEB DAN MOBILE

React.JS

Dosen Pengampu :

Rika Yulian, M.T.

Disusun Oleh :

Indah Putri Ningsih (200705034)

PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI AR-RANIRY

2023-2024
 KATA PENGANTAR

Assalamu’alaikum. Wr. Wb.

Puji syukur penulis sampaikan ke hadirat Allah Swt., karena berkat dan rahmat-Nya
penulis dapat menyelesaikan makalah yang berjudul “React.JS”. Makalah ini disusun untuk
memenuhi tugas mata kuliah Sistem web dan mobile.

Dalam penyusunan makalah ini menyampaikan hasil yang saya dapatkan yang
diharapkan dapat membantu pembaca dengan mudah untuk memahaminya. Penulis
menyampaikan terima kasih kepada semua pihak yang telah membantu sehingga makalah ini
dapat diselesaikan tepat pada waktunya terutama pada bu Rika Yuliana, M.T. selaku dosen
pengampu mata kuliah Sistem web dan mobile. Makalah ini masih jauh dari sempurna baik
dari bentuk penyusunan maupun materinya. Oleh karena itu, kritik dan saran yang bersifat
membangun sangat kami harapkan demi sempurnanya makalah ini.

Semoga makalah ini memberikan informasi yang bermanfaat bagi pembaca dan untuk
pengembangan wawasan serta peningkatan ilmu pengetahuan bagi kita semua.

Banda Aceh, 8 Maret 2023

ii
 Penulis

DAFTAR ISI

KATA PENGANTAR................................................................................................................................... ii
DAFTAR ISI.............................................................................................................................................. iii
BAB I ........................................................................................................................................................ 1
PENDAHULUAN ....................................................................................................................................... 1
1.1 LATAR BELAKANG.................................................................................................................... 1
1.2 RUMUSAN MASALAH .............................................................................................................. 2
1.3 TUJUAN PENULISAN ................................................................................................................ 2
BAB II ....................................................................................................................................................... 3
PEMBAHASAN ......................................................................................................................................... 3
2.1 Framework .............................................................................................................................. 3
A. Web Frameworks .................................................................................................................... 3
B. Front-End Frameworks (Client-Side Frameworks) .................................................................. 3
C. Back-End Frameworks (Server-Side Frameworks) .................................................................. 4
D. Mobile Development Frameworks ......................................................................................... 4
E. Content Management Frameworks ........................................................................................ 4
2.2 Sejarah JavaScript ................................................................................................................... 4
2.3 sejarah react.JS ....................................................................................................................... 5
2.4 Pengertian React.JS ................................................................................................................. 5
2.5 Fitur yang Dimiliki React JS ..................................................................................................... 6
A. Virtual DOM (VDOM) .............................................................................................................. 6
B. JSX (JavaScript XML) ................................................................................................................ 6
C. React Native ............................................................................................................................ 7
D. Single-way Data Flow .............................................................................................................. 7
E. Libraries Integration ................................................................................................................ 8
F. Declarative .............................................................................................................................. 9
G. Flux ........................................................................................................................................ 10
H. React Views ........................................................................................................................... 11
2.6 Kelebihan dan kekurangan React.JS ..................................................................................... 12
Kelebihan React.js ......................................................................................................................... 12
Kekurangan React.js ...................................................................................................................... 12
BAB III .................................................................................................................................................... 14

iii
PENUTUP ............................................................................................................................................... 14
KESIMPULAN ..................................................................................................................................... 14
REFERENSI ......................................................................................................................................... 15

iv
 BAB I

PENDAHULUAN
1.1 LATAR BELAKANG

Teknologi informasi yang telah berkembang sangat pesat telah menjadikan internet
tersedia secara luas untuk digunakan. Hal ini pun berdampak pada mudahnya masyarakat
untuk mengakses sebuah website. Dalam pembangunan sebuah website pun, antarmuka
pengguna menjadi suatu hal yang sangat penting dan perlu diperhatikan oleh sang
pengembang website tersebut, hal ini karena antarmuka pengguna adalah hal yang
berhubungan secara langsung dengan pengguna dari situs tersebut. Antarmuka yang
menarik namun mudah digunakan menjadi salah satu hal yang dapat menentukan apakah
situs tersebut akan mendapatkan banyak pengunjung atau tidak.
Salah satu cara untuk membangun antarmuka yang menarik adalah dapat dengan
menggunakan bahasa JavaScript, sebuah bahasa pemrograman script yang didukung oleh
browser-browser yang pada umumnya digunakan seperti Firefox, Safari, Opera, maupun
Google Chrome. Belakangan ini banyak bermunculan JavaScript library yang dapat
digunakan untuk membantu pengembang web dalam mengembangkan antarmuka yang
akan digunakan. Salah satu JavaScript library yang populer dan banyak digunakan saat ini
adalah ReactJS yang merupakan JavaScript library yang berfokus pada pembangunan
antarmuka yang cepat, kompleks, namun tetap handal untuk digunakan.
Karena ReactJS merupakan JavaScript library maka dirinya bersifat clientside yang
artinya berjalan pada komputer yang digunakan untuk mengakses situs yangdikembangka
dengan ReactJS. Hal ini menjadikan seluruh antarmuka yang dibangun menggunakan
ReactJS akan di-render pada komputer client, yang mana dalam hal kecepatan adalah
sangat cepat begitu React.JS telah selesai diunduh dari server. Jika dibandingkan dengan
situs-situs yang masih mengandalkan rendering antarmuka secara server-side, dengan
tidak perlunya sebuah antarmuka untuk dirender secara server-side maka hal ini tentu saja
akan mengurangi beban kerja dari web server yang digunakan untuk menjalankan sebuah
web, menjadikan server dapat melayani request client yang lebih banyak dikarenakan
server dalam hal ini hanya menyediakan data yang akan diolah pada client-side.
Kelebihan lain dari memakai client-side rendering sangat terlihat ketika pengguna
melakukan refresh pada halaman web. Dengan menggunakan client-side rendering, maka

1
 hanya perlu data baru saja yang diambil dari server dan kemudian ditampilkan kepada
pengguna, tanpa perlu me-load keseluruhan halaman web lagi dari awal yang tentu saja
sangat mengurangi beban server serta waktu untuk menampilkan halaman web. Bahkan
dengan memberikan animasi bahwa halaman web tersebut sedang di-refresh maka
pengguna dapat mengetahui apa yang sedang terjadi di halaman web tersebut.

1.2 RUMUSAN MASALAH

1. Menjelaskan ap aitu framework, java script, React.JS
2. Menjelaskan fitur-fitur pada React.JS
3. Menjelaskan kelebihan dan kekurangan

1.3 TUJUAN PENULISAN

Tujuan dari pembuatan makalah ini adalah untuk memenuhi Sistem web dan mobile dan
lebih mengenal tentang framework React.JS.

2
 BAB II

PEMBAHASAN
2.1 Framework
Framework adalah kerangka kerja pemrograman yang mencakup library atau perpustakaan
kode, model perangkat lunak, Application Programming Interfaces (APIs), dan berbagai
elemen lain yang dapat mempermudah proses pemrograman. Sebuah framework dapat
digunakan untuk membangun sebuah aplikasi berbasis website maupun perangkat lunak.

Fungsi Framework diantara lain :

• Membuat koding lebih mudah dan efisien

• Meningkatkan keamanan
• Memudahkan proses debug dan pemeliharaan aplikasi
• Meningkatkan kemahiran database
• Memungkinkan kolaborasi
Jenis dan Contoh Framework

A. Web Frameworks
Web frameworks adalah kerangka kerja pemrograman yang dapat membantu pengembang
dalam membuat aplikasi web. Meski pembuatan website sebenarnya tidak harus
menggunakan framework, beberapa website nyatanya tidak cukup menggunakan HTML,
JavaScript, dan CSS saja pada pembuatannya.

Sebuah website yang dinamis membutuhkan interaksi dengan database sehingga

penggunaan web framework akan membuat prosesnya menjadi lebih mudah.Ada banyak
contoh web framework yang ada dan populer di antara para programmer. Sebagian besarnya
mengadopsi pola MVC atau model-view-controller. CodeIgniter dan Laravel, dua web
framework PHP populer, juga menggunakan konsep MVC pada kerangka kerjanya.

B. Front-End Frameworks (Client-Side Frameworks)

Front-end framework adalah kerangka kerja yang memudahkan programmer dalam
memprogram halaman atau aplikasi yang terlihat oleh pengguna akhir. Jenis framework satu
ini menggunakan bahasa pemrograman Javascript, HTML, dan CSS dalam pembangunannya.

Adapun beberapa contoh dari front-end framework (sebutan lainnya adalah client-side
framework) adalah React JS, Vue JS, Bootstrap, dan sebagainya.

3
 C. Back-End Frameworks (Server-Side Frameworks)
Back-end framework atau server-side framework adalah kerangka kerja yang membantu
pengembang untuk bekerja dengan bahasa pemrograman di sisi server seperti Python, Ruby,
PHP, Java, dan sebagainya.

Framework ini membantu pengelolaan database, mengirim dan memproses data, cookies,
sesi, dan sebagainya. Beberapa contoh dari back-end framework adalah Django (framework
Python), Ruby on Rails, Laravel, CodeIgniter, dan lainnya.

D. Mobile Development Frameworks

Industri aplikasi mobile saat ini berkembang sangat cepat dengan pasar yang sangat luas.
Aplikasi mobile pun bisa kita buat dengan framework. Adapun beberapa contoh framework
mobile app tersebut adalah Flutter, Xamarin, Ionic, dan React Native.

E. Content Management Frameworks

Content management framework (CMF) adalah kerangka kerja yang memfasilitasi
pemrograman dari aplikasi Content Management System (CMS) seperti WordPress,
PrestaShop, Wix, Joomla, dan sebagainya. Ada banyak CMF yang tersedia sesuai dengan
platform yang pengembang gunakan untuk membuat aplikasi CMS terkait.

2.2 Sejarah JavaScript

Pada tahun 1994 JavaScript mulai dikenal, pada saat itu web dan internet sudah mulai
berkembang. JavaScript didesain oleh Brendan Eich yang merupakan karyawan Netscape.
Transformasi nama JavaScript, dimulai dari Mocha, Mona, LiveScript, hingga akhirnya resmi
bernama JavaScript.

Versi awal bahasa JS hanya dipakai di kalangan Netscape beserta dengan fungsionalitas
pun yang masih terbatas. Singkat cerita pada tahun 1996 JavaScript secara resmi dinamakan
sebagai ECMAScript. ECMAScript 2 dikembangkan pada tahun 1998 yang dilanjutkan
dengan ECMAScript 3 setahun kemudian. ECMAScript terus dikembangkan sampai akhirnya
menjadi JavaScript atau JS hingga saat ini.

JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website

agar lebih dinamis dan interaktif. Kalau sebelumnya kamu hanya mengenal HTML dan CSS
JavaScript dapat meningkatkan fungsionalitas pada halaman web. Bahkan dengan JavaScript
ini kamu bisa membuat aplikasi, tools, atau bahkan game pada web.

4
Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan bahasa pemrograman jenis
interpreter, sehingga kamu tidak memerlukan compiler untuk menjalankannya. JavaScript
memiliki fitur-fitur seperti berorientasi objek, client-side, high-level programming, dan
loosely typed.

2.3 sejarah react.JS

React.JS adalah kerangka kerja JavaScript. React awalnya dibuat oleh para insinyur di
Facebook memecahkan tantangan yang terlibat ketika mengembangkan antarmuka pengguna
yang kompleks dengan kumpulan data itu berubah seiring waktu.

React.JS Resmi dirilis pada tahun 2013, React JS dibuat oleh Jordan Walke. React JS
ini telah menjadi salah satu pustaka UI terpenting dalam Javascript, dan telah digunakan oleh
Facebook, Instagram, Netflix, Spotify, Medium hingga Twitter. React telah mengubah cara
Anda membangun antarmuka UI, kebanyakan orang menyebut React JS sebuah framework.
Secara teknis React JS bukanlah sebuah framework melainkan sebuah library yang digunakan
untuk membuat UI.

Jordan Walke merupakan salah satu karyawan Facebook, prototipe React JS yang ia rilis
pertama kali Fax JS yang terinspirasi dari XHP. Facebook menyadari bahwa aplikasi web
milik mereka semakin kompleks, ada banyak bagian yang harus terus menerus di update
seperti pada bagian news feed, chat list, chat box, dan lainnya secara realtime. Untuk
memenuhi hal tersebut, sangat tidak memungkinkan untuk menggunakan JQuery yang masih
tradisional karena memakan banyak biaya kedepannya. Memanipulasi DOM membutuhkan
resource yang besar, sehingga React JS hadir untuk memberikan solusi berupa Virtual DOM
yang menurut mereka lebih cepat.

2.4 Pengertian React.JS

React JS adalah sebuah pustaka javascript, React JS bersifat composable user interface
yang berarti pengguna bisa membuat berbagai UI dan nantinya bisa dibagi dalam beberapa
komponen dan juga bersifat reusable component yang berarti komponennya bisa digunakan
kembali tanpa harus membangun kembali dari awal lagi, React JS bisa digunakan untuk
membangun antarmuka pengguna yang khusus untuk tampilan aplikasi dalam satu halaman
yang menangani tampilan pada web dan aplikasi seluler.

5
2.5 Fitur yang Dimiliki React JS
React JS juga memiliki fitur bawaan yang bisa digunakan sesuai dengan komponennya
masing-masing, berikut ulasannya.

A. Virtual DOM (VDOM)

Adalah sebuah konsep dalam pemrograman di mana representasi ideal atau “virtual” dari
antarmuka pengguna disimpan dalam memori dan disinkronkan dengan DOM “yang
sebenarnya” oleh library seperti ReactDOM. Proses ini disebut reconciliation.

Pendekatan ini memungkinkan API deklaratif React: Anda cukup memberi tahu React
state apa yang Anda inginkan untuk antarmuka pengguna, dan React akan memastikan DOM
sesuai dengan state yang Anda inginkan. Hal ini menciptakan abstraksi yang memudahkan
manipulasi atribut, event handling, dan pembaruan DOM yang seharusnya Anda lakukan
secara manual untuk membangun aplikasi Anda.

Karena “virtual DOM” lebih merupakan pola daripada sebuah teknologi, kadang orang
mengatakan itu berarti hal yang berbeda. Di dunia React, istilah “virtual DOM” biasanya
dikaitkan dengan elemen React karena mereka adalah objek yang mewakili antarmuka
pengguna. React juga menggunakan objek internal yang disebut ”fiber” untuk menyimpan
informasi tambahan tentang diagram komponen. Mereka juga dapat dianggap sebagai bagian
dari implementasi “virtual DOM” di React.

B. JSX (JavaScript XML)

JSX React.js adalah gabungan antara JSX dan React.js. JSX digunakan untuk menulis
kode yang menyerupai HTML dalam JavaScript, sementara React.js digunakan untuk
membangun antarmuka pengguna (user interface) yang responsif dan dinamis.

React.js menggunakan JSX untuk mendefinisikan struktur antarmuka pengguna. JSX

memungkinkan pengembang web untuk menuliskan kode yang mudah dibaca dan ditulis,
sementara React.js mengambil kode tersebut dan menghasilkan kode JavaScript yang dapat
dijalankan pada browser.

Contoh penggunaan JSX React.js adalah sebagai berikut:

import React from 'react';

function App() {
return (
<div>

6
 <h1>Hello World!</h1>
<p>This is my first React app using JSX.</p>
</div>
);
}
export default App;
Dalam contoh tersebut, kode JSX digunakan untuk mendefinisikan struktur antarmuka
pengguna dengan elemen HTML seperti <div>, <h1>, dan <p>. Kode tersebut kemudian
diambil oleh React.js dan diubah menjadi kode JavaScript yang dapat dijalankan pada
browser.
C. React Native
React Js juga memiliki native library yang diluncurkan oleh Facebook pada 2015 silam,
yang menyediakan Arsitektur React pada Native Application seperti iOS, Android, dan juga
UPD. React Native merupakan suatu framework yang bisa digunakan untuk membangun
aplikasi hanya dengan Javascript, desain yang digunakannya sama persis seperti React
sehingga Anda juga bisa menggunakannya untuk membangun aplikasi dengan UI Library
yang luas dan declarative component. Keunggulan yang dimiliki framework satu ini adalah
kode yang digunakan bisa untuk aplikasi Android maupun iOS, sehingga Anda hanya perlu
membuat satu block code saja tanpa harus membuatnya dalam jumlah lebih.

D. Single-way Data Flow

Single-way data flow adalah sebuah konsep pada React.js di mana data hanya dapat
bergerak ke arah satu arah. Konsep ini juga dikenal dengan pendekatan "unidirectional data
flow".

Dalam single-way data flow, tampilan (view) tidak dapat mengubah data secara langsung.
Sebaliknya, tampilan (view) hanya dapat mengirimkan permintaan (request) ke komponen
(component) yang lebih tinggi, yang kemudian akan memperbarui data dan mengirimkan
kembali data yang baru ke tampilan (view).

Contoh penggunaan single-way data flow pada React.js dapat dilihat pada kode berikut:

import React, { useState } from 'react';

function App() {
const [count, setCount] = useState(0);
const handleIncrement = () => {

7
 setCount(count + 1);
};
const handleDecrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
export default App;
Dalam contoh tersebut, kita menggunakan fungsi useState untuk menyimpan data count dan
fungsi setCount untuk memperbarui data count. Kemudian, kita membuat dua fungsi
handleIncrement dan handleDecrement yang akan dipanggil ketika pengguna menekan
tombol "Increment" atau "Decrement". Fungsi handleIncrement dan handleDecrement hanya
memanggil fungsi setCount untuk memperbarui data count.
Dalam contoh tersebut, data hanya dapat bergerak ke arah satu arah, yaitu dari fungsi
useState ke tampilan (view) dan dari tampilan (view) ke fungsi setCount. Hal ini memastikan
bahwa data pada aplikasi web selalu konsisten dan terhindar dari kesalahan yang disebabkan
oleh perubahan data secara tidak langsung.
Dalam keseluruhan prosesnya, data selalu dikontrol oleh komponen (component) yang lebih
tinggi, dan komponen (component) yang lebih rendah hanya bertindak sebagai pengguna
data. Konsep ini memastikan bahwa data pada aplikasi web selalu terorganisir dan mudah
dipelihara.

E. Libraries Integration
ReactJS adalah pustaka JavaScript yang dibuat oleh Facebook. Anda dapat mengekspor
komponen Anda dan mengimpornya di mana pun Anda suka di file Anda. ReactJS mirip
dengan mengimpor komponen terlebih dahulu dan kemudian menggunakannya. Ada banyak

8
pustaka JavaScript atau ReactJS yang tersedia, seperti toastify, UUID, dll. Pustaka tersebut
mudah digabungkan ke dalam aplikasi ReactJS Anda.

F. Declarative
Declarative adalah sebuah paradigma pemrograman di mana kita menentukan hasil yang
diinginkan, dan sistem akan menentukan cara mencapainya. Dalam hal React.js, paradigma
declarative digunakan untuk membangun tampilan (view) aplikasi web.

Dalam React.js, pengembang web menentukan tampilan (view) yang diinginkan dalam
bentuk komponen (component) dengan menggunakan sintaks JSX. Kemudian, React.js akan
memperbarui tampilan (view) secara otomatis ketika terdapat perubahan pada data.

Sebagai contoh, jika kita ingin menampilkan daftar to-do list pada aplikasi web dengan
menggunakan React.js, kita dapat membuat sebuah komponen (component) dengan sintaks
JSX seperti berikut:

import React from 'react';

function TodoList(props) {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
export default TodoList;
Dalam komponen (component) tersebut, kita hanya perlu mendefinisikan struktur HTML dan
menentukan bagaimana data ditampilkan. React.js akan secara otomatis memperbarui
tampilan (view) ketika terdapat perubahan pada data.

Paradigma declarative pada React.js memudahkan pengembangan aplikasi web dengan

mengurangi kompleksitas kode dan meningkatkan efisiensi pengembangan. Selain itu,
penggunaan JSX juga memudahkan pengembang web untuk membuat tampilan (view) yang
lebih kompleks dengan lebih mudah dan efisien.

9
 G. Flux
Flux adalah sebuah arsitektur pengembangan aplikasi web yang diciptakan oleh Facebook
untuk memudahkan pengembangan aplikasi web dengan menggunakan React.js. Arsitektur
Flux berfokus pada manajemen data pada aplikasi web dengan mengurangi kompleksitas
kode dan meningkatkan performa aplikasi.

Flux menggunakan pendekatan unidirectional data flow, yang artinya data hanya dapat
bergerak ke arah satu arah, yaitu dari tampilan (view) ke data model. Hal ini memungkinkan
pengembang web untuk mengelola data secara terpusat dan memudahkan pengembangan
aplikasi web dengan tim yang besar.

Dalam arsitektur Flux, terdapat beberapa komponen utama, yaitu:

• View: Komponen yang bertanggung jawab untuk menampilkan data pada antarmuka
pengguna.
• Action: Objek yang digunakan untuk mengirimkan data dari View ke Store.
• Store: Tempat penyimpanan data pada aplikasi web. Store menyimpan data secara
terpusat dan menangani pembaruan data pada aplikasi web.
• Dispatcher: Objek yang mengelola alur data pada aplikasi web dan menerima Action
dari View.

Berikut adalah contoh kode untuk membuat Action, Store, dan View dengan React.js:

// Action
import { dispatcher } from './dispatcher';
export const addItem = (item) => {
dispatcher.dispatch({
type: 'ADD_ITEM',
payload: item
});
}
export default App;
Dalam contoh tersebut, kita membuat sebuah aplikasi web sederhana dengan menggunakan
arsitektur Flux dan React.js. Action digunakan untuk mengirimkan data dari View ke Store,
Store digunakan untuk menyimpan data secara terpusat, dan View digunakan untuk
menampilkan data pada antarmuka pengguna.

10
 H. React Views
React view adalah tampilan (view) yang dibangun dengan menggunakan React.js. Dalam
konteks aplikasi web, tampilan (view) adalah bagian dari antarmuka pengguna (user
interface) yang dilihat oleh pengguna dan dihasilkan oleh perangkat lunak.

Dengan menggunakan React.js, tampilan (view) dapat dibangun dengan lebih mudah dan
efisien, karena React.js menggunakan konsep komponen (component) yang memungkinkan
pengembang web untuk membagi tampilan (view) menjadi bagian-bagian kecil yang dapat
digunakan kembali.

Sebagai contoh, kita dapat membuat komponen (component) untuk header, menu navigasi,
konten utama, dan footer, yang masing-masing komponen tersebut dapat digunakan kembali
di halaman web yang berbeda. Dengan membagi tampilan (view) menjadi komponen
(component) yang lebih kecil, pengembang web dapat memudahkan pemeliharaan dan
pengembangan aplikasi web.

Berikut adalah contoh kode untuk membuat komponen (component) sederhana dengan
React.js:

import React from 'react';

function Header() {
return (
<header>
<h1>My Website</h1>
</header>
);
}
export default Header;
Dalam contoh tersebut, kita membuat sebuah komponen (component) sederhana untuk bagian
header dari tampilan (view) dengan menggunakan JSX dan React.js. Komponen (component)
tersebut dapat digunakan di berbagai halaman web yang menggunakan header yang sama.

11
2.6 Kelebihan dan kekurangan React.JS
React.js adalah salah satu library JavaScript yang paling populer dan banyak
digunakan di dunia pengembangan web. Seperti halnya teknologi lainnya, React.js memiliki
kelebihan dan kekurangan yang perlu dipertimbangkan sebelum memutuskan untuk
menggunakannya. Berikut adalah beberapa kelebihan dan kekurangan React.js:

Kelebihan React.js:

• Memiliki kinerja yang cepat: React.js menggunakan teknik rendering yang canggih,
sehingga dapat menampilkan tampilan (view) yang lebih cepat dibandingkan dengan
teknologi sejenisnya.
• Dapat digunakan pada proyek yang besar: React.js memiliki kemampuan untuk
memecah tampilan (view) menjadi beberapa komponen (component), sehingga
memudahkan pengembang untuk membangun aplikasi web yang kompleks.
• Memiliki dokumentasi yang lengkap: React.js memiliki dokumentasi resmi yang
lengkap dan tersedia dalam banyak bahasa, sehingga memudahkan pengembang untuk
belajar dan memahami konsep-konsep yang terkait dengan React.js.
• Komunitas yang besar: React.js memiliki komunitas pengembang yang besar dan
aktif, sehingga pengembang dapat dengan mudah menemukan solusi atas masalah
yang dihadapi dan berbagi pengetahuan dengan pengembang lainnya.
• Mendukung pengembangan aplikasi mobile: React Native, sebuah framework yang
berbasis pada React.js, memungkinkan pengembang untuk membuat aplikasi mobile
untuk platform iOS dan Android dengan menggunakan JavaScript.

Kekurangan React.js:

• Memiliki kurva belajar yang tinggi: React.js memerlukan pemahaman yang kuat mengenai
konsep-konsep dasar, seperti JSX dan komponen (component), sehingga memerlukan
waktu belajar yang cukup lama bagi pengembang yang baru memulai.
• Membutuhkan pustaka tambahan: Untuk mengoptimalkan kinerja dan fungsionalitas
aplikasi web, pengembang seringkali harus menggunakan pustaka tambahan seperti
Redux, React Router, dan lain sebagainya.
• Tidak sepenuhnya SEO-friendly: Meskipun React.js memungkinkan pengembang untuk
membuat aplikasi web yang responsif, tampilan (view) pada aplikasi web yang dibangun
menggunakan React.js cenderung lebih sulit diindeks oleh mesin pencari.

12
• Kurangnya dukungan browser lama: Beberapa fitur yang terdapat pada React.js hanya
dapat dijalankan pada browser yang lebih baru, sehingga aplikasi web yang dibangun
menggunakan React.js tidak dapat diakses oleh pengguna yang masih menggunakan
browser yang lebih lama.
• Kompleksitas pengembangan yang tinggi: Meskipun React.js memudahkan pengembang
untuk membuat aplikasi web yang kompleks, namun pengembangan aplikasi web yang
lebih sederhana dengan menggunakan React.js cenderung lebih rumit dan memerlukan
waktu yang lebih lama.

13
 BAB III

PENUTUP
KESIMPULAN
Framework adalah kerangka kerja pemrograman yang mencakup library atau perpustakaan
kode, model perangkat lunak, Application Programming Interfaces (APIs), dan berbagai
elemen lain yang dapat mempermudah proses pemrograman.
React JS adalah sebuah pustaka javascript, React JS bersifat composable user interface yang
berarti pengguna bisa membuat berbagai UI dan nantinya bisa dibagi dalam beberapa
komponen dan juga bersifat reusable component yang berarti komponennya bisa digunakan
kembali tanpa harus membangun kembali dari awal lagi, React JS bisa digunakan untuk
membangun antarmuka pengguna yang khusus untuk tampilan aplikasi dalam satu halaman
yang menangani tampilan pada web dan aplikasi seluler.
JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar
lebih dinamis dan interaktif. Kalau sebelumnya kamu hanya mengenal HTML dan CSS
JavaScript dapat meningkatkan fungsionalitas pada halaman web.
Fitur yang Dimiliki React JS
a. Virtual DOM (VDOM)
b. JSX (JavaScript XML)
c. React Native
d. Single-way Data Flow
e. Libraries Integration
f. Declarative
g. Flux
h. React Views

Kelebihan React.JS
• Memiliki kinerja yang cepat
• Dapat digunakan pada proyek yang besar
• Memiliki dokumentasi yang lengkap
• Komunitas yang besar
• Mendukung pengembangan aplikasi mobile

Kekurangan react.JS
• Memiliki kurva belajar yang tinggi
• Membutuhkan pustaka tambahan.
• Tidak sepenuhnya SEO-friendly
• Kurangnya dukungan browser lama
• Kompleksitas pengembangan yang tinggi

14
REFERENSI
https://www.exabytes.co.id/blog/pengertian-framework/

Apa itu React JS? Penjelasan Lengkap Bagi Programmer Pemula (dewaweb.com)

12 Framework JavaScript Terbaik yang Wajib Anda Tahu! (niagahoster.co.id)

https://www.bing.com/search?q=pengertian+framework&cvid

15