Pada tutorial ini Anda akan belajar tentang React JS.
Mulai dari apa itu react, kenapa menggunakan react, create-react-app, components, click events, useState Hook, looping lists, props, useEffect Hook, React Router, JSON Server, hingga CRUD (Create-Read-Update-Delete).
Step-by-Step.
Mari kita mulai.
#1. Apa Itu React JS
React adalah library javascript untuk membangun user interface (UI) suatu aplikasi atau website.
React berjalan di sisi client sebagai Single Page Application (SPA).
React seringkali dibandingkan dengan front-end javascript framework seperti Angular dan Vue JS.
Kenapa menggunakan React JS.?
- React Sangat Cepat dan Ringan.
- React juga sangat populer dan di maintained oleh facebook
- Menggunakan JSX Syntax
- Menggunakan Virtual DOM (Document Object Model)
Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI
Order Sekarang.!
#2. Create React App
Untuk membuat project react js, dapat dilakukan dengan banyak cara. Akan tetapi cara yang paling mudah adalah “create react app”.
Untuk dapat menjalankan perintah “create-react-app”, Anda hanya perlu menginstall node.js di komputer Anda.
Anda mendownload node.js pada link berikut dan install di komputer Anda:
Setelah node.js terinstall di komputer Anda, buka Command Promt atau terminal kemudian ketikkan perintah berikut untuk memastikan node.js terinstall dengan baik di komputer Anda:
node -v
Kemudian ketikan perintah berikut untuk memastikan NPM (Node Package Manager) juga terinstall dengan baik:
npm -v
Perhatikan gambar berikut untuk lebih jelasnya:
Setelah node.js dan npm terinstall dengan baik di komputer Anda, buat project react baru dengan mengetikan perintah berikut pada command promt atau terminal:
npx create-react-app my-react-app
Seperti gambar berikut:
Perintah diatas akan membuat project react baru bernama “my-react-app”.
Seperti yang terlihat pada gambar diatas, saya membuat project react di dalam folder “Tutorials” yang terdapat di “Documents”.
Jika belum memiliki folder tersebut, silahkan buat terlebih dahulu, kemudian cd (change directory) ke folder tersebut seperti gambar diatas.
Jika installasi selesai, cd ke folder “my-react-app”.
Seperti gambar berikut:
Kemudian buka project react menggunakan code editor, di sini saya menggunakan Visual Studio Code.
Saya juga menyarankan Anda menggunakan Visual Studio Code.
Anda hanya perlu mengetikkan perintah berikut untuk membuka project “my-react-app” menggunakan Visual Studio Code:
code .
Setelah project ter-open menggunakan Visual Studio Code, buka terminal pada VS Code, kemudian ketikan perintah berikut pada terminal untuk menjalankan project:
npm start
Jika berjalan dengan baik, maka akan tampil seperti gambar berikut:
Kemudian buka browser Anda dan kunjungi URL berikut:
http://localhost:3000
Maka akan tampil seperti berikut:
#3. Struktur Folder
Jika Anda perhatikan lebih detail, maka Anda akan mendapatkan struktur folder seperti berikut:
Pada gambar diatas, terdapat 3 folder yaitu: folder node_modules, public, dan src.
Folder node_modules berisi semua modul yang dibutuhkan dalam pembuatan project.
Folder public berisi file index.html, favicon.ico, dan beberapa file lainnya.
File index.html merepresentasikan Single Page Application (SPA).
Folder src berisi file App.css, App.js, App.test.js, index.css, index.js, logo.svg, reportWebVitals.js, dan setupTests.js.
Yang penting untuk Anda ketahui adalah file App.js dan index.js.
File App.js adalah file root component dari react app, sedangkan file index.js adalah entry point dari aplikasi kita.
Selanjutnya lakukan sedikit clean up. Hapus file App.css, App.test.js, index.css, logo.svg, reportWebVitals.js, dan setupTests.js.
Sehingga yang tersisa hanya file App.js dan index.js.
Seperti gambar berikut:
Kemudian buka file App.js, ubah kodenya menjadi seperti berikut:
function App() {
return (
<div>
<h2>Hello World</h2>
</div>
);
}
export default App;
Setelah itu buka file index.js, ubah kodenya menjadi seperti berikut:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Kembali ke browser, jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:
#4. Components
Salah satu konsep penting yang perlu Anda ketahui pada React JS yaitu components.
React adalah Single Page Application (SPA) yang memiliki multiple components.
Sebagai contoh, buat sebuah folder components di dalam folder src.
Kemudian buat sebuah file components bernama “Header.js” di dalam folder tersebut.
Perhatikan gambar berikut untuk lebih jelasnya:
Kemudian ketikkan kode berikut pada file components “Header.js”:
const Header = () => {
return (
<div>
<h2>Ini Adalah Components Header</h2>
</div>
)
}
export default Header
Selanjutnya buka file “App.js”, kemudian ubah kodenya menjadi seperti berikut:
import Header from "./components/Header";
function App() {
return (
<div>
<Header />
</div>
);
}
export default App;
Kembali ke browser, jika berjalan dengan baik, maka akan terlihat seperti berikut:
#5. Click Events
Kita bisa memanggil methods menggunakan events click.
Sebagai contoh, ubah kode “App.js” menjadi seperti berikut:
import Header from "./components/Header";
function App() {
const clickMe = () => {
console.log('Clicked');
}
return (
<div>
<Header />
<button onClick={ clickMe }>Click Me</button>
</div>
);
}
export default App;
Kembali ke browser, inspeksi elemen => console => kemudian click tombol “Click Me”.
Jika berjalan dengan baik, maka akan akan terlihat seperti gambar berikut:
Selain itu, kita juga bisa mengirimkan parameter.
Sebagai contoh, ubah kode “App.js” menjadi seperti berikut:
import Header from "./components/Header";
function App() {
const clickMe = (name) => {
console.log('Hello: '+ name);
}
return (
<div>
<Header />
<button onClick={ () => clickMe('Fikri') }>Click Me</button>
</div>
);
}
export default App;
Kembali ke browser, kemudian click tombol “Click Me”.
Jika berjalan dengan baik, maka akan akan terlihat seperti gambar berikut:
#6. useState Hook
UseState hook memungkinkan kita untuk mendefinisikan suatu state, mendefinisikan initial value pada state, serta mengupdate value suatu state.
Sebagai contoh, ubah kode “App.js” menjadi seperti berikut:
import { useState } from "react"
function App() {
const [title, setTitle] = useState("Hello World");
const changeTitle = () => {
setTitle("Title Changed");
}
return (
<div>
<h1>{ title }</h1>
<button onClick={ changeTitle }>Change Title</button>
</div>
);
}
export default App;
Kembali ke browser, maka akan akan terlihat seperti gambar berikut:
Klik tombol “Change Title”, maka titlenya akan berubah seperti berikut:
#7. Looping Lists
Kita dapat mengoutput list data pada react dengan memanfaatkan fungsi map pada javascript.
Sebagai contoh, ubah kode “App.js” menjadi seperti berikut:
import { useState } from "react"
function App() {
const [products, setProducts] = useState([
{id: 1, title: 'Product 1', price: 899},
{id: 2, title: 'Product 2', price: 982},
{id: 3, title: 'Product 3', price: 322},
{id: 4, title: 'Product 4', price: 763},
{id: 5, title: 'Product 5', price: 389}
]);
return (
<div>
<ul>
{products.map((product) => (
<li key={ product.id }> { product.title } - { product.price } </li>
))}
</ul>
</div>
);
}
export default App;
Kembali ke browser, maka akan akan terlihat seperti gambar berikut:
#8. Props
Props merupakan salah satu cara untuk mengirimkan data dari komponen induk (Parent Components) ke komponen anak (Child Components).
Sebagai contoh, buat sebuah file components bernama “ProductList.js” di dalam folder “src/components”.
Kemudian ketikan kode berikut:
const ProductList = ({ products }) => {
return (
<div>
<ul>
{products.map((product) => (
<li key={ product.id }> { product.title } - { product.price } </li>
))}
</ul>
</div>
)
}
export default ProductList
Setelah itu, ubah kode “App.js” menjadi seperti berikut:
import { useState } from "react"
import ProductList from "./components/ProductList";
function App() {
const [products, setProducts] = useState([
{id: 1, title: 'Product 1', price: 899},
{id: 2, title: 'Product 2', price: 982},
{id: 3, title: 'Product 3', price: 322},
{id: 4, title: 'Product 4', price: 763},
{id: 5, title: 'Product 5', price: 389}
]);
return (
<div>
<ProductList products={ products } />
</div>
);
}
export default App;
Kembali ke browser, jika berjalan dengan baik, maka masih tampil seperti sebelumnya.
Selain itu, kita juga bisa menggunakan props sebagai function untuk mengirimkan data dari komponen anak (Child Components) ke komponen induk (Parent Components).
Untuk lebih jelasnya, ubah kode pada komponen “ProductList.js” menjadi seperti berikut:
const ProductList = ({ products, deleteProduct }) => {
return (
<div>
<ul>
{products.map((product) => (
<li key={ product.id }> { product.title } - { product.price }
<button onClick={ () => deleteProduct(product.id) }>Delete</button>
</li>
))}
</ul>
</div>
)
}
export default ProductList
Kemudian ubah kode “App.js” menjadi seperti berikut:
import { useState } from "react"
import ProductList from "./components/ProductList";
function App() {
const [products, setProducts] = useState([
{id: 1, title: 'Product 1', price: 899},
{id: 2, title: 'Product 2', price: 982},
{id: 3, title: 'Product 3', price: 322},
{id: 4, title: 'Product 4', price: 763},
{id: 5, title: 'Product 5', price: 389}
]);
const deleteProduct = (productId) => {
const newProducts = products.filter(product => product.id !== productId);
setProducts(newProducts);
}
return (
<div>
<ProductList products={ products } deleteProduct={ deleteProduct } />
</div>
);
}
export default App;
Kembali ke browser, maka akan terlihat seperti berikut:
Kemudian klik salah satu dari tombol “Delete” maka list product akan terhapus berdasarkan “id”, dimana “id” berasal dari komponen anak yaitu “ProductList.js”.
#9. useEffect Hook
useEffect merupakan function yang berjalan setiap kali terdapat perubahan pada DOM.
Untuk lebih jelasnya, ubah kode “App.js” menjadi seperti berikut:
import { useState, useEffect } from "react"
import ProductList from "./components/ProductList";
function App() {
const [products, setProducts] = useState([
{id: 1, title: 'Product 1', price: 899},
{id: 2, title: 'Product 2', price: 982},
{id: 3, title: 'Product 3', price: 322},
{id: 4, title: 'Product 4', price: 763},
{id: 5, title: 'Product 5', price: 389}
]);
const deleteProduct = (productId) => {
const newProducts = products.filter(product => product.id !== productId);
setProducts(newProducts);
}
useEffect(() => {
console.log('Use Effect Running');
});
return (
<div>
<ProductList products={ products } deleteProduct={ deleteProduct } />
</div>
);
}
export default App;
Kembali ke browser, kemudian open console.
Di saat pertama kali page load, maka useEffect running. Kemudian klik salah satu dari tombol “Delete”, maka useEffect running kembali.
Seperti gambar berikut:
Selain itu, kita juga bisa memanggil useEffect hanya pada saat page load.
Sebagai contoh, ubah useEffect function pada “App.js” menjadi seperti berikut:
useEffect(() => {
console.log('Use Effect Running');
}, []);
Selain itu, kita juga bisa memanggil useEffect tergantung pada perubahan suatu state.
Sebagai contoh ubah kode “App.js” menjadi seperti berikut:
import { useState, useEffect } from "react"
import ProductList from "./components/ProductList";
function App() {
const [products, setProducts] = useState([
{id: 1, title: 'Product 1', price: 899},
{id: 2, title: 'Product 2', price: 982},
{id: 3, title: 'Product 3', price: 322},
{id: 4, title: 'Product 4', price: 763},
{id: 5, title: 'Product 5', price: 389}
]);
const [name, setName] = useState('Fikri');
const deleteProduct = (productId) => {
const newProducts = products.filter(product => product.id !== productId);
setProducts(newProducts);
}
useEffect(() => {
console.log('Use Effect Running');
}, [name]);
return (
<div>
<ProductList products={ products } deleteProduct={ deleteProduct } />
<button onClick={ () => setName('John') }>Change Name</button>
<p>Name: { name }</p>
</div>
);
}
export default App;
Kembali ke Browser, maka useEffect berjalan pada saat pertama kali page load.
Kemudian klik tombol “Change Name”, maka useEffect berjalan kembali.
Jika Anda klik salah satu dari tombol “Delete”, maka useEffect tidak akan berjalan.
Seperti gambar berikut:
#10. React Router
Kita bisa membuat aplikasi kita seperti multiple page application dengan menggunakan react router.
Berbeda dengan multiple page application pada umumnya, react router tidak melakukan request ke server, melainkan hanya merender komponen di sisi client dengan URL tertentu.
Untuk dapat menggunakan react router, kita perlu menginstall react-router-dom.
Buka terminal baru, kemudian ketikan perintah berikut untuk menginstal react-router-dom:
npm install react-router-dom
Setelah instalasi selesai, buat sebuah file komponen bernama “About.js” pada folder “src/components”.
Kemudian ketikkan kode berikut:
const About = () => {
return (
<div>
<h2>This is About Page</h2>
</div>
)
}
export default About
Setelah itu, buat sebuah file komponen lagi bernama “Contact.js” pada folder “src/components”.
Kemudian ketikkan kode berikut:
const Contact = () => {
return (
<div>
<h2>This is Contact Page</h2>
</div>
)
}
export default Contact
Selanjutnya, ubah kode “App.js” menjadi seperti berikut:
import { useState } from "react"
import ProductList from "./components/ProductList";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import About from "./components/About";
import Contact from "./components/Contact";
function App() {
const [products, setProducts] = useState([
{id: 1, title: 'Product 1', price: 899},
{id: 2, title: 'Product 2', price: 982},
{id: 3, title: 'Product 3', price: 322},
{id: 4, title: 'Product 4', price: 763},
{id: 5, title: 'Product 5', price: 389}
]);
const deleteProduct = (productId) => {
const newProducts = products.filter(product => product.id !== productId);
setProducts(newProducts);
}
return (
<div>
<Router>
<Switch>
<Route exact path="/">
<ProductList products={ products } deleteProduct={ deleteProduct } />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Kembali ke browser, maka akan terlihat seperti berikut:
Kunjungi URL “/about”, maka akan terlihat about page seperti berikut:
Kunjungi URL “/contact”, maka akan terlihat contact page seperti berikut:
#11. JSON Server
Kita bisa membuat API palsu menggunakan JSON Server.
Untuk lebih jelasnya, buat sebuah file “db.json” pada root project, sejajar dengan folder node_modules, public, dan src.
Kemudian ketikkan data berikut pada file “db.json”:
{
"products":[
{"id": 1, "title": "Product 1", "price": 899},
{"id": 2, "title": "Product 2", "price": 982},
{"id": 3, "title": "Product 3", "price": 322},
{"id": 4, "title": "Product 4", "price": 763},
{"id": 5, "title": "Product 5", "price": 389}
]
}
Setelah itu, buka terminal baru dan jalankan perintah berikut:
npx json-server --watch db.json --port 8080
Kembali ke browser dan kunjungi URL berikut:
http://localhost:8080/products
Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:
#12. CRUD (Create-Read-Update-Delete)
Pada tutorial ini, saya akan menggunakan Bulma CSS untuk style.
Anda dapat menginstall Bulma CSS dengan mengetikan perintah berikut pada new terminal:
npm install bulma
Setelah instalasi bulma selesai, pergi ke file “index.js”, kemudian tambahkan import bulma seperti berikut:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "bulma/css/bulma.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Kemudian ubah kode pada file components “ProductList.js” yang terdapat pada folder “src/components” menjadi seperti berikut:
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
const ProductList = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async() => {
const response = await fetch('http://localhost:8080/products');
const data = await response.json();
setProducts(data);
}
const deleteProduct = async(id) => {
await fetch(`http://localhost:8080/products/${id}`,{
method: "DELETE",
headers:{
'Content-Type': 'application/json'
}
});
fetchData();
}
return (
<div>
<Link to="/add" className="button is-primary mt-5">Add New</Link>
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{products.map((product, index) => (
<tr key={product.id}>
<td>{ index + 1 }</td>
<td>{ product.title }</td>
<td>{ product.price }</td>
<td>
<Link to={`/edit/${product.id}`} className="button is-small is-info">Edit</Link>
<button onClick={() => deleteProduct(product.id)} className="button is-small is-danger">Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
export default ProductList
Setelah itu buat file components baru bernama “AddProduct.js” pada folder “src/components”, kemudian ketikan kode berikut:
import { useState } from "react";
import { useHistory } from "react-router-dom";
const AddProduct = () => {
const [title, setTitle] = useState('');
const [price, setPrice] = useState('');
const history = useHistory();
const saveProduct = async(e) => {
e.preventDefault();
const product = { title, price };
await fetch('http://localhost:8080/products',{
method: "POST",
body: JSON.stringify(product),
headers:{
'Content-Type': 'application/json'
}
});
history.push("/");
}
return (
<div>
<form onSubmit={saveProduct}>
<div className="field">
<label className="label">Title</label>
<div className="control">
<input className="input" value={title} onChange={(e) => setTitle(e.target.value)} type="text" placeholder="Title" />
</div>
</div>
<div className="field">
<label className="label">Price</label>
<div className="control">
<input className="input" value={price} onChange={(e) => setPrice(e.target.value)} type="text" placeholder="Price" />
</div>
</div>
<div className="field">
<div className="control">
<button className="button is-primary">Save</button>
</div>
</div>
</form>
</div>
)
}
export default AddProduct
Setelah itu, buat file components baru lagi bernama “EditProduct.js” pada folder “src/components”, kemudian ketikan kode berikut:
import { useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
const EditProduct = () => {
const [title, setTitle] = useState('');
const [price, setPrice] = useState('');
const history = useHistory();
const { id } = useParams();
useEffect(() => {
getProductById();
}, []);
const getProductById = async() => {
const response = await fetch(`http://localhost:8080/products/${id}`);
const data = await response.json();
setTitle(data.title);
setPrice(data.price);
}
const updateProduct = async(e) => {
e.preventDefault();
const product = { title, price };
await fetch(`http://localhost:8080/products/${id}`,{
method: "PUT",
body: JSON.stringify(product),
headers:{
'Content-Type': 'application/json'
}
});
history.push("/");
}
return (
<div>
<form onSubmit={updateProduct}>
<div className="field">
<label className="label">Title</label>
<div className="control">
<input className="input" value={title} onChange={(e) => setTitle(e.target.value)} type="text" placeholder="Title" />
</div>
</div>
<div className="field">
<label className="label">Price</label>
<div className="control">
<input className="input" value={price} onChange={(e) => setPrice(e.target.value)} type="text" placeholder="Price" />
</div>
</div>
<div className="field">
<div className="control">
<button className="button is-primary">Update</button>
</div>
</div>
</form>
</div>
)
}
export default EditProduct
Kemudian ubah kode pada file “App.js” menjadi seperti berikut:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProductList from "./components/ProductList";
import AddProduct from "./components/AddProduct";
import EditProduct from "./components/EditProduct";
function App() {
return (
<div className="container">
<div className="columns">
<div className="column is-half is-offset-one-quarter">
<Router>
<Switch>
<Route exact path="/">
<ProductList />
</Route>
<Route path="/add">
<AddProduct />
</Route>
<Route path="/edit/:id">
<EditProduct />
</Route>
</Switch>
</Router>
</div>
</div>
</div>
);
}
export default App;
Kembali ke browser, maka akan terlihat seperti gambar berikut:
Klik tombol “Add New” maka akan tampil form add new product seperti berikut:
Masukkan “Title” dan “Price”, kemudian klik tombol “Save”.
Jika berjalan dengan baik, maka akan terlihat penambahan data seperti berikut:
Untuk update data, klik salah satu dari tombol “Edit”, maka akan tampil form edit product seperti berikut:
Ubah “Title” dan “Price”, kemudian klik tombol “Update”.
Jika berjalan dengan baik, maka akan terlihat perubahan data seperti berikut:
Untuk delete data, klik salah satu dari tombol “Delete”, maka akan terhapus dari list.
Related: Tutorial CRUD Node JS, Express, MySQL, dan React JS (Full-Stack)
Kesimpulan:
Pembahasan kali adalah tentang tutorial react js untuk pemula.
Mulai dari apa itu react, kenapa menggunakan react, create-react-app, components, click events, useState Hook, looping lists, props, useEffect Hook, React Router, JSON Server, hingga CRUD (Create-Read-Update-Delete).
Jadi tunggu apalagi, let’s coding!
Komentar (0)