Header

Pada materi kali ini, kita akan membuat komponen Header. Secara umum, komponen ini berada di bagian atas sebuah aplikasi web. Biasanya, komponen ini digunakan untuk menampilkan teks header, logo website, serta beberapa menu atau tombol.

Silakan buka file Header.js, kemudian ubah menjadi seperti berikut:

import React, { useContext } from "react";
import { Navbar, Container, Button } from "react-bootstrap";
import { ThemeContext } from "../App";
import { Link } from 'react-router-dom';

const Header = () => {
    const { theme, toggleTheme } = useContext(ThemeContext); 

    return (
        <Navbar bg="dark" variant="dark">
            <Container>
                <Navbar.Brand as={Link} to="/">ToDo App</Navbar.Brand>
                <Button onClick={toggleTheme} className="toggle-theme-btn">
                    {theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
                </Button>
            </Container>
        </Navbar>
    );
};

export default Header;

Import Library dan Komponen

Pada skrip di dalam file Header.js, hal yang paling utama dalam React.js adalah mengimpor library dan komponen. Salah satunya adalah perintah berikut:

import React, { useContext } from "react";

• React diperlukan agar dapat menggunakan sintaks JSX dalam komponen.
• useContext adalah hook bawaan React yang digunakan untuk mengakses nilai dari Context API.

Selain itu, terdapat beberapa impor lainnya:

import { Navbar, Container, Button } from "react-bootstrap";
import { ThemeContext } from "../App";
import { Link } from "react-router-dom";

• Mengimpor komponen dari React-Bootstrap (Navbar, Container, dan Button) untuk membangun tampilan UI.
• Mengimpor ThemeContext dari ../App untuk mengambil nilai tema aplikasi.
• Mengimpor Link dari react-router-dom agar dapat digunakan untuk navigasi antar halaman tanpa perlu memuat ulang (refresh) halaman.

Deklarasi Komponen Header

Deklarasi komponen Header dalam React menggunakan komponen fungsional (functional component) dengan arrow function:

const Header = () => {
    const { theme, toggleTheme } = useContext(ThemeContext);

• useContext(ThemeContext) digunakan untuk mengambil nilai tema (theme) dan fungsi untuk mengubah tema (toggleTheme) dari Context API.
• theme dapat memiliki nilai "light" atau "dark", yang digunakan untuk menentukan tampilan aplikasi.

Return untuk Tampilan Header

return (
    <Navbar bg="dark" variant="dark">
        <Container>
            <Navbar.Brand as={Link} to="/">ToDo App</Navbar.Brand>
            <Button onClick={toggleTheme} className="toggle-theme-btn">
                {theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
            </Button>
        </Container>
    </Navbar>
);

Bagian ini menggunakan komponen Navbar dari Bootstrap untuk menampilkan nama aplikasi ("ToDo App") sebagai header. Selain itu, terdapat tombol untuk mengubah tema aplikasi.

• Jika tema "light", maka akan menampilkan tombol 🌙 Dark Mode untuk berpindah ke mode gelap.
• Jika tema "dark", maka akan menampilkan tombol ☀️ Light Mode untuk berpindah ke mode terang.

Footer

Silakan buka file Footer.js yang terletak di dalam folder components, lalu masukkan kode berikut:

import React from "react";
import { Container } from "react-bootstrap";

const Footer = () => {
    return (
        <footer className="bg-dark text-light text-center py-3 mt-4">
            <Container>
                <p>&copy; {new Date().getFullYear()} ToDo App. @LagiKoding.com All Rights Reserved.</p>
            </Container>
        </footer>
    );
};

export default Footer;

Komponen Footer dalam React berfungsi untuk menampilkan bagian footer pada aplikasi. Komponen ini menggunakan Container dari Bootstrap agar tampilan lebih rapi, serta menerapkan beberapa kelas Bootstrap seperti bg-dark, text-light, dan text-center untuk tampilan yang lebih responsif.

Di dalamnya terdapat teks hak cipta (copyright) yang diperbarui secara otomatis menggunakan new Date().getFullYear(), sehingga tahun akan selalu menyesuaikan dengan waktu saat ini.

Kesimpulan

Sampai pada tahap ini, kita telah berhasil membuat komponen Header dan Footer untuk kebutuhan aplikasi kita. Pada materi berikutnya, kita akan membuat komponen Form, yang berfungsi untuk mengelola input dalam aplikasi ToDo ini.