Description

A. Pendahuluan
React JS adalah bagian dari pustaka javascript yang bersifat open source untuk membangun User Interface. UI yang mampu dibuat oleh React JS berbentuk interaktif, sehingga model desain yang digunakan biasanya simple untuk setiap state dalam aplikasinya. Declarative View yang ia miliki mampu membuat kode lebih mudah untuk diprediksi dan mudah di debug. React JS hanya mengurusi semua hal yang berkaitan dengan tampilan dan logika di sekitarnya. 

React JS dapat mendesain tampilan sederhana untuk setiap level dalam aplikasi, sehingga dapat digunakan untuk membuat dan mengembangkan pembuatan aplikasi berbasis web. Popularitasnya dapat diukur oleh aplikasi-aplikasi yang menggunakannya seperti Facebook, WhatsApp, Netflix, Instagram, Airbnb, American Express, Dropbox, Ebay, dan ratusan penyedia jasa pembuatan aplikasi berbasis web memanfaatkan kemampuan React JS.
Resmi dirilis pada tahun 2013, React JS dibuat oleh Jordan Walke. React JS ini telah menjadi salah satu pustaka UI terpenting dalam Javascript, dan telah digunakan oleh Facebook, Instagram, Netflix, Spotify, Medium hingga Twitter. React telah mengubah cara Anda membangun antarmuka UI, kebanyakan orang menyebut React JS sebuah framework. Secara teknis React JS bukanlah sebuah framework melainkan sebuah library yang digunakan untuk membuat UI.
Jordan Walke merupakan salah satu karyawan Facebook, prototipe React JS yang ia rilis pertama kali Fax JS yang terinspirasi dari XHP. Facebook menyadari bahwa aplikasi web milik mereka semakin kompleks, ada banyak bagian yang harus terus menerus di update seperti pada bagian news feed, chat list, chat box, dan lainnya secara realtime. Untuk memenuhi hal tersebut, sangat tidak memungkinkan untuk menggunakan JQuery yang masih tradisional karena memakan banyak biaya kedepannya. Memanipulasi DOM membutuhkan resource yang besar, sehingga React JS hadir untuk memberikan solusi berupa Virtual DOM yang menurut mereka lebih cepat.

B. Instalasi React JS
Langkah Pertama, pastikan versi NodeJS dan NPM memenuhi syarat yaitu Node ≥ 14.0.0 dan NPM >= 5.6. Untuk memeriksa versi NodeJS dan NPM yang terinstal bisa dengan cara menjalankan perintah berikut pada command prompt atau terminal:

node --version, npm --v, npx --v

Langkah Kedua, instal ReactJS dengan menjalankan perintah berikut pada commandprompt atau terminal:
npx create-react-app nama-project
Setelah proses instalasi selesai, bukalah folder ReactJS dengan menggunakan Code Editor, disini saya menggunakan VSCode.Kemudian buka terminal pada VSCode dan Jalankan perintah berikut untuk menjalankan project ReactJS:
npm start
Maka secara otomatis akan dibukakan tab baru di browser dan ReactJS siap digunakan.

C. Komponen dalam React
Komponen adalah bagian terpenting dari aplikasi React, karena aplikasi react sendiri terusun dari komponen-komponen.Secara konsep, komponen mirip dengan fungsi pada Javascript. Komponen menerima beberapa masukan (biasa disebut “props”) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil pada layar. Komponen mempermudah untuk memecah antarmuka pengguna menjadi bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap potongan dalam isolasi. Komponen di Reactjs ada beberapa macam, Ada yang disebut dengan stateful component dan stateless component. Ada juga function components dan class components. Ada Dumb Components dan Smart Components. Mengapa React membutuhkan komponen? Reactjs bekerja dengan Virtual DOM (Representasi JavaScript ringan dari Model Objek Dokumen). Dalam Virtual DOM ini kita harus membuat komponen untuk memberitahu React tentang apa saja yang harus ditampilkan (render) ke Real DOM (HTML). Karena itu, setiap komponen di React pasti akan menghasilkan HTML. Cara membuat komponen Pertama menggunakan fungsi, dan kedua menggunakan class. Komponen yang dibuat dengan fungsi disebut juga dengan function components dan yang menggunakan class disebut class components. Berikut ini cara membuat function components:

