Tutorial React JS Bagian 4: Styling Lanjutan, Routing, State Global & CRUD API - Samotuho Ndruru

 

Review Singkat Bagian 3

Di bagian sebelumnya kita sudah membahas:

• Conditional rendering (if/else)
• Form & submit
• Lifting state ke parent
• Fetching API sederhana

Sekarang kita akan bikin aplikasi React yang lebih kompleks dan siap dipakai beneran.

Styling Lanjutan

Di React, ada banyak cara styling selain CSS biasa. Kita bahas 3 metode populer.

a. CSS Modules

CSS Modules bikin styling lebih aman karena tiap file CSS punya scope sendiri.

Contoh: Button.module.css

.btn {
  background-color: royalblue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 6px;
}

Button.js

import React from 'react';
import styles from './Button.module.css';

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

export default Button;

b. Styled Components

Library yang bikin kita bisa nulis CSS langsung di dalam file JavaScript.

Install:

npm install styled-components

Contoh:

import React from 'react';
import styled from 'styled-components';

const Tombol = styled.button`
  background: tomato;
  color: white;
  padding: 10px;
  border-radius: 6px;
  border: none;
`;

function App() {
  return <Tombol>Klik Saya</Tombol>;
}

export default App;

c. React Bootstrap

React Bootstrap bikin kita bisa pakai komponen siap pakai yang rapi.

Install:

npm install react-bootstrap bootstrap

Tambahkan di index.js:

import 'bootstrap/dist/css/bootstrap.min.css';

Contoh:

import React from 'react';
import { Button } from 'react-bootstrap';

function App() {
  return <Button variant="primary">Klik Saya</Button>;
}

export default App;

Routing dengan React Router

Biar React punya multi-halaman, kita pakai React Router.

Install:

npm install react-router-dom

Contoh:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Halaman Home</h2>;
}

function About() {
  return <h2>Halaman About</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Context API untuk State Global

Kalau state cuma di satu komponen parent, kita bisa pakai lifting state. Tapi kalau semua komponen butuh state itu, lebih efisien pakai Context API.

Contoh: UserContext.js

import { createContext } from 'react';

export const UserContext = createContext(null);

App.js

import React, { useState } from 'react';
import { UserContext } from './UserContext';
import Profil from './Profil';

function App() {
  const [user, setUser] = useState({ nama: 'Sam', umur: 25 });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Profil />
    </UserContext.Provider>
  );
}

export default App;

Profil.js

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

function Profil() {
  const { user } = useContext(UserContext);
  return <h3>Halo, {user.nama}</h3>;
}

export default Profil;

CRUD Lengkap dengan API

Kita akan pakai API gratis dari JSONPlaceholder untuk latihan.

Contoh:

import React, { useState, useEffect } from 'react';

function CrudExample() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState('');

  // Read
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  // Create
  const addPost = () => {
    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({ title, body: 'Isi konten', userId: 1 }),
      headers: { 'Content-type': 'application/json; charset=UTF-8' },
    })
      .then((res) => res.json())
      .then((data) => setPosts([data, ...posts]));
    setTitle('');
  };

  // Delete
  const deletePost = (id) => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
      method: 'DELETE',
    }).then(() => setPosts(posts.filter((post) => post.id !== id)));
  };

  return (
    <div>
      <h2>CRUD Posts</h2>
      <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Judul baru" />
      <button onClick={addPost}>Tambah</button>

      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.title} <button onClick={() => deletePost(post.id)}>Hapus</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default CrudExample;

Dari kode ini kita sudah punya:

• Create (Tambah post)
• Read (Ambil list post)
• Delete (Hapus post)
• Update (bisa ditambahkan di bagian selanjutnya)

Kesimpulan Bagian 4

Hari ini kita udah belajar:

✅ Styling modern (CSS Modules, Styled Components, Bootstrap)

✅ Routing multi-halaman dengan React Router

✅ State global dengan Context API

✅ CRUD API (Create, Read, Delete — dan bisa dikembangkan ke Update)

Selanjutnya Bagian 5 yang fokus di:

• Deploy React ke Vercel/Netlify
• Optimasi performa
• Menggunakan API nyata (misal API cuaca)
• Menghubungkan React dengan backend Node.js

Related Posts