Pengantar Frontend

1
 Tujuan

Program yang membimbing siswa memperdalam pemahaman

tentang frontend, dalam hal ini menggunakan teknologi React.
React merupakan framework JavaScript yang biasa digunakan untuk
pengembangan web dari sisi frontend.

2
Frontend

Frontend adalah bagian depan dari sebuah aplikasi atau situs web
yang dilihat dan berinteraksi langsung dengan pengguna. Komponen
Frontend mencakup semua elemen visual seperti teks, gambar,
tombol, menu, hingga animasi.
Frontend
React JS
React

React.js adalah library JavaScript yang digunakan untuk

membangun User Interface berbasis component. React JS
dikembangkan oleh Facebook dan dirilis pertama kali pada tahun
2013. Fokus utama React adalah membuat aplikasi web yang cepat,
dinamis, dan efisien.

Link dokumentasi React

React

● User Interface.
● Element that users see and interact.
● Example: Logo, Nav, Sidebar, Posts.

User Interface
React
Basic Advanced

Variable: let and const Destructing: Array and Object

Data Types Rest parameters and spread

Template Literals Array methods: forEach, map, find,

filter
Conditional Modules

Looping Promise + Async Await

Function: Declaration, Expression,

Arrow
Array and Object
Paradigma/Pendekatan
Pemrograman
Paradigma/Pendekatan Pemrograman

Ada dua paradigma atau pendekatan dalam pemrograman dan

pengembangan perangkat lunak. Yaitu:
1. Imperative Programming
2. Declarative Programming
Imperative

Berfokus pada bagaimana sesuatu dilakukan, dengan memberi

instruksi langkah demi Langkah untuk mencapai suatu hasil.

Ciri-ciri:
• Memberikan serangkaian instruksi eksplisit.
• Mengontrol aliran program menggunakan loop, kondisi, dan
pernyataan langsung.
• Menekankan pada urutan eksekusi.
Imperative

Contoh dalam kehidupan nyata:

Membuat secangkir teh:

1. Rebus air.
2. Masukkan teh ke dalam cangkir.
3. Tuangkan air panas ke cangkir.
4. Tambahkan gula dan aduk.
Imperative

Imperative
Declarative

Paradigma pemrograman di mana Anda hanya menyatakan hasil

yang diinginkan, sementara cara mencapainya ditangani oleh
framework atau library.

Ciri-ciri:
• Berorientasi pada hasil, bukan proses.
• Tidak bergantung pada urutan instruksi.
• Lebih mudah dibaca dan dipahami.
Declarative

Contoh dalam kehidupan nyata:

Membuat secangkir teh:

• “Saya ingin teh manis hangat.” (Detail seperti merebus air atau
menambahkan gula ditangani oleh orang lain atau system).
Declarative

Declarative
Imperative vs Declarative
Aspek Imperative Declarative

Pendekatan Memberi tahu bagaimana Memberi tahu apa

Fokus Urutan instruksi Hasil yang diinginkan

Contoh Bahasa C, C++, Java, Python SQL, HTML, React,

(imperative) Python (declarative)
Kelebihan Kontrol penuh, fleksibel Mudah dibaca, lebih
singkat
Kekurangan Lebih kompleks, rawan error Kurang kontrol pada
detail
Instalasi React JS
React JS di lokal

https://react.dev/learn/installation#try-react
Vite

Vite adalah Tools build modern yang lebih cepat dibandingkan

Create React App (CRA). Tool ini cocok untuk memulai proyek
React dengan cepat dan menawarkan waktu build yang lebih singkat
serta pengalaman pengembangan yang lebih mulus.
Installation – Vite

● Create project: npm create vite@latest.

○ Create project name.
○ Select react and javascript.
● Move to project directory: cd project.
● Install dependencies: npm install.
● Run project: npm run dev.

https://vite.dev/guide/
Struktur Folder
nama-proyek-anda/
├── node_modules/ # Dependensi proyek
├── public/ # File publik seperti favicon
├── src/ # Kode utama aplikasi
│ ├── App.css # Gaya untuk komponen App
│ ├── App.jsx # Komponen utama aplikasi
│ ├── main.jsx # Titik masuk aplikasi
│ └── index.css # Gaya global
├── .gitignore # File yang diabaikan oleh Git
├── index.html # File HTML utama
├── package.json # Informasi proyek dan dependensi
└── vite.config.js # Konfigurasi untuk Vite
Components
React JS
Component

Component dalam React adalah blok bangunan utama untuk

membangun antarmuka pengguna (user interface). Komponen
merupakan potongan kode yang bersifat modular, reusable, dan
independen.
Component - Functional

- Dibuat menggunakan fungsi JavaScript.

- Biasanya digunakan untuk UI yang stateless (tanpa state), tetapi
dengan adanya hooks, komponen ini juga dapat mengelola state.

function Greeting() {
return <h1>Hello, World!</h1>;
}

export default Greeting;

Component - Class
- Dibuat menggunakan kelas JavaScript yang mewarisi dari React.
Component
- Dapat mengelola state dan menggunakan lifecycle methods.

import React, { Component } from 'react';

class Greeting extends Component {

render() {
return <h1>Hello, World!</h1>;
}
}
export default Greeting;
Element vs Component

Element Component
Page: Home
Components: Navbar, Hero
Elements: Link, Heading, Button, Text, Image

Navbar Element:
● Image: <img />
● Link: <a>
● Input Search: <input />

Hero Element?
● Component
● Element
Membuat Components
Memakai Components
JSX
JSX
JSX (JavaScript XML) adalah ekstensi sintaksis untuk JavaScript
yang memungkinkan kita untuk menulis elemen HTML dalam kode
JavaScript. JSX membuat penulisan elemen UI di React lebih intuitif
dan mudah dipahami karena sintaksisnya mirip dengan HTML,
namun tetap berada dalam lingkungan JavaScript.
JSX
Ciri-ciri JSX
- Mirip HTML: JSX memungkinkan penulisan elemen yang mirip dengan
HTML.
- Dapat Menggunakan Ekspresi JavaScript: Anda dapat memasukkan
ekspresi JavaScript di dalam JSX dengan menggunakan tanda kurung
kurawal {}
- Atribut JSX: Dalam JSX, beberapa atribut seperti class diubah menjadi
className dan for diubah menjadi htmlFor untuk menghindari konflik dengan
kata kunci JavaScript.
- Harus Satu Elemen Root: JSX mengharuskan elemen yang dikembalikan
oleh komponen memiliki satu elemen root. Jika ingin menambahkan
beberapa elemen, Anda harus membungkusnya dalam satu elemen seperti
<div>
Contoh JSX
Props
Props

Props (singkatan dari properties) adalah mekanisme di React untuk

mengirimkan data dari component induk (parent) ke component
anak (child). Props memungkinkan Anda untuk membuat
component yang dinamis dan dapat digunakan kembali dengan
memodifikasi konten berdasarkan data yang diterima dari luar.
Contoh Penggunaan Props
Props
Studi Kasus

Let’s Code…
Referensi

https://react.dev/learn/describing-the-ui
https://vite.dev/guide/
https://nextjs.org/learn/react-foundations