// membuat komponen dengan fungsi
function Header() {
return (
<div>
<h1>Tutorial Reactjs untuk Pemula</h1>
<h2>Panduan step-by-step belajar Reactjs</h2>
</div>
);
}
// render komponen ke RealDOM
ReactDOM.render(<Header />, document.getElementById("root"));

Selanjutnya menggunakan class :

// membuat komponen dengan class
class Header extends React.Component {
render(){
return (
<div>
<h1>Tutorial Reactjs untuk Pemula</h1>
<h2>Panduan step-by-step belajar Reactjs</h2>
<p>Membuat komponen dengan class</p>
</div>
);
}
}
// render komponen ke RealDOM
ReactDOM.render(<Header />, document.getElementById("root"));

Ada juga dalam React yaitu Konstruktor.
Konstruktor adalah fungsi atau method khusus pada class yang akan dieksekusi saat objek dibuat atau komponen digunakan.Konstruktor biasanya digunakan untuk melakukan inisialisasi komponen. Konstruktor hanya ada pada komponen yang dibuat dengan class. Dan yang terakhir adalah State dan Props State dan Props pada Komponen Reactjs State dan props adalah objek khusus yang menyimpan data untuk komponen.Kedua objek ini memiliki cara kerja yang berbeda. State adalah objek yang digunakan untuk menyimpan data di dalam komponen, sedangkan props adalah objek yang digunakan untuk menyimpan data yang diterima dari luar komponen.

D. Mengenal JSX di React
JSX merupakan singkatan dari JavaScript Syntax Extension atau dikenal juga dengan Javascript XML. JSX adalah ekstensi React untuk JavaScript. Sintaks JSX mirip seperti HTML, sehingga membuat kita lebih gampang menyusun elemen pada komponen React. Apa itu element react? Elemen React adalah bagian terkecil dari sebuah aplikasi. Elemen React akan menyusun sebuah komponen. Elemen ini biasanya akan ditampilkan atau di-render. JSX biasanya ditulis di dalam method render() pada class component dan pada statement return di function component.

Selain menulis di method render() dan return, kita juga bisa menulis JSX di dalam variabel. Biasanya JSX yang ditulis di dalam variabel akan sering digunakan ulang pada komponen.
Contoh :
// menggunakan class component
class Button extends Reac.Compontent {
render () {
<button>OK</button>
}
}
// elemen ini tidak ditampilkan, hanya disimpan dalam variabel
saja
const CancelButton = <button>Cancel</button>;
// menggunakan function component
function SignInButton(){
return <button>Login</button>
}
// function component dengan arrow function
const RegisterButton = (_) => <button>Register</button>;
Penulisan atribut di JSX sama seperti penulisan atribut di HTML biasa, hanya saja beberapa atribut harus ditulis dengan aturan JSX. Misalya seperti atribut class, pada pada JSX ditulis dengan className. const button = <button className="btn btn-default">OK</button>;
Mengapa harus pakai className?
class adalah kata kunci yang sudah ada di Javascript untuk membuat class. Sebenarnya bisa juga kita pakai atribut class saja di JSX, tapi nanti akan dapat warning. Karena itu, untuk menghindari ambigu.. disarankan pakai className saja.Lalu untuk atribut lainnya yang ditulis secara khusus adalah atribut event seperti onclick, onmouseover, dll.
E. Looping dan Conditional pada JSX
Ada kalanya kita perlu memanggil data maupun menuliskan syntax secara berulang dikarenakan kondisi tertentu. Di dalam javascript kita dapat menggunakan For Loop dan While Loop. Dan ketika kita ingin membuat sebuah statement pada kondisi tertentu kita dapat menggunakan If Else. Namun, ada sedikit perbedaan pada React JS karena pada JSX kita hanya dapat menambahkan Ekspresi dan bukan Statement.
Cara lama :

