Description

Pengantar ReactJS

ReactJS adalah pustaka JavaScript open source untuk membangun antarmuka pengguna (UI) interaktif. ReactJS menawarkan desain sederhana untuk setiap keadaan aplikasi, memudahkan prediksi dan debug kode. ReactJS menangani tampilan dan logika UI, cocok untuk pengembangan aplikasi web.

Sejarah Singkat ReactJS

ReactJS dirilis pada tahun 2013 oleh Jordan Walke dari Facebook. ReactJS telah menjadi pustaka UI paling penting dalam JavaScript dan diadopsi oleh banyak perusahaan besar. ReactJS mengubah paradigma pembangunan UI. Meskipun sering disebut framework, ReactJS secara teknis adalah pustaka untuk membangun UI.

Instalasi React JS

1. Pastikan Node.js terinstal di perangkat Anda. Anda dapat mengunduhnya dari https://nodejs.org/en.
2. Verifikasi instalasi Node.js dengan membuka terminal dan mengetikkan perintah “node -v”.
3. Instal Create React App secara global dengan perintah “npm install -g create-react-app”.
4. Buat project baru dengan mengetikkan perintah “create-react-app nama-project”.
5. Jalankan project dengan perintah berikut “npm start”.
6. Buka browser dan kunjungi alamat http://localhost:3000. Maka secara otomatis akan dibukakan tab baru di browser dan ReactJS siap digunakan.

• Mengenal Komponen React
  • Komponen mirip dengan fungsi pada JavaScript, menerima properti (props) dan mengembalikan elemen React untuk ditampilkan di layar.

Komponen adalah elemen utama dalam ReactJS.

• Penggunaan komponen membantu membagi UI menjadi bagian-bagian yang dapat digunakan kembali dan memungkinkan pengembangan terisolasi.
• Ada dua jenis komponen: stateful dan stateless, function dan class, serta dumb dan smart.

React menggunakan Virtual DOM, representasi JavaScript dari DOM.

• Komponen memberi tahu React tentang apa yang harus dirender ke Real DOM (HTML).
• Setiap komponen React menghasilkan HTML.

Komponen dapat dibuat dengan fungsi atau class.

• Function component lebih sederhana dan hanya mengembalikan elemen React.
• Class component lebih kompleks dan memiliki state dan lifecycle methods.

Contoh:

• Function component: function Belajar() { return <h1>Hello World! Ayo Belajar ReactJS</h1>; }
• Class component: class Belajar extends Component { render() { return <h1>Belajar ReactJS Bersama <i>”Bisa AI Academy”</i></h1>; } }

Komponen adalah landasan pengembangan aplikasi ReactJS. Memahami cara kerja dan jenis-jenis komponen sangat penting untuk membangun UI yang kompleks dan dapat digunakan kembali.

• State dan Props di React

Dasar - Dasar ReactJS: State dan Props di React

Pengenalan State dan Props

State dan props adalah dua objek penting dalam ReactJS untuk mengelola data dalam komponen.

• Props: Menyimpan data eksternal yang diterima dari luar komponen dan bersifat read-only.
• State: Menyimpan data internal yang dapat diubah-ubah.

Cara Kerja State

State didefinisikan dalam konstruktor class component. Nilainya dapat diubah dan memicu render ulang component.

Contoh State:

Sebuah component menampilkan judul dan subjudul. State digunakan untuk menyimpan nilai judul dan subjudul, dan dapat diubah untuk menampilkan konten yang berbeda.

Cara Kerja Props

Props digunakan untuk meneruskan data dari component parent ke component child.

Contoh Props:

Sebuah component "Message" menerima props "nama" dan "pesan" dari component parent. Props ini digunakan untuk menampilkan nama dan pesan pengirim.

Kesimpulan

State dan props membantu dalam membangun UI yang interaktif dan dinamis. State digunakan untuk data internal yang berubah-ubah, sedangkan props digunakan untuk data eksternal yang statis.

• Mengenal JSX di React

JSX (JavaScript Syntax Extension) adalah ekstensi React untuk JavaScript yang mirip dengan HTML. JSX memudahkan penulisan elemen React dan meningkatkan keterbacaan kode.

Aturan Penulisan JSX:

• Elemen tunggal atau dibungkus elemen induk seperti <div>.
• Ekspresi JavaScript dalam kurung kurawal { ... }.
• Ditulis di render() class component dan return function component.

Manfaat JSX:

• Memperjelas dan mempermudah pembuatan komponen.
• Menggabungkan JavaScript dan HTML dalam satu sintaks.
• Meningkatkan keterbacaan dan maintainability kode.

Contoh: 

import React from "react";

function Main() {

 var text = "Contoh Variabel";

 return (

    <div>

      <h1>{20 * 5}</h1>

      <h2>{text}</h2>

    </div>

 );

}

export default Main;

JSX adalah alat penting dalam ReactJS untuk membangun UI yang kompleks dengan mudah dan efisien.

Dasar - Dasar ReactJS: Looping dan Conditional pada JSX

Looping:

• Gunakan method map() pada array untuk looping dalam JSX.
• Lebih ringkas dan efisien dibandingkan cara lama.

Conditional:

• Gunakan inline if (&&) dan inline if else (? :) dalam JSX.
• Memudahkan penulisan statement conditional dalam JSX.

Looping dan conditional statement dalam JSX memungkinkan pembuatan UI yang dinamis dan interaktif dalam aplikasi React JS.

Fetch Data API dengan ReactJS

RESTful API (Representational State Transfer) merupakan implementasi dari API yang menggunakan protokol HTTP untuk pertukaran data. ReactJS menyediakan beberapa method untuk berkomunikasi dengan REST API seperti GET, POST, PUT, dan DELETE.

Fetch Public API

Fetch adalah istilah yang digunakan ketika kita hendak mengambil data (GET) dari API. Public API atau Open API adalah jenis API yang boleh digunakan oleh siapa saja di berbagai platform.