ReactJS

1
Agenda

2
Agenda

● Pengenalan
● Apa itu React?
● Instalasi
● Perbedaan menggunakan React
● Struktur Folder
● Alur Aplikasi React
● Component
● Styling
● Load Image

3
Pengenalan

4
Pengenalan

Sebelum kita mengenal React. Ada beberapa yang perlu kita ketahui agar mudah memahami tentang React.
Mulai dari memahami tentang Library, Framework fungsi dari keduanya.

5
Library

Library merupakan kumpulan kode atau script program yang berisi variabel, konstanta, tipe data, object, dan fungsi-
fungsi yang ditulis sebelumnya oleh para pencipta library tersebut

NOTE : Kita harus olah lagi sendiri

6
Framework

Framework adalah sebuah kerangka program yang digunakan untuk membantu developer untuk mengembangkan
kode secara konsisten.

NOTE : Kita tinggal pakai

7
Kegunaan Library dan Framework?

● Program Menjadi Lebih Terstruktur dan Tersusun

● Praktis untuk Developer
● Memiliki Keamanan yang Lebih Unggul

8
Apa itu React?

9
Apa itu React?

Kalo kita kunjungi website official dari ReactJS. Dihalaman utama kita bisa menemukan semacam slogan atau apa lah
hehehe. Disana tertulis

“A JavaScript library for building user interfaces”

10
Yang artinya adalah “Sebuah library Javascript untuk membuat User Interface”. Maksudnya adalah sebuah library
Javascript untuk membuat Frontend Website sebagai media interaksi antara website dengan user.

11
Declarative

Declarative : Deklaratif disini maksudnya adalah membuat kode lebih mudah untuk memprediksi dari segi kesalahan
atau debug. Dan React akan secara efisien memperbarui dan merender komponen yang tepat saat data berubah.

12
Component-Based

Component-Based : Artinya adalah setiap bagian dari website yang dibangun dengan React, nanti akan dibagi-bagi
menjadi dalam bentuk Component. Misal component navigation, banner, main, footer dll.

13
Learn Once, Write Anywhere

Learn Once, Write Anywhere : Dalam bahasa indonesia berarti “Belajar sekali dan code dimana saja”. Maksudnya
adalah dengan menggunakan React kita bisa membuat aplikasi berbasis Website dan juga berbasis Mobile
menggunakan React Native

14
Instalasi

15
create-react-app

Untuk instalasi awal kita bisa menggunakan NPM dengan perintah :

npm install -g create-react-app

16
Check Version

Untuk mengecek berapa versi react yang dikomputer kita, kita bisa menuliskan perintah :
npm view react version

17
New Project

Untuk membuat project React baru, kita bisa menuliskan perintah :

create-react-app <nama-aplikasi>

18
Using Vite

npm create vite@latest

19
Perbedaan menggunakan React

20
Tanpa React

Untuk contohnya disini dengan membuat sebuah Card yang merupakan item-item postingan dari sebuah website.

21
22
23
Dengan React

24
Struktur Folder

25
26
Alur Aplikasi React

27
28
Component : Basic

29
Component

Seperti yang saya jelaskan awal-awal artikel ini, bahwa React itu menganut Component-Based. Yang artinya setiap
bagian dari website yang dibangun dengan React, nanti akan dibagi-bagi menjadi dalam bentuk Component. Misal
component navigation, banner, main, footer dll.

30
31
Intinya adalah dalam membangun aplikasi
menggunakan React, kita membuat Component
dan menyusunnya seperti menyusun Puzzle.
Ketika kita akan membuat Home page, kita harus
menyusunnya dengan beberapa component yaitu,
navbar, banner, main dan footer.

32
Functional Component

Singkatnya functional component adalah component yang dibuat dengan function. Bisa dibuat dengan keyword
function() atau pembuatan function dengan arrow function

33
34
35
36
Class component

Class component adalah component yang dibuat menggunakan Class.

37
38
39
Styling

40
Styling

● Inline Style
● External Style
● SASS
● Styled Component
● Bootstrap

41
Inline

42
Inline with Object

43
External

44
SASS

npm install --save node-sass

45
Styled Component

npm install --save styled-components

46
Bootstrap

npm install bootstrap

47
Bootstrap

// index.js
import ‘bootstrap/dist/css/bootstrap.min.css’

48
Load Image

49
Load Image

import Gambar from 'gambar.png'

// html
<img src={Gambar} alt=”Gambar” />

50
atau

<img src={require(‘./images/hello.jpg’)} alt=”Gambar” />

51
Thankyou
Andar Pratama

52