import React from "react";
function Apple(props) {
return (
<div>
<h2>{props.name}h2>
<p><s>Rp.{parseInt(props.price)}s>
({parseInt(props.discount)}%)p>
<b>Rp.{parseInt(props.price)-
parseInt(props.price)*(parseInt(props.discount)/100)}b>
<hr/>
div>
)
}
function Main() {
return (
<div>
<Apple name="iPhone X" price="10000000" discount="30"/>
<Apple name="iPhone 11" price="13000000" discount="25"/>
<Apple name="iPhone 12" price="17000000" discount="15"/>
<Apple name="iPhone 13" price="22000000" discount="10"/>
div>
)
}
export default Main

Cara baru menggunakan method map() :
c import React from "react";
function Apple(props) {
return (
<div>
<h2>{props.name}h2>
<p><s>Rp.{parseInt(props.price)}s>
({parseInt(props.discount)}%)p>
<b>Rp.{parseInt(props.price)-
parseInt(props.price)*parseInt(props.discount)/100}b>
<hr/>
div>
)
}
const phoneList = [
{name: "iPhone X", price: "10000000", discount: "30"},
{name: "iPhone 11", price: "13000000", discount: "25"},
{name: "iPhone 12", price: "17000000", discount: "15"},
{name: "iPhone 13", price: "22000000", discount: "10"}
]
function Main() {
return (
<div>
{phoneList.map((phone, id) => (
<Apple name={phone.name} price={phone.price}
discount={phone.discount}/>
))}
div>
)
}
export default Main

Beda halnya dengan Looping Statement, kita tetap dapat menggunakan Conditional Statement di JSX namun dengan cara yang sedikit berbeda. Ada 2 cara untuk melakukannya yaitu dengan Inline If dan Inline If Else Inline IF

import React from "react";
function Pesan(props) {
return (
<div>
<h2>Hai {props.name}h2>
{parseInt(props.messages) > 0 &&
<p>Kamu punya <b>{props.messages}b> pesan belum
dibaca.p>
}
<hr/>
div>
)
}
function Main() {
return (
<div>
<Pesan name="Bima" messages="5"/>
<Pesan name="Hidayat" messages="0"/>
div>
)
}
export default Main
Inline IF else
import React from "react";
function Pesan(props) {
return (
<div>
<h2>Hai {props.name}h2>
{parseInt(props.messages) > 0 ?
<p>Kamu punya <b>{props.messages}b> pesan belum
dibaca.p>
:
<p>Tidak ada pesan diterima.p>
}
<hr/>
div>
)
}
function Main() {
return (
<div>
<Pesan name="Bima" messages="5"/>
<Pesan name="Hidayat" messages="0"/>
div>
)
}
export default Main
F. Fetch data dengan API di ReactJS
RESTful API / REST API merupakan implementasi dari API (Application Programming Interface). REST (Representional State Transfer) adalah suatu arsitektur metode komunikasi yang menggunakan protokol HTTP untuk pertukaran data dan metode ini sering diterapkan dalam pengembangan aplikasi. Dimana tujuannya adalah untuk menjadikan sistem yang memiliki performa yang baik, cepat dan mudah untuk di kembangkan (scale) terutama dalam pertukaran dan komunikasi data. ReactJS juga dibekali dengan beberapa method yang memungkinkan untuk melakukan komunikasi dengan REST API seperti GET, POST, PUT, dan DELETE. Fetch adalah istilah yang digunakan ketika kita hendak mengambil data (GET) pada API. Salah satu jenis REST API adalah Public API. Sesuai namanya, Public API adalah jenis API yang boleh digunakan oleh siapa saja di berbagai platform. Public API juga sering disebut sebagai Open API, dan merupakan yang paling sering digunakan. Sebagai contoh, kita akan menggunakan Data Dummy (Data Tidak Nyata / Data Percobaan) pada link https://jsonplaceholder.typicode.com/users yang berisi 10 baris.
import React, { Component } from "react";
class Main extends Component {
constructor(props) {
super(props);
this.state = {
items: []
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((json) => {
this.setState({
items: json
});
})
}
render() {
const { items } = this.state;
return (
<div>
<h1> Data Pengguna h1>
<table border='1'>
<tr>
<th>Usernameth>
<th>Namath>
<th>Emailth>
tr>
{ items.map((item) => (
<tr key = { item.id }>
<td>{ item.username }td>
<td>{ item.name }td>
<td>{ item.email }td>
tr>
))}
table>
div>
);
}
}
export default Main