Tutorial React JS Untuk Pemula (React Hooks)

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.

Tonton video tutorial web berkualitas GRATIS di channel youtube saya:

Klik Disini.!

#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)

#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:

https://nodejs.org/en/

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:

node version

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:

create react app

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:

react project

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:

npm start

Kemudian buka browser Anda dan kunjungi URL berikut:

http://localhost:3000

Maka akan tampil seperti berikut:

react

#3. Struktur Folder

Jika Anda perhatikan lebih detail, maka Anda akan mendapatkan struktur folder seperti berikut:

folder struktur

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:

cleanup

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:

hello

#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:

components

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:

compnents

#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:

event

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:

event params

#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:

usestate

Klik tombol “Change Title”, maka titlenya akan berubah seperti berikut:

usestate

#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:

lists

#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:

props

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:

useEffect

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:

useEffect

#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:

lists

Kunjungi URL “/about”, maka akan terlihat about page seperti berikut:

about page

Kunjungi URL “/contact”, maka akan terlihat contact page seperti berikut:

contact page

#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:

json server

#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:

lists