DASAR REACT JS

NAMA : Febri Yar Darmawansyah p

Npm : 223510288
MATA KULIAH: DASAR PEMOGRAMAN MOBILE
APA ITU REACT JS?
 Pengenalan React Js
React JS adalah pustaka JavaScript yang digunakan untuk membangun
antarmuka pengguna (UI). React digunakan untuk membuat aplikasi web berbasis
komponen yang dinamis, cepat, dan efisien. React dikembangkan oleh Facebook
dan sekarang dikelola oleh Facebook bersama komunitas open-source.
Kenapa Menggunakan React?
•Komponen: React memungkinkan kita membuat komponen yang dapat
digunakan kembali.
•Virtual DOM: React menggunakan Virtual DOM, yang membuat rendering
UI menjadi lebih cepat.
•Unidirectional Data Flow: Data di dalam React mengalir satu arah,
membuat debugging lebih mudah.
•Ekosistem Besar: Ada banyak library dan alat yang mendukung React,
membuatnya fleksibel dan mudah berkembang.
01 DOM MANIPULATION
 Pengenalan Dom

DOM (Document Object Model) adalah representasi struktur dokumen HTML

di dalam browser. DOM memungkinkan JavaScript untuk mengakses,
memanipulasi, dan memperbarui konten, struktur, dan gaya halaman web
secara dinamis.

Konsep Dasar DOM

•Dokumen HTML dianggap sebagai pohon (tree) dari elemen-elemen.

•Setiap elemen dalam HTML, seperti <div>, <p>, atau <h1>,
direpresentasikan sebagai node dalam struktur DOM.
•JavaScript dapat berinteraksi dengan elemen-elemen ini untuk mengubah
tampilannya tanpa perlu memuat ulang halaman.
Memilih Elemen DOM
Untuk memanipulasi elemen DOM, kita pertama-tama harus memilih elemen tersebut.
Ada beberapa metode yang bisa digunakan:

1. getElemenById()
- Mengambil elemen berdasarkan nilai atribut id – nya.

2. getElemenByClassName()
- Mengembalikan semua elemen yang memiliki kelas tertentu (berupa
HTMLColection).

3. getElemenbyTagName()
- mengembalikan semua dengan tag HTML tertentu.
Memanipulasi Konten dan Atribut Elemen

Mengubah Teks dengan textContent

• Untuk mengubah teks dalam suatu elemen

Mengubah Atribut dengan setAttribute()

•Untuk mengubah atribut seperti src, href, atau class.

Mengubah Style dengan style

•Untuk langsung mengubah gaya elemen.
 Pemrograman Imperatif
02 dan Pemrograman
Deklaratif
Pemograman Imperatif
Pemrograman Imperatif adalah paradigma pemrograman di mana program
dijalankan dengan memberikan instruksi secara langkah demi langkah untuk mencapai
hasil akhir. Pada pemrograman imperatif, kita berfokus pada bagaimana suatu tugas
harus dilakukan.

Ciri - Ciri Pemograman Deklaratif :

•Pendekatan Abstrak: Tidak memerlukan rincian langkah-langkah pelaksanaan, hanya
menggambarkan tujuan akhir.
•Tidak ada Mutasi State: Umumnya, dalam pemrograman deklaratif, data tidak
dimutasi. Sebaliknya, kita bekerja dengan data yang "immutabel" (tidak berubah).
•Tersembunyi Pengendalian Alur: Alur eksekusi sering kali tersembunyi dari
pandangan programmer. Alur program diatur oleh bahasa atau framework yang
digunakan, bukan oleh programmer.
Pemograman Deklaratif
Pemrograman Deklaratif adalah paradigma pemrograman di mana kita berfokus
pada apa yang harus dilakukan, bukan bagaimana melakukannya. Dengan kata lain,
kita mendeklarasikan hasil yang kita inginkan tanpa merinci langkah-langkah spesifik
untuk mencapainya.

Ciri - Ciri Pemograman Imperatif

