Scribd
Unggah
268 tayangan18 halaman

Materi Pertemuan 1 Belajar React Js Untuk Pemula

React JS adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna website atau aplikasi web. Library ini memudahkan pengembangan dengan menyediakan kode JavaScript yang telah ditulis sebelumnya. React JS populer karena menggunakan JSX dan Virtual DOM yang meningkatkan kinerja dengan memperbarui bagian DOM yang berubah saja. Cara instalasi React JS meliputi penginstalan Node.js, membuat folder proyek, dan menjalankan perintah untuk membuat dan

Diunggah oleh

trez17
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
268 tayangan18 halaman

Materi Pertemuan 1 Belajar React Js Untuk Pemula

React JS adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna website atau aplikasi web. Library ini memudahkan pengembangan dengan menyediakan kode JavaScript yang telah ditulis sebelumnya. React JS populer karena menggunakan JSX dan Virtual DOM yang meningkatkan kinerja dengan memperbarui bagian DOM yang berubah saja. Cara instalasi React JS meliputi penginstalan Node.js, membuat folder proyek, dan menjalankan perintah untuk membuat dan

Diunggah oleh

trez17
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 18

Pemrograman

Web – React Js
Pert1
Oleh:

Sutrisno, M.Kom
Tentang Sutrisno,
M.Kom
O w n e r:

- w w w. r uma h -be l a j a r. c o m

- w w w. mi tra i nf o r ma ti k a i nd o ne si a . c o. i d

- w w w. c a t ura g r o s e j a h te ra . c o m

- w w w. j u a l bi bi t. my. i d

- w w w. n ayya p ro p e r ti . c o m

- w w w. a h -ma du. c o m

- w w w. s o e tri s no g a l e ri . c o m
Syarat Belajar React JS

• Menguasai HTML

• Menguasai CSS

• Menguasai Bootstrap

• Menguasai Pemrograman JS Dasar


React JS adalah library JavaScript yang biasa digunakan
saat membangun UI suatu website atau aplikasi web.

Apa itu Jadi, React JS bisa dianggap seperti perpustakaan yang


berisi berbagai kode JavaScript yang sudah tertulis (pre-
React JS? written).

Anda tinggal mengambil kode yang ingin Anda gunakan.


Sehingga, ini membuat proses coding menjadi lebih efisien
dengan framework JavaScript tersebut.
Apa itu Javascript?

JavaScript adalah bahasa pemrograman yang dapat membantu Anda


membuat konten web yang dinamis, seperti form, slideshow, atau
konten interaktif lainnya.
Apa itu Javascript?

Dengan JavaScript, Anda dapat membuat tampilan website yang lebih


menarik. Nah, inilah mengapa library ini berguna untuk membangun
UI, karena pengaplikasian kode JavaScript di website Anda bisa
menjadi lebih mudah.
Librari React Bersifat Open Source

Oh ya, library ini juga bersifat open source. Artinya, isinya akan terus
berkembang karena semua orang bebas memodifikasi kode di
dalamnya.

Berkat kegunaannya, React JS adalah salah satu librar y yang sangat


populer. Saat ini ada lebih dari satu juta website yang sudah
menggunakannya. Bahkan website-website terkenal seperti bbc.com,
paypal.com, dan yahoo.com juga menggunakannya .
Apa Kelebihan React JS?

Di atas, kita sudah membahas sebagian fungsi dari librar y ini, yaitu
untuk mempermudah penggunaan JavaScript. Selain itu, ada dua fitur
tambahan yang menjadi keunggulannya yaitu JSX dan Virtual DOM.

Kedua fitur ini yang seringkali disebut jika React JS sedang


dibandingkan dengan librar y JavaScript yang lain – seperti Inferno
JS atau Preact. Oleh karena itu, mari kita lihat kedua fitur tersebut
secara lebih detail!
JSX

JSX adalah extension syntax JavaScript yang memungkinkan Anda


untuk memodifikasi Document Object Model (DOM) dengan kode
bergaya HTML.

