Praktikum Pemrograman Framework
Axios + React
Muhammad Mahrus Zain
Politkenik Caltex Riau / mahrus@[Link]
Komponen, Props dan State
Didalam react state memiliki 3 bagian penting yaitu komponen, props dan state.
a. React is all about components. Component adalah bagian-bagian kecil dari suatu
aplikasi. Komponen-komponen ini nantinya diracik menjadi sebuah aplikasi.
Sebagai tukang racik yang budiman anda harus paham bahwa ada 2 unsur
penting dalam component yaitu UI (User Interface) & Data, rumusnya
b. Prop singkatan dari Property. Ini cukup simple, apalagi jika anda sudah terbiasa
dengan HTML, ini mirip seperti atrribute pada tag HTML. Dalam pembuatannya,
jika dalam functional component maka prop ini adalah parameternya. Jika
componentnya dalam bentuk class maka prop ini property dari class nya yang di
akses melalui keyword ‘this’.
i. Functional Komponen Props
1
ii. Class Komponen Props
c. State adalah data private sebuah component. Data ini hanya tersedia untuk
component tersebut dan tidak bisa di akses dari component lain. Component
dapat merubah state nya sendiri. Supaya lebih jelas mari kita lihat implementasi
pada component counter.
2
Perubahan data pada props dan state akan merender ulang component.
3
1. Gunakan props untuk komunikasi data antar komponent ( parent to child component )
2. Gunakan state untuk komunikasi data internal, hanya dalam component itu sendiri
3. props dan state bisa memiliki default value
Tipe Komponen
Ada 2 jenis tipe dari komponen pada react js yaitu stateless dan statefull komponen.
1. Stateless Component — tidak memiliki state hanya prop. Umumnya component ini di buat
dengan function karena codenya lebih ringkas
4
2. Statefull Component — memiliki state & props. Component ini dibuat dengan class.
Kelebihan dari class component adalah memiliki lifecycle
5
Komponen Lifecycle
Component life cycle adalah tahap berurutan dari kondisi component ketika digunakan. Di tiap
kondisi, kita bisa melakukan macam-macam hal seperti memanggil data dari server (ajax),
memanipulasi data, validasi, etc. Tahapnya sendiri dikelompokkan menjadi dua yaitu initial phase
dan update phase Perhatikan gambar berikut :
6
initial phase yaitu tahap ketika component baru pertama kali di panggil. Tahap-tahapnya :
1. getDefaultProps() dan getInitialState() : tahap ketika data props dan data state di
deklarasikan. khusus untuk ES6, tahap ini dijalankan di constructor function.
2. componentWillMount() : tahap sebelum component di render.
3. componentDidMount() : tahap setelah component di render. pada tahap ini proses
pemanggilan ajax dan perubahan isi state setelah proses ajax di panggil.
update phase yaitu tahap ketika component mengalami perubahan “model” data.
Tahap-tahapnya :
1. componentWillReceiveProps() : tahap ketika terjadi perubahan pada props sebelum
component di render.
2. shouldComponentUpdate() : tahap untuk menentukan apakah perubahan akan di
tampilkan atau tidak. isinya di set true atau false.
3. componentWillUpdate() : tahap sebelum component di render.
4. componentDidUpdate() : tahap setelah component di render.
7
Pengenalan Axios
Axios adalah sebuah library open source yang saat ini paling booming untuk melakukan request
HTTP karena memiliki banyak kelebihan namun dengan penggunaan yang tidak lebih sulit
dibanding yang lain.
Axios : axios merupakan salah satu framework atau library yang paling sering digunakan untuk
melakukan proses http client server atau pengambilan/pengiriman data dari client ke back end
atau server. Karena didalam react belum include axios oleh karena itu harus kita lakukan instalasi
node package manager terlebih dulu dengan memasukkan perintah npm install axios --save.
8
Get Data React + Axios
React+Axios : kita akan menampilkan data dengan react dan axios dari
back/end yang sudah kita buat sebelumnya menggunakan codeigniter
(modul 7). Pastikan proses CRUD pada backend yang sudah kita coba
menggunakan postman berjalan dengan baik. Untuk menghindari error
access allow origin pada saat get data tambahkan coding pada line 12 dan
13 pada gambar di bawah ini didalam project codeigniter didalam folder
app/controller/[Link]. Coding ini berguna untuk mengizinkan akses
seluruh method dan seluruh ip yang mengakses dapat mengakses data
melalui frontend.
● Data user akan kita tampilkan dalam content oleh karena itu silahkan buka file [Link]
yang ada pada folder src/component/[Link]. Kemudian masukkan coding dibawah
ini
9
● Simpan file [Link] seharusnya data akan muncul seperti pada gambar dibawah ini.
10
React + Bootstrap (reactstrp)
Untuk tampilan ui/ux lebih menarik kita akan gunakan bootstrap sebagai library tambahan.
Reactstrap merupakan sebuah library bootstrap yang dibangun untuk React. Reactstrap
menyediakan beberapa component yang bisa kita gunakan langsung pada react.
Instalasi Reactstrap
Untuk melakukan instalasi reactstrap silahkan ketikkan perintah
1. npm install --save bootstrap
2. npm i nstall --save reactstrap react react-dom
(pastikan sudah masuk ke dalam directory projek masing-masing). Kita akan menggunakan npm
untuk mendownload library react strap jadi nanti file reactstrap yang kita download akan
tersimpan di dalam folder node_modules.
11
Cara penggunaan komponen reactstrap pada react bisa di lihat pada
[Link] Kita akan coba implementasikan navbar pada
komponen [Link] yang sudah kita buat.
1. Tambahkan import 'bootstrap/dist/css/[Link]'; pada file src/[Link]
2. Tambahkan Coding dibawah ini
import React, { useState } from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
NavbarText,
} from "reactstrap";
const Header = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
12
return (
<div>
"light" light expand=
<Navbar color= "md">
<NavbarBrand href="/">Framework SI</NavbarBrand>
{toggle} />
<NavbarToggler onClick=
{isOpen} navbar>
<Collapse isOpen=
"mr-auto" navbar>
<Nav className=
<NavItem>
"/components/">Beranda</NavLink>
<NavLink href=
</NavItem>
<NavItem>
"[Link]
<NavLink href=
GitHub
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Profile
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>SI A</DropdownItem>
<DropdownItem>SI B</DropdownItem>
<DropdownItem>SI C</DropdownItem>
<DropdownItem divider />
13
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<NavbarText>Logout</NavbarText>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
3. Laporkan analisa coding di atas
Selanjutnya kita akan menggunakan tabel react-strap untuk menampilkan data user dari back
end . Silahkan tambahkan coding di bawah ini.
import React, { Component } from "react";
import axios from "axios";
import { Table, Badge } from "reactstrap";
export default class Content extends Component {
state = {
users: [],
};
componentDidMount() {
14
axios
.get("[Link]
.then((res) => {
const users = res.data;
console.log(res);
this.setState({ users });
});
}
render() {
return (
<div>
<Table hover>
<thead>
<tr>
<th>#</th>
<th>Nama</th>
<th>Prodi</th>
<th>Email</th>
<th>Password</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
15
{this.state.users.map((user) => (
<tr>
<th scope="row">1</th>
<td> {user.nama}</td>
<td> {user.prodi}</td>
<td> {user.email}</td>
<td> {user.password}</td>
<td>
<Badge href="#" color="warning">
<svg
"1em"
width=
height="1em"
viewBox="0 0 16 16"
"bi bi-pencil-square"
class=
fill="currentColor"
"[Link]
xmlns=
>
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459
3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0
0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0
.196-.12l6.813-6.814z" />
<path
fill-rule="evenodd"
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0
1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1
.5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
16
/>
</svg>
</Badge>
<Badge href="#" color="danger">
<svg
"1em"
width=
height="1em"
viewBox="0 0 16 16"
"bi bi-trash-fill"
class=
"currentColor"
fill=
"[Link]
xmlns=
>
<path
fill-rule="evenodd"
d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2
0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3
4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0
1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"
/>
</svg>
</Badge>
</td>
</tr>
))}
</tbody>
17
</Table>
{/* <ul>
{[Link]((user) => (
<li>
Nama : {[Link]}
<br />
Prodi : {[Link]}
<br />
email : {[Link]}
<br />
</li>
))}
</ul> */}
</div>
);
}
18
Tugas
Silahkan buat function delete untuk menghapus. Jadi ketika button delete di tekan dia akan
mengakses function delete dan function deletenya akan mengakses backend untuk menghapus
data.
19