React dan Next.js Cheatsheet untuk Pemula (TypeScript dan Tailwind CSS)

Table of Contents

Pengenalan React

React adalah library JavaScript untuk membangun antarmuka pengguna. Dengan React, Anda dapat membuat komponen UI yang dapat digunakan kembali dan mengelola state aplikasi dengan efisien.

Dasar-Dasar React

Komponen

Komponen adalah blok bangunan utama dalam React. Anda dapat membuat komponen fungsional atau kelas.

Contoh Komponen Fungsional dengan TypeScript:

import React from "react";

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1 className="text-2xl font-bold">Hello, {name}!</h1>;
};

Props

Props adalah cara untuk mengirim data dari komponen induk ke komponen anak.

Contoh Penggunaan Props:

const App: React.FC = () => {
  return <Greeting name="Fajar" />;
};

State

State adalah objek yang menyimpan data yang dapat berubah seiring waktu. Anda dapat menggunakan useState untuk mengelola state dalam komponen fungsional.

Contoh Penggunaan State:

import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div className="flex flex-col items-center">
      <p className="text-lg">Count: {count}</p>
      <button
        className="mt-2 rounded bg-blue-500 px-4 py-2 text-white"
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>
    </div>
  );
};

Lifecycle Methods

Lifecycle methods adalah metode yang dipanggil pada berbagai tahap siklus hidup komponen. Dalam komponen kelas, Anda dapat menggunakan metode seperti componentDidMount, componentDidUpdate, dan componentWillUnmount.

Contoh Lifecycle Method dalam Komponen Kelas:

import React from "react";

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component mounted");
  }

  render() {
    return <div className="text-center">Hello!</div>;
  }
}

Pengenalan Next.js

Next.js adalah framework React yang memungkinkan Anda untuk membangun aplikasi web dengan fitur seperti rendering sisi server, pengelolaan routing, dan optimasi performa.

Routing di Next.js

Next.js menggunakan sistem routing berbasis file. Setiap file di dalam folder pages menjadi route otomatis.

Contoh Struktur Routing:

pages/
├── index.tsx         // Route: /
├── about.tsx         // Route: /about
└── blog/
    ├── index.tsx     // Route: /blog
    └── [id].tsx      // Route: /blog/:id

Link

Gunakan komponen Link dari Next.js untuk navigasi antar halaman.

Contoh Penggunaan Link:

import Link from "next/link";

const Navbar: React.FC = () => {
  return (
    <nav className="bg-gray-800 p-4">
      <Link href="/" className="mr-4 text-white">
        Home
      </Link>
      <Link href="/about" className="text-white">
        About
      </Link>
    </nav>
  );
};

API Routes di Next.js

Next.js memungkinkan Anda untuk membuat API routes di dalam folder pages/api. Setiap file di dalam folder ini menjadi endpoint API.

Contoh API Route:

// pages/api/hello.ts
import { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: "Hello World" });
}

Fetching Data

Next.js menyediakan beberapa cara untuk mengambil data, termasuk getStaticProps, getServerSideProps, dan getStaticPaths.

Contoh Fetching Data dengan getStaticProps

// pages/index.tsx
import { GetStaticProps } from 'next';

interface Data {
  id: number;
  name: string;
}

interface HomePageProps {
  data: Data[];
}

export const getStaticProps: GetStaticProps<HomePageProps> = async () => {
  const res = await fetch('https://api.example.com/data');
  const data: Data[] = await res.json();

  return {
    props: {
      data,
    },
  };
};

const HomePage: React.FC<HomePageProps> = ({ data }) => {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Data:</h1>
      <pre className="bg-gray-100 p-4 rounded">{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default HomePage;

Menggunakan Tailwind CSS

Instalasi Tailwind CSS

1. Instal Tailwind CSS:

   Jalankan perintah berikut di terminal:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

2. Konfigurasi Tailwind:

   Tambahkan path ke file template Anda di tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./pages/**/*.{js,ts,jsx,tsx}",
       "./components/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

3. Tambahkan Tailwind ke CSS:

   Di file styles/globals.css, tambahkan direktif Tailwind:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

Contoh Penggunaan Tailwind CSS

Setelah menginstal dan mengkonfigurasi Tailwind CSS, Anda dapat menggunakannya dalam komponen Anda.

Contoh Penggunaan Tailwind CSS dalam Komponen:

const Footer: React.FC = () => {
  return (
    <footer className="bg-gray-800 p-4 text-center text-white">
      <p>&copy; 2025 Fajar Satria. All rights reserved.</p>
    </footer>
  );
};

Kesimpulan

Dengan memahami dasar-dasar React dan Next.js menggunakan TypeScript dan Tailwind CSS, Anda dapat mulai membangun aplikasi web yang interaktif dan efisien. Gunakan cheatsheet ini sebagai referensi saat Anda belajar dan bereksperimen dengan ketiga teknologi ini. Selamat mencoba!