Untuk mengetahui fungsi JSX dengan lebih jelas, Anda perlu tahu
tentang DOM terlebih dahulu.
DOM

DO M a dal a h application pro g ra mming inter face ( AP I) y ang be rfu ngsi


u n tuk menga tu r st r ukt ur hala man web. Na h, un tuk mena m b a h kon te n dinamis ke
da l a m ha l a m a n we b , deve l oper m e s ti m e m o di fik a si D O M .

Den g an k a ta l ain , JSX a k an me mpe rm u da h An da u n tuk me na m b a h ko n te n di n amis .


K a re n a ex ten sio n i ni da p a t m e mb an tu Anda u n tuk me ma s ukk a n s y n tax berg a y a
H TML ke da l a m D O M .

Ak an te ta pi , JSX buk a nl ah HTML . Mu ngkin b aha s a se de rha n an y a seperti ini : J SX


t e r l i ha t s e p e rt i H TML , t a p i m e m i lik i f u n gsi s e p e rt i J a va S cr ipt .

Sel ai n i tu , An da j u g a bi s a men ggu n ak an J SX d i berb a g ai brow ser. K are n a JSX co cok


de n g a n s e m u a p l a tfo rm b r ows er m o de r n – s e p e r ti C hr o me a ta u F i r efox .
Virtual DOM

Ke t i k a d eve l o p e r mengupdate DOM dengan menggunakan JSX, React JS akan


membuat Virtual DOM, yaitu salinan dari DOM asli yang ingin diupdate.

N a h , V i r t u a l D O M b e r g u n a u n t u k m e l i h a t b a g i a n d a r i D O M a s l i y a n g b e r u b a h . Co n t o h n y a ,
k e t i k a p e n g g u n a w e b s i t e m e n g k l i k t o m b o l l i k e a t a u co m m e n t , t e n t u y a n g p e r l u b e r u b a h
h a n y a b a g i a n l i k e d a n co m m e n t s a j a , b u k a n ?

Ke t i k a m e n e m u k a n b a g i a n y a n g p e r l u d i u b a h , R e a c t J S a k a n m e n g u b a h b a g i a n i t u s a j a . J a d i ,
pengguna tidak perlu reload satu halaman untuk melihat perubahannya.

Hal ini dapat berpengaruh terhadap performa website. Karena setiap perubahan hanya
dilakukan pada bagian yang diperlukan saja.

Ta n p a V i r t u a l D O M , w e b s i t e A n d a a k a n m e n g g u n a k a n H T M L u n t u k u p d a t e D O M . S e h i n g g a ,
seluruh DOMnya mesti direload untuk menampilkan perubahan di satu bagian – seperti
m e n g k l i k t o m b o l l i k e a t a u m e n a m b a h k a n k o m e n t a r.
Bagaimana Cara
Install React JS ?

1.Download installer node.js. Node JS


adalah virtual environment untuk
framework lain, termasuk React. Lalu
install sampai selesai.

source: https://nodejs.org /en /


Buatlah folder baru untuk install
react. Contohnya di D:\React-JS
Buka command
prompt (CMD),
lalu
ketikkan: npm -v
Sekarang, mari masuk ke folder instalas i react yang baru Anda buat. Ketik:
d:
cd React-JS
Ketik kode di bawah untuk
menginstall react:
npm install -g create-react-app

Untuk mengecek kesuksesan proses


instalasinya, Anda bisa cek versi
reactnya dengan mengetik:
create-react-app –version
Nah, sekarang Anda tinggal membuat project react JS Anda yang
pertama. Untuk melakukannya, ketikkan kode berikut berturut -turut:
create-react-app web-react-saya1 (Anda bisa mengganti “web -react-
saya” dengan nama project yang lain)
cd web-react-saya1
npm start
Setelah proses pembuatan projectnya selesai, akan ada
halaman web dengan alamat localhost:3000 yang terbuka
secara otomatis. Berikut adalah tampilannya:

Anda mungkin juga menyukai