•Langkah-langkah yang Jelas: Program ditulis dalam serangkaian langkah spesifik untuk
memanipulasi data dan mencapai tujuan.
•Mutasi State: Dalam pendekatan ini, data atau variabel sering diubah (mutated) selama
program berjalan.
•Pengendalian Alur (Flow Control): Digunakan struktur pengendalian alur seperti loop
(for, while), kondisi (if, else), dan pernyataan break atau continue.
Pemograman Deklaratif
Pemrograman Deklaratif adalah paradigma pemrograman di mana kita berfokus
pada apa yang harus dilakukan, bukan bagaimana melakukannya. Dengan kata lain,
kita mendeklarasikan hasil yang kita inginkan tanpa merinci langkah-langkah spesifik
untuk mencapainya.

Ciri - Ciri Pemograman Imperatif

•Langkah-langkah yang Jelas: Program ditulis dalam serangkaian langkah spesifik untuk
memanipulasi data dan mencapai tujuan.
•Mutasi State: Dalam pendekatan ini, data atau variabel sering diubah (mutated) selama
program berjalan.
•Pengendalian Alur (Flow Control): Digunakan struktur pengendalian alur seperti loop
(for, while), kondisi (if, else), dan pernyataan break atau continue.
03 Komponen dan Props
di React Native
 Komponen
Sama seperti di React.js, komponen di React Native adalah blok bangunan utama
dari aplikasi. Komponen memungkinkan kita untuk membagi antarmuka pengguna (UI)
menjadi bagian-bagian kecil yang dapat digunakan kembali.
Ada dua jenis komponen utama di React Native:

1.Functional Components: Ini adalah komponen yang ditulis sebagai fungsi JavaScript.
Biasanya digunakan ketika komponen tidak membutuhkan state atau hanya
membutuhkan hooks seperti useState atau useEffect.
Class Components

Ini adalah komponen yang ditulis sebagai kelas dan biasanya digunakan ketika
kamu membutuhkan state atau lifecycle methods.

Props
Props (kepanjangan dari properties) adalah cara untuk mengirimkan data dari
komponen induk ke komponen anak. Props bersifat immutable, artinya tidak dapat
diubah oleh komponen penerima.
Contoh Penggunaan Props

Dalam contoh di atas, komponen Greeting menerima props.name dan

menggunakannya untuk menampilkan teks yang dipersonalisasi.
 State Management di React Native
•State adalah objek yang digunakan untuk menyimpan data dinamis dalam komponen.
Berbeda dengan props, state bersifat mutable (dapat diubah), dan perubahan state
menyebabkan komponen di-render ulang.
State di Functional Component:
Untuk functional component, kita menggunakan hooks seperti useState untuk
mengelola state.
JSX Syntax di React Native
JSX (JavaScript XML) adalah sintaks yang digunakan untuk menulis komponen di
React dan React Native. JSX memungkinkan kita untuk menulis elemen UI dengan
sintaks yang mirip dengan HTML, tetapi menggunakan kekuatan JavaScript.

JSX di React Native

JSX di React Native sedikit berbeda dari React.js karena tidak menggunakan elemen
HTML seperti <div>, <span>, atau <h1>. Sebagai gantinya, React Native
menyediakan komponen bawaan seperti:

•<View>: Mirip dengan <div> di HTML, digunakan untuk layout.

•<Text>: Digunakan untuk menampilkan teks.
•<Image>: Digunakan untuk menampilkan gambar.
Event Handling di React Native
Event Handling di React Native mirip dengan React.js. Kamu bisa menambahkan
event listener pada komponen untuk menangani berbagai interaksi pengguna, seperti
klik tombol atau input form.
Di React Native, beberapa event yang umum digunakan adalah:
•onPress: Menangani event ketika sebuah komponen (seperti tombol) ditekan.
•onChangeText: Digunakan pada TextInput untuk menangani perubahan teks.

Contoh Event Handling

React
T H A N K S!
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, infographics &
images by Freepik and content by Sandra Medina