Learn Basic React JS
Tags: webdev, react, programming, tutorial
Published: 2024-03-23 03:44:31


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0v7ariggid1smau2dvj.png)

---

## Apa itu React?
React adalah Library/Framework javascript untuk membangun User Interface dan itu dibuat oleh Facebook
Website/UI dilihat dari segi komponennya
React saat ini merupakan kerangka kerja frontend utama yang paling populer

## Kenapa React?
React memungkinkan kita untuk membangun website dan UI yang dinamis dan interaktif
Sangat cepat, terutama dengan kompiler terbaru
Ada ekosistem yang juga sangat besar seperti NextJS dan React Native
Framework terbaik untuk dipelajari hingga mendapatkan pekerjaan

---

## Apa itu Component?
Potongan kode yang dapat digunakan kembali untuk membangun elemen pada halaman lain
Memungkinkan developer untuk memecah UI yang kompleks, sehingga lebih mudah dipelihara dan di skala kan lebih kecil lagi yang disebut komposisi
Component dapat meneruskan Props dan dapat menyimpan State nya sendiri

## Apa itu State?
State mewakili data yang dikelola komponen secara internal
Ini bisa seperti Input Data, Fetch Data, Data terkait UI seperti jika suatu model terbuka/tertutup
Ada juga keadaan Global yang berhubungan dengan apliaksi secara keseluruhan, bukan hanya satu komponen saja, itu disebutnya Global State (Getter and Setter) dan meneruskannya ke Child Component
Management state bisa menggunakan Redux or Zustand

## Apa itu Hooks?
Memungkinkan kita untuk menggunakan State dan fitur React lainnya dalam Functional Component, contohnya:
useState()
useEffect()
useRef()
useReducer()
useContext()
useMemo()
useCallback()

## Apa itu JSX
Sederhanya adalah Sintaks HTML yang di dalamnya ada sintaks Javascript (JSX - javascript Syntax Extension)
Syntax JSX inilah yang akan membuat dynamic dalam HTML, seperti Looping, Conditional, dll

## Apa itu SPA, CSR, SSR dan SSG
SPA (Single Page Application) - Yaitu membuat satu file HTML dan Javascipt, UI, Route dalam satu Halaman Web dengan dinamis, contoh Gmail, Facebook dll

CSR (Client Side Rendering) - Yaitu pendekatan dimana semua proses rendering dilakukan di sisi client, yaitu di peramban web pengguna. ketika mengunjungi situs web, server mengirim dokumen HTML kosong dan kemudian client menggunakan javascript untuk mengambil data, merender data konten di peramban, Ini sering digunakan dalam aplikasi SPA. Kelemahan CSR lambat dalam load di awal dan SEO.

SSR (Server Side Rendering) - Yaitu pendekatan dimana proses rendering dilakukan di sisi server sebelum konten dikirim ke peramban pengguna. Server akan merender halaman web sepenuhnya dan mengirim HTML yang siap digunakan langsung ke peramban pengguna. Ini dapat meningkatkan kinerja dan SEO, karna konten sudah tersedia saat glama pertama kali dimuat. Contoh platform SSR adalah Next JS dan Remix JS. Kelemahan SSR adalah harus config Server dan juga Deployment Apps harus paham.

SSG (Static Side Generation) - Yaitu pendekanatan dimana konten halaman web dibuat menjadi file HTML statis selama waktu kompilasi, biasanya pada tahap pembangunan situs web. Ini berarti bahwa saat pengguna mengakses web, server hanya perlu mengirimkan file HTML yang sudah jadi tanpa perlu melakukan rendering pada waktu permintaan. Hal ini dapat menghasilkan situs web yang lebih cepat dan aman karna tidak memerlukan server untuk mengaksesnya, contoh platform SSG adalah Next JS dan Gatsby JS. Kelemahan SSG yaitu Static nya, karna tidak dinamis dan harus di build ulang.

## Apa itu Vite?
Vite adalah Toolkit Frontend super cepat yang dapat digunakan disemua project Javascript termasuk React
Vite dibangun diatas ES Build, yang merupakan JS Bundler yang sangat cepat
Development server yang sangat cepat dengan Hot-Reload
Install with NPM : npm create vite@latest