DEV Community: ramadhan.dev

Building Dynamic Table Headers in React + ExcelJS

ramadhan.dev — Thu, 24 Jul 2025 02:06:02 +0000

Building Dynamic Table Headers in React + ExcelJS

This article is a follow-up to my previous post, where I showed how to export data to Excel using ExcelJS and ReactJS. Now, let’s take it a step further — by creating dynamic table headers both in the UI and the Excel export.

Use Case

You have sales or forecast data for each product per month (V1 to V12, P1 to P12) — but you only want to export a specific range of months (e.g., May to July).

Each product has:

[
{"Product_Code":"CC0110102","Product_Name":"Lorem","Start_Month":5,"End_Month":7,"V1":".00","P1":"0","V2":".00","P2":"0","V3":".00","P3":"0","V4":".00","P4":"0","V5":"213.00","P5":"-.2159624413145","V6":"167.00","P6":"-.0179640718562","V7":"164.00","P7":"-10","V8":".00","P8":"0","V9":".00","P9":"0","V10":".00","P10":"0","V11":".00","P11":"0","V12":".00","Total_Qty":"544.00"},
{"Product_Code":"CC0110102","Product_Name":"Lorem","Start_Month":5,"End_Month":7,"V1":".00","P1":"0","V2":".00","P2":"0","V3":".00","P3":"0","V4":".00","P4":"0","V5":"213.00","P5":"-.2159624413145","V6":"167.00","P6":"-.0179640718562","V7":"164.00","P7":"-10","V8":".00","P8":"0","V9":".00","P9":"0","V10":".00","P10":"0","V11":".00","P11":"0","V12":".00","Total_Qty":"544.00"},
{"Product_Code":"CC0110102","Product_Name":"Lorem","Start_Month":5,"End_Month":7,"V1":".00","P1":"0","V2":".00","P2":"0","V3":".00","P3":"0","V4":".00","P4":"0","V5":"213.00","P5":"-.2159624413145","V6":"167.00","P6":"-.0179640718562","V7":"164.00","P7":"-10","V8":".00","P8":"0","V9":".00","P9":"0","V10":".00","P10":"0","V11":".00","P11":"0","V12":".00","Total_Qty":"544.00"},
{"Product_Code":"CC0110102","Product_Name":"Lorem","Start_Month":5,"End_Month":7,"V1":".00","P1":"0","V2":".00","P2":"0","V3":".00","P3":"0","V4":".00","P4":"0","V5":"213.00","P5":"-.2159624413145","V6":"167.00","P6":"-.0179640718562","V7":"164.00","P7":"-10","V8":".00","P8":"0","V9":".00","P9":"0","V10":".00","P10":"0","V11":".00","P11":"0","V12":".00","Total_Qty":"544.00"}
]

We’ll:

Dynamically build headers: Qty May, % May, Qty Jun, Qty Jul, etc.

Render only the relevant Vx and Px values based on Start_Month and End_Month.

Step-by-Step: Dynamic Header Excel Export

Step 1: Create an Export Excel Function

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
import { has } from "lodash"

const ExportToExcel = ({ data, fileName }) => {
    const exportExcel = async () => {
        // 1. Create a new workbook
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet('Data Report');

        const month = [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec',
        ]


        // 2. Define the table headers
        let header = []
        let startMonth = data[0].Start_Month
        let endMonth = data[0].End_Month
        let firstData = data[0];

        header.push({ name: '#', filterButton: false })
        header.push({ name: 'Product Name', filterButton: false })

        for (let index = startMonth; index <= endMonth; index++) {
            const key1 = `V${index}`
            const key2 = `P${index}`
            if (has(firstData, key1)) {

                header.push({
                    name: `${month[index - 1]}`,
                    key: key1,
                    style: {
                        alignment: {
                            vertical: 'middle',
                            horizontal: 'right',
                            wrapText: true,
                        },
                    },
                    filterButton: true,
                })

                if (index !== endMonth) {
                    if (has(firstData, key2)) {
                        header.push({
                            name: `${month[index - 1]} (+/-)%`,
                            key: key2,
                            style: {
                                alignment: {
                                    vertical: 'middle',
                                    horizontal: 'center',
                                    wrapText: true,
                                },
                            },
                            filterButton: true,
                        })
                    }
                }
            }
        }

        header.push({ name: 'Total', filterButton: false })


        // 3. generate data
        let dataArray = []

        data.forEach((data, index) => {
            let temp = []
            temp.push(index + 1)
            temp.push(data?.Product_Name)

            let total = 0;

            for (let index = startMonth; index <= endMonth; index++) {
                const key1 = `V${index}`
                const key2 = `P${index}`

                if (has(data, key1)) {
                    if (data[key1] === ".00") {
                        temp.push(0)
                    } else {
                        temp.push(parseInt(data[key1]))
                        total = total + parseInt(data[key1]);
                    }

                    if (index !== endMonth) {
                        if (has(data, key2)) {
                            temp.push(parseFloat(data[key2]))
                        }
                    }
                }
            }

            temp.push(total)
            dataArray.push(temp)
        })

        worksheet.addTable({
            name: 'headerName',
            ref: `A3`,
            headerRow: true,
            totalsRow: false,
            style: {
                theme: 'TableStyleMedium2',
                showRowStripes: true,
                // @ts-ignore: Unreachable code error
                width: 200,
            },
            columns: header ? header : [{ name: '' }],
            rows: dataArray.map((e) => {
                let arr = []
                for (let i in e) {
                    arr.push(e[i])
                }
                return arr
            }),
        })



        // 5. Save the workbook as an Excel file
        const buffer = await workbook.xlsx.writeBuffer();
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob, `${fileName}.xlsx`);
    };

    return (
        <button onClick={exportExcel}>Download Excel</button>
    );
};

export default ExportToExcel;

Step 2: Use the ExportToExcel Component
After creating the ExportToExcel component, use it in a relevant file, such as App.js. Ensure you have the data ready for export to Excel.

import React from 'react';
import ExportToExcel from './ExportToExcel';

const App = () => {
  const data = [
    { id: 1, name: 'Name 1', email: 'Name1@example.com', joinDate: '2023-01-15' },
    { id: 2, name: 'Name 2', email: 'Name2@example.com', joinDate: '2023-02-20' },
    // Add more data as needed
  ];

  return (
    <div>
      <h1>Export Data to Excel</h1>
      <ExportToExcel data={data} fileName="Data_Report"/>
    </div>
  );
};

export default App;

git stash — Save Work-in-Progress Temporarily

ramadhan.dev — Fri, 04 Jul 2025 02:47:51 +0000

git stash temporarily saves your working directory changes (modified and added files not yet committed) and restores the working directory to the latest commit.

✅Use it when:

🔄 You need to switch branches, but have uncommitted changes you don't want to lose or commit yet.
🧪 You want to experiment, but first save your current work state.
⚠️ Git prevents checkout due to uncommitted changes.
💥 You need to temporarily undo changes for testing or debugging without losing your work.

🛠️ Basic Commands and Usage

🔐 Save changes to stash:

git stash

To also include untracked (new) files:

git stash -u  # atau --include-untracked

View list of stashes:

git stash list

Example output:

stash@{0}: WIP on feature/login: 3fa2b2a Add login form
stash@{1}: WIP on main: 1a2b3c4 Fix typo

📦 Apply a stash back to the working directory:

git stash apply

Apply a specific stash:

git stash apply stash@{1}

🧹 Apply and remove stash from the list:

git stash pop

❌ Delete a specific stash:

git stash drop stash@{0}

🧼 Clear all stashes:

git stash clear

✅ Simple Use Case Example

You're working on the develop branch with some uncommitted changes.
Suddenly you need to switch to the main branch to fix a bug.

git stash            # Save current changes
git checkout main    # Switch to main
# ... make the fix and commit
git checkout develop # Return to develop
git stash pop        # Restore your saved changes

🏷️ Stash with Custom Message

✅ Format:

git stash push -m "Pesan custom kamu"

🧾 Example:

git stash push -m "QA: fix login validation"

To also include untracked files:

git stash push -u -m "WIP: registration feature"

State Management: Redux Toolkit + React JS

ramadhan.dev — Mon, 18 Nov 2024 02:32:33 +0000

Redux Toolkit simplifies global state management in React applications. In this article, we’ll explore how to implement an authentication system using Redux Toolkit, including store configuration, slices, and async actions with thunks.

1. Configuring the Redux Store
The Redux store is configured using configureStore. In app.tsx, we set up a global reducer, middleware, and enable developer tools for debugging.

import { lazy } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from "react-redux";
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './slice';
import { setupAxios } from './_metronic/helpers/Axios';
import axios from 'axios';
import { thunk } from 'redux-thunk';

setupAxios(axios);

const AppRoutes = lazy(() => import('./routers/AppRoutes'));

const store = configureStore({
  reducer: combineReducers({
    masterState: rootReducer,
  }),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
  devTools: true,
});

createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <AppRoutes />
  </Provider>
);

setupAxiosinitializes Axios with any required configuration, such as request interceptors.
combineReducersmerges multiple reducers, keeping the application modular.
Providerwraps the app to make the Redux store accessible throughout.

2. Creating the Root Reducer
The root reducer manages global state by combining different slices. Here, we include an auth slice for authentication.

import { AuthReducer } from "#/modules/auth/store/auth.slice";
import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  Auth: AuthReducer,
});

The Authslice handles authentication-specific state, which is defined using createSlice.

3. Defining the Authentication Slice
Using createSlice, we define the state structure, synchronous reducers, and extraReducers to handle async actions.

import { createSlice } from "@reduxjs/toolkit";
import { AuthState, initialAuthState } from "../model/authModel";
import { setLocalStorageData } from "#/_metronic/helpers/localstorage/accessToken";
import { AUTH_KEY, REFRESH_KEY } from "#/_metronic/helpers/env";
import { login } from "./auth.asyncAction";

const initialState: AuthState = initialAuthState;

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.loading = true;
        state.error = undefined;
        state.isSubmitting = true;
      })
      .addCase(login.fulfilled, (state, action) => {
        const { payload }: any = action;
        if (payload?.status === 'Error') {
          state.error = payload?.message || payload;
        } else {
          state.success = true;
          state.isLogin = true;
          setLocalStorageData(AUTH_KEY, payload?.api_token);
          setLocalStorageData(REFRESH_KEY, payload?.refreshToken);
        }
        state.loading = false;
        state.isSubmitting = false;
      })
      .addCase(login.rejected, (state, action) => {
        const { payload }: any = action;
        state.loading = false;
        state.error = payload?.data || payload;
        state.isSubmitting = false;
      });
  },
});

export const { reducer: AuthReducer } = authSlice;

Initial State: Defines properties like isLogin, loading, and error.
extraReducers: Handles async actions (pending, fulfilled, rejected).
Token data is saved to localStoragefor managing user sessions.

4. Creating Async Actions with createAsyncThunk
The login async action interacts with an API to handle user authentication.

import { createAsyncThunk } from "@reduxjs/toolkit";
import { doLogin } from "../api/auth_api";

export const login = createAsyncThunk('login', async (payload: any, { rejectWithValue }) => {
  try {
    return await doLogin(payload);
  } catch (error: any) {
    return rejectWithValue(error?.data || error);
  }
});

The action calls the API and processes responses or errors with rejectWithValue.

5. Creating the Authentication API
The API layer uses Axios to communicate with the backend. Here's the implementation for the login request.

import axios from 'axios';
import { ILogin, UserModel } from '../model/authModel';
import { BASE_URL } from '#/_metronic/helpers/env';

export const AUTH_URL = `${BASE_URL}/auth`;

export const doLogin = (payload: ILogin) => axios.post<UserModel>(AUTH_URL, payload);

AUTH_URLspecifies the authentication endpoint.
doLoginsends a POSTrequest with user credentials and returns the server's response.

With Redux Toolkit, managing global state becomes streamlined, especially for handling complex workflows like user authentication. By breaking the implementation into smaller modules (store, slice, and API), we ensure scalability and maintainability in our React applications.

Nodejs + Custom CORS

ramadhan.dev — Wed, 13 Nov 2024 02:44:12 +0000

CORS (Cross-Origin Resource Sharing) is a mechanism that allows a web application on one domain to access resources on another domain. This is crucial when developing an application where the frontend and backend are separate and communicate through an API.

Here’s an article explaining CORS implementation in Node.js and Express without using external libraries:

"use strict";

/*jshint node:true */

var simpleMethods, simpleRequestHeaders, simpleResponseHeaders, toLowerCase, checkOriginMatch, origin;

Object.defineProperty(exports, "simpleMethods", {
    get: function () {
        return [
            "GET",
            "HEAD",
            "POST",
            "PUT",
            "DELETE"
        ];
    }
});
simpleMethods = exports.simpleMethods;

Object.defineProperty(exports, "origin", {
    get: function () {
        return ["http://localhost:3000"];
    }
});
origin = exports.origin;

Export simpleMethods: Defines the allowed HTTP methods for CORS requests (e.g., GET, POST, PUT, etc.).

Export origin: Specifies the list of permitted origins for access. In this example, http://localhost:3000 is allowed.

Object.defineProperty(exports, "simpleRequestHeaders", {
    get: function () {
        return ["accept", "accept-language", "content-language", "content-type", "authorization", "token"];
    }
});
simpleRequestHeaders = exports.simpleRequestHeaders;

Object.defineProperty(exports, "simpleResponseHeaders", {
    get: function () {
        return ["cache-control", "content-language", "content-type", "expires", "last-modified", "pragma"];
    }
});
simpleResponseHeaders = exports.simpleResponseHeaders;

Export simpleRequestHeaders: Defines allowed request headers from clients in cross-domain requests.

Export simpleResponseHeaders: Defines response headers permitted from server to client.

checkOriginMatch = function (originHeader, origins, callback) {
    if (typeof origins === "function") {
        origins(originHeader, function (err, allow) {
            callback(err, allow);
        });
    } else if (origins.length > 0) {
        callback(null, origins.some(function (origin) {
            return origin === originHeader;
        }));
    } else {
        callback(null, true);
    }
};

Function checkOriginMatch: Checks if the request origin matches an allowed origin list. If matched, the request is permitted.

exports.create = function (options) {
    options = options || {};
    options.origins = options.origins || origin;
    options.methods = options.methods || simpleMethods;

Initialization of origins and methods options, with default values from origin and simpleMethods if none are provided.

Setting Request and Response Headers

 if (options.hasOwnProperty("requestHeaders") === true) {
        options.requestHeaders = toLowerCase(options.requestHeaders);
    } else {
        options.requestHeaders = simpleRequestHeaders;
    }

    if (options.hasOwnProperty("responseHeaders") === true) {
        options.responseHeaders = toLowerCase(options.responseHeaders);
    } else {
        options.responseHeaders = simpleResponseHeaders;
    }

Sets allowed request (requestHeaders) and response (responseHeaders) headers. Converts any given request or response headers to lowercase.

Additional Middleware Configuration

 options.maxAge = options.maxAge || null;
    options.supportsCredentials = options.supportsCredentials || false;

    if (options.hasOwnProperty("endPreflightRequests") === false) {
        options.endPreflightRequests = true;
    }

maxAge: Specifies the maximum cache age for CORS preflight. supportsCredentials: Determines if the server supports credentials (cookies or tokens) in cross-domain requests. endPreflightRequests: Decides if the server should terminate preflight requests (OPTIONS) or proceed to the next middleware.

 return function (req, res, next) {
        if (!req.headers.hasOwnProperty("origin")) {
            next();
        } else {
            checkOriginMatch(req.headers.origin, options.origins, function (err, originMatches) {
                if (err !== null) {
                    next(err);
                } else {
                    var endPreflight = function () {
                        if (options.endPreflightRequests === true) {
                            res.writeHead(204);
                            res.end();
                        } else {
                            next();
                        }
                    };

Function endPreflight: Ends preflight (OPTIONS) requests if endPreflightRequests is set to true. Origin Check: Uses checkOriginMatch to verify if the request origin matches an allowed origin.

Handling Preflight Requests (OPTIONS)

 if (req.method === "OPTIONS") {
                        if (!req.headers.hasOwnProperty("access-control-request-method")) {
                            endPreflight();
                        } else {
                            requestMethod = req.headers["access-control-request-method"];
                            if (req.headers.hasOwnProperty("access-control-request-headers")) {
                                requestHeaders = toLowerCase(req.headers["access-control-request-headers"].split(/,\s*/));
                            } else {
                                requestHeaders = [];
                            }

                            methodMatches = options.methods.indexOf(requestMethod) !== -1;
                            if (!methodMatches) {
                                endPreflight();
                            } else {
                                headersMatch = requestHeaders.every(function (requestHeader) {
                                    return options.requestHeaders.includes(requestHeader);
                                });

                                if (!headersMatch) {
                                    endPreflight();
                                } else {
                                    if (options.supportsCredentials) {
                                        res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
                                        res.setHeader("Access-Control-Allow-Credentials", "true");
                                    } else {
                                        res.setHeader("Access-Control-Allow-Origin", "*");
                                    }

                                    if (options.maxAge !== null) {
                                        res.setHeader("Access-Control-Max-Age", options.maxAge);
                                    }

                                    res.setHeader("Access-Control-Allow-Methods", options.methods.join(","));
                                    res.setHeader("Access-Control-Allow-Headers", options.requestHeaders.join(","));
                                    endPreflight();
                                }
                            }
                        }
                    }

Request Method & Headers Matching: Checks if request method and headers match those allowed. CORS Response Headers: Sets CORS headers like Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Methods, etc.

Exposing Headers in the Response
} else {
if (options.supportsCredentials) {
res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
res.setHeader("Access-Control-Allow-Credentials", "true");
} else {
res.setHeader("Access-Control-Allow-Origin", "*");
}

                    exposedHeaders = options.responseHeaders.filter(function (header) {
                        return !simpleResponseHeaders.includes(header);
                    });

                    if (exposedHeaders.length > 0) {
                        res.setHeader("Access-Control-Expose-Headers", exposedHeaders.join(","));
                    }

                    next();
                }
            }
        });
    }
};

 } else {
                        if (options.supportsCredentials) {
                            res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
                            res.setHeader("Access-Control-Allow-Credentials", "true");
                        } else {
                            res.setHeader("Access-Control-Allow-Origin", "*");
                        }

                        exposedHeaders = options.responseHeaders.filter(function (header) {
                            return !simpleResponseHeaders.includes(header);
                        });

                        if (exposedHeaders.length > 0) {
                            res.setHeader("Access-Control-Expose-Headers", exposedHeaders.join(","));
                        }

                        next();
                    }
                }
            });
        }
    };

Access-Control-Expose-Headers: Sets response headers that are accessible to the client if there are custom headers not included in simpleResponseHeaders.

This is how you can implement custom CORS in Node.js without using any library. For the complete script, you can refer to this example.

Excel js + React JS

ramadhan.dev — Mon, 11 Nov 2024 02:16:34 +0000

Excel is widely used for various data reports. In a ReactJS application, we can use the exceljs library to dynamically create Excel files. This article will guide you through implementing exceljs in a React app to create and download Excel reports.

Setup and Installation

First, install the exceljs library. Open the terminal and run the following command in your React project directory:

npm install exceljs file-saver

The exceljs library will be used to create and manipulate workbooks (Excel files), while file-saver will handle file downloads in the browser.

Step 1: Create an Export Excel Function
Create a new component file, such as ExportToExcel.js. In this component, we will create an exportExcel function to handle workbook and worksheet creation, as well as saving the generated Excel file.

import React from 'react';
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

const ExportToExcel = ({ data, fileName }) => {
  const exportExcel = async () => {
    // 1. Create a new workbook
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Data Report');

    // 2. Define the table headers
    worksheet.columns = [
      { header: 'ID', key: 'id', width: 10 },
      { header: 'Name', key: 'name', width: 30 },
      { header: 'Email', key: 'email', width: 30 },
      { header: 'Join Date', key: 'joinDate', width: 20 },
    ];

    // 3. Insert data into the worksheet
    data.forEach((item) => {
      worksheet.addRow({
        id: item.id,
        name: item.name,
        email: item.email,
        joinDate: item.joinDate,
      });
    });

    // 4. Style the header
    worksheet.getRow(1).eachCell((cell) => {
      cell.font = { bold: true };
      cell.alignment = { horizontal: 'center' };
    });

    // 5. Save the workbook as an Excel file
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(blob, `${fileName}.xlsx`);
  };

  return (
    <button onClick={exportExcel}>Download Excel</button>
  );
};

export default ExportToExcel;

Step 2: Use the ExportToExcel Component
After creating the ExportToExcel component, use it in a relevant file, such as App.js. Ensure you have the data ready for export to Excel.

import React from 'react';
import ExportToExcel from './ExportToExcel';

const App = () => {
  const data = [
    { id: 1, name: 'Name 1', email: 'Name1@example.com', joinDate: '2023-01-15' },
    { id: 2, name: 'Name 2', email: 'Name2@example.com', joinDate: '2023-02-20' },
    // Add more data as needed
  ];

  return (
    <div>
      <h1>Export Data to Excel</h1>
      <ExportToExcel data={data} fileName="Data_Report"/>
    </div>
  );
};

export default App;

Using exceljs, generating Excel reports in ReactJS becomes easy and flexible. This guide demonstrates how to create an Excel report with headers, data insertion, and basic header styling.

Axios interceptor + React JS

ramadhan.dev — Fri, 08 Nov 2024 02:43:50 +0000

In this article, we’ll discuss how to create a secure and efficient API client using Axios in React. We’ll cover Axios setup with interceptors, error handling configuration, and CRUD methods using the APIClient class. Let’s break down how this script works and the functionality it provides.

1. Basic Axios Configuration

import axios from "axios";
import secureLocalStorage from "react-secure-storage";

axios.defaults.baseURL = "";
axios.defaults.headers.post["Content-Type"] = "application/json";

This initial Axios setup defines the baseURL and sets the Content-Type for all POST requests. By configuring a baseURL, Axios automatically appends this base URL to every request, making it easier to work with endpoints in API calls.

2. Using Interceptors for Response and Error Handling

Interceptors are powerful tools that allow us to handle responses and errors globally.

Handling Responses

axios.interceptors.response.use(
    function (response) {
        return response.data ? response.data : response;
    },
    // ...

## Handling Errors

);

This response interceptor checks if there’s data within the response. If it exists, it simply returns the data. This way, we only get the relevant data we need in our components without repeatedly accessing response.data.

Handling Errors

function (error) {
    if (error?.response?.status === 401 && error?.response?.data?.data === 'Token is not valid'){
        secureLocalStorage.clear()
        window.location.href = '/'
    } else {
        let message;
        switch (error?.response?.status) {
            case 500:
                message = error?.response;
                break;
            case 401:
                message = error?.response;
                break;
            case 404:
            case 400:
            case 409:
                message = error?.response?.data;
                break;
            default:
                message = error.message || error;
        }
        return Promise.reject(message);
    }
}

In this section, if the response status is 401 and the token is invalid, the app clears the token from secure local storage and redirects the user to the login page. This ensures users are automatically logged out if their authentication session expires. For other status codes, it captures the error and returns an appropriate message based on the error type.

3. setAuthorization Function

const setAuthorization = (token) => {
    axios.defaults.headers.common["token"] = token;
};

This function allows the app to dynamically add an authentication token to every request. By calling setAuthorization(token) after logging in, the token will automatically be added to request headers.

4. Creating an APIClient Class for CRUD Methods
The APIClient class provides standard methods for HTTP requests, including get, create, update, put, and delete.

get Method
This method is flexible, handling parameters in either an object or string format.

get = (url, params) => {
    let response;
    let paramKeys = [];

    if (params && typeof (params) === 'object') {
        Object.keys(params).map(key => {
            if (key === 'pagination') {
                paramKeys.push("pageIndex=" + String(params[key]?.pageIndex || 1));
                paramKeys.push("pageSize=" + String(params[key]?.pageSize || 10));
            } else {
                paramKeys.push(key + '=' + params[key]);
            }
        });
        const queryString = paramKeys.length ? paramKeys.join('&') : "";
        response = axios.get(`${url}?${queryString}`, params);
    } else if (typeof (params) === 'string') {
        response = axios.get(`${url}/${params}`);
    } else {
        response = axios.get(url, params);
    }

    return response;
};

This method automatically formats query strings, making it easier to create GET requests with complex parameters like pagination, filter, or sort.

create, update, put, and delete Methods
These methods use Axios’s built-in post, patch, put, and delete functions to interact with the API.

create = (url, data) => {
    return axios.post(url, data);
};

update = (url, data) => {
    return axios.patch(url, data);
};

put = (url, data) => {
    return axios.put(url, data);
};

delete = (url, config) => {
    return axios.delete(url, { ...config });
};

This class abstracts API calls, making the code in components cleaner and more structured, reducing redundancy.

Example of Using the API Client

import { API_URL, API_VERSION } from "#/Common/constants/env";
import { APIClient } from "#/helpers/api_helper";

export const POST_LOGIN = API_URL + API_VERSION +  "/auth/login";

const api = new APIClient();
export const Login = (data: any) => api.create(POST_LOGIN, data);

For the complete script, you can see the following gist
Axios Interceptor

React Select + Custom Style

ramadhan.dev — Thu, 07 Nov 2024 03:12:40 +0000

Library React Select adalah salah satu pilihan populer bagi pengembang untuk membuat komponen dropdown yang dapat disesuaikan. Dalam artikel ini, kita akan membahas bagaimana cara membuat gaya atau custom style pada React Select untuk menciptakan tampilan yang sesuai dengan tema dan desain UI aplikasi.

Mengapa Memilih React Select?
React Select memudahkan implementasi dropdown yang fleksibel dengan berbagai fitur seperti pencarian, seleksi multiple, dan opsi yang dapat disesuaikan. Namun, tampilan default mungkin tidak selalu sesuai dengan kebutuhan desain, sehingga kita perlu menambahkan custom styling agar dropdown menyatu dengan tampilan aplikasi.

Menggunakan React Select dalam Proyek
Untuk menggunakan React Select, instal terlebih dahulu dependensinya:

npm install react-select

Lalu, import ke dalam komponen dan buat dropdown dasar:

import Select from 'react-select';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

function MySelect() {
  return <Select options={options} />;
}

Custom Style

Custom Component React Select
buatlah 1 file baru, dan isi dengan script berikut

import Select from 'react-select'

const CustomSelectComponent = ({ onChange, options, value, placeholder }: any) => {

    const defaultValue = (options: any, value: any) => {
        return options ? options.find((option: any) => option.value === value) : ''
    }

    const customStyles = {
        option: (provided: any, state: { isSelected: any }) => ({
            ...provided,
            color: state.isSelected ? '#AB0202' : '#000000',
            background: state.isSelected ? '#F4F7F9' : '#FFFFFF',
            opacity: 1,
            '&:hover': {
                backgroundColor: '#FCC2C2',
                cursor: 'pointer',
            },
        }),
        menuPortal: (base: any) => ({ ...base, zIndex: 9999 }),
        control: (base: any, state: any) => ({
            ...base,
            background: '#F7F7F7',
            borderColor: '#C0C4D6',
            '&:hover': {
                borderColor: state.isFocused ? '#F7F7F7' : 'blue',
                cursor: 'pointer',
            },
        }),
        singleValue: (provided: any, state: { isDisabled: any }) => {
            const opacity = state.isDisabled ? 1 : 1
            const transition = 'opacity 300ms'

            return { ...provided, opacity, transition }
        },
    }

    return (
        <Select
            value={defaultValue(options, value)}
            onChange={(value) => onChange(value)}
            options={options}
            placeholder={placeholder}
            styles={customStyles}
            menuPortalTarget={document.body}
        />
    )
}

export default CustomSelectComponent

Fungsi dari masing masing props pada component di atas

onChange adalah fungsi callback yang dijalankan setiap kali terjadi perubahan pada pilihan dropdown.
options adalah array berisi objek-objek yang mewakili opsi yang tersedia di dropdown.
value adalah nilai terpilih saat ini dari dropdown. Properti ini digunakan untuk mengatur opsi mana yang sedang dipilih dalam dropdown.
placeholder adalah teks yang ditampilkan sebagai panduan pengguna sebelum ada opsi yang dipilih. Teks ini akan ditampilkan di dropdown sebagai petunjuk untuk memilih opsi.

2.Cara penggunaan CustomSelectComponent

berikut cara penggunaannya


import CustomSelectComponent from './SelectComponent'

const App = () => {

    const [value, setValue] = useState('')
    const options = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
    ];

    return (
        <>
            <CustomSelectComponent
                placeholder={'Category'}
                value={value}
                options={options}
                onChange={(value: any) => {
                    setValue(value.value)
                }}
            />
        </>)
}

export { App }

Cara Penggunaan Axios di ReactJS - GET dan POST Request

ramadhan.dev — Tue, 15 Oct 2024 02:49:48 +0000

Cara Penggunaan Axios di ReactJS

Pendahuluan

Axios adalah pustaka populer untuk melakukan HTTP request seperti GET, POST, PUT, DELETE, dan lainnya. Axios sangat cocok digunakan di aplikasi React karena menyediakan sintaks yang mudah dan mendukung Promise. Artikel ini akan membahas cara menggunakan Axios di aplikasi ReactJS.

Instalasi Axios
Pastikan Anda telah menginstal Axios di proyek React:

npm install axios

Menggunakan Axios di Komponen React
Misalnya, kita ingin mengambil data dari sebuah API menggunakan metode GET dan menampilkannya di komponen React.

GET Request:

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

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Penjelasan:

Gunakan useEffect untuk memanggil fungsi fetchData saat komponen pertama kali dimuat.
- axios.get digunakan untuk mengambil data dari URL API.
- State data, loading, dan error digunakan untuk menyimpan data yang diambil, status pemuatan, dan kesalahan.

POST Request: Untuk mengirim data ke server, Anda bisa menggunakan metode POST seperti berikut:

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
        title,
        body,
      });
      console.log('Response:', response.data);
      alert('Post successfully created!');
    } catch (error) {
      console.error('Error posting data:', error);
    }
  };

  return (
    <div>
      <h1>Create a Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <textarea
          placeholder="Body"
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

Penjelasan:

Metode axios.post digunakan untuk mengirim data title dan body ke API.
Fungsi handleSubmit menangani form submission dan mengirimkan data ke server.

Membuat Landing Page Sederhana dan Cepat dengan ReactJS, Vite, dan Tailwind CSS

ramadhan.dev — Sat, 12 Oct 2024 02:33:16 +0000

Pendahuluan

Landing page yang efektif dapat menjadi alat yang ampuh untuk menarik perhatian audiens dan meningkatkan konversi. Dalam artikel ini, kita akan membahas cara membuat landing page modern menggunakan Vite sebagai build tool, ReactJS sebagai framework UI, dan Tailwind CSS untuk styling yang efisien.

Membuat Struktur Komponen Landing Page

Buat komponen dasar seperti LandingPage, Home, Footer, About dan OurFeatures. Contoh sederhana untuk komponen Appadalah sebagai berikut:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import LandingPage from './LandingPage.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <LandingPage />
  </StrictMode>,
)

Landing Page

import React, { lazy } from "react";
import { ChevronUp } from "lucide-react";

const NavBar = lazy(() => import("./layout/NavBar"));
const Home = lazy(() => import("./page/Home"));
const OurFeatures = lazy(() => import("./page/OurFeatures"));
const AboutUs = lazy(() => import("./page/AboutUs"));
const Footer = lazy(() => import("./page/Footer"));


const LandingPage = () => {

  const windowScroll = () => {
    const backToTop = document.getElementById("back-to-top");
    if (backToTop) {
      if (document.body.scrollTop >= 50 || document.documentElement.scrollTop >= 50) {
        backToTop.style.opacity = "1";
      } else {
        backToTop.style.opacity = "0";
      }
    }
  };

  React.useEffect(() => {
    window.addEventListener('scroll', windowScroll);

    window.addEventListener('load', windowScroll);

    return () => {
      window.removeEventListener('scroll', windowScroll);
    };
  }, []);

  const handleScroll = () => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  };

  React.useEffect(() => {
    const bodyElement = document.body;

    bodyElement.classList.add("text-base", "bg-white", "text-body", "font-public");

    return () => {
      bodyElement.classList.remove("text-base", "bg-white", "text-body", "font-public");
    }
  }, []);

  React.useEffect(() => {
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");
    return () => {
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");
    };
  }, []);

  return (
    <React.Fragment>

      <NavBar />
      <Home />
      <OurFeatures />
      <AboutUs />
      <Footer />

      <button id="back-to-top"
        className="fixed flex items-center justify-center size-10 text-white bg-purple-500 rounded-md bottom-10 right-10"
        onClick={handleScroll}>
        <ChevronUp className="animate animate-icons"></ChevronUp>
      </button>
    </React.Fragment>
  );
};

export default LandingPage;

Navbar

import React from "react";
import { Menu } from "lucide-react";

const NavBar = () => {

    const [isToggle, setIsToggle] = React.useState<boolean>(false);
    const [activeLink, setActiveLink] = React.useState<string>("/Home");

    const handleLinkClick = (target: string) => {
        setActiveLink(target);
    };

    React.useEffect(() => {
        const defaultLinkElement = document.querySelector(`.navbar-menu li.active`);

        if (defaultLinkElement) {
            setActiveLink(defaultLinkElement.getAttribute('href') || "/Home");
        }
    }, [activeLink]);

    const [navClass, setNavClass] = React.useState<string>('');



    // scroll
    const scrollNavigation = () => {
        var scrollUp = document.documentElement.scrollTop;
        if (scrollUp >= 50) {
            setNavClass('is-sticky duration-700');
        } else {
            setNavClass('');
        }
    };

    React.useEffect(() => {
        window.addEventListener('scroll', scrollNavigation, true);

        // Cleanup function to remove the event listener
        return () => {
            window.removeEventListener('scroll', scrollNavigation, true);
        };
    }, []);


    return (
        <React.Fragment>
            <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-20 py-3 [&.is-sticky]:bg-white border-b border-slate-200 [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navbar ${navClass}`} id="navbar">
                <div className="container 2xl:max-w-[87.5rem] px-4 mx-auto flex items-center self-center w-full">
                    <div className="mx-auto">
                        <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg
                                                    md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0 ${!isToggle ? "hidden" : ""}`}>
                            <li>
                                <a href="#home"
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-custom-500 [&.active]:text-custom-500 ${activeLink === "/Home" ? "active" : ""}`}
                                    onClick={() => handleLinkClick("/Home")}
                                >
                                    Home</a>
                            </li>
                            <li>
                                <a href="#features"
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-custom-500 [&.active]:text-custom-500 ${activeLink === "/Features" ? "active" : ""}`}
                                    onClick={() => handleLinkClick("/Features")}
                                >
                                    Layanan Kami</a>
                            </li>
                            <li>
                                <a href="#about"
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-custom-500 [&.active]:text-custom-500 ${activeLink === "/About" ? "active" : ""}`}
                                    onClick={() => handleLinkClick("/About")}
                                >
                                    Tentang Kami</a>
                            </li>
                            <li>
                                <a href="#contact"
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-custom-500 [&.active]:text-custom-500 ${activeLink === "/Contact" ? "active" : ""}`}
                                    onClick={() => handleLinkClick("/Contact")}
                                >
                                    Kontak</a>
                            </li>
                        </ul>
                    </div>
                    <div className="flex gap-2">
                        <div className="ltr:ml-auto rtl:mr-auto md:hidden navbar-toggale-button">
                            <button type="button"
                                className="flex items-center  justify-center size-[37.5px] p-0 text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100"
                                onClick={() => setIsToggle(!isToggle)}
                            >
                                <Menu></Menu></button>
                        </div>

                    </div>
                </div>
            </nav>
        </React.Fragment>
    );
}

export default NavBar;

Home

import React from "react";

const Home = () => {
    return (
        <React.Fragment>
            <section className="relative pb-36 pt-44" id="home">

                <div className="container 2xl:max-w-[87.5rem] px-4 mx-auto">
                    <div className="grid grid-cols-12 2xl:grid-cols-2">
                        <div className="col-span-12 lg:col-span-7 2xl:col-span-1">
                            <h1 className="mb-8 !leading-relaxed md:text-5xl">Belajar membaut aplikasi <span className="relative inline-block px-2 mx-2 before:block before:absolute before:-inset-1 before:-skew-y-6 before:bg-sky-50  before:rounded-md before:backdrop-blur-xl"><span className="relative text-sky-500">Dashboard</span></span></h1>
                            <p className="mb-6 text-lg text-slate-500">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem eligendi soluta animi tempora, porro eaque aliquam ea provident delectus dolorem explicabo consectetur culpa fugiat illum vitae veniam enim corrupti. Libero.</p>

                        </div>
                    </div>
                </div>
            </section>

        </React.Fragment>
    );
}

export default Home;

OurFeatures

import React from "react";

// Image
import widgets from "./../assets/card-1.png";
import widgets2 from "./../assets/card-2.png";
import widgets3 from "./../assets/chart-1.png";
import widgets4 from "./../assets/chart-2.png";
import home from "./../assets/table.png";
import achievement from "./../assets/achievement.png";


const OurFeatures = () => {
    return (
        <React.Fragment>
            <section className="relative py-32 bg-slate-900 " id="features">
                <div className="container 2xl:max-w-[87.5rem] px-4 mx-auto">
                    <div className="grid grid-cols-1 gap-5 xl:grid-cols-12">
                        <div className="order-2 xl:col-span-5 xl:order-1">
                            <div className="relative z-10 grid grid-cols-3 gap-5 xl:grid-cols-12">
                                <div className="xl:col-span-12">
                                    <img src={widgets} alt="" className="shadow-xl rtl:mr-auto ltr:ml-auto rounded-xl" />
                                </div>
                                <div className="xl:col-span-6">
                                    <img src={widgets3} alt="" className="shadow-xl xl:mt-5 rtl:mr-auto ltr:ml-auto rounded-xl" />
                                </div>
                                <div className="xl:col-span-6">
                                    <img src={widgets2} alt="" className="shadow-xl xl:mt-5 rtl:mr-auto ltr:ml-auto rounded-xl" />
                                    <img src={widgets4} alt="" className="shadow-xl xl:mt-5 rtl:mr-auto ltr:ml-auto rounded-xl mt-2" />
                                </div>
                            </div>
                        </div>
                        <div className="relative z-20 order-1 xl:-mt-72 xl:col-span-7 xl:order-last">
                            <img src={home} alt="" className="shadow-2xl rounded-xl" />
                            <img src={achievement} alt="" className="shadow-2xl rounded-xl mt-2" />
                        </div>
                    </div>
                </div>
            </section>


        </React.Fragment>
    );
}

export default OurFeatures;

AboutUs

import React from "react";
import { MoveRight } from "lucide-react";

// Image
import widgets from "./../assets/widgets.jpg";
import widgets2 from "./../assets/widgets-2.jpg";
import widgets4 from "./../assets/widgets-4.jpg";
import widgets5 from "./../assets/widgets-5.jpg";

const AboutUs = () => {
    return (
        <React.Fragment>
            <section className="relative py-10" id="about">
                <div className="container 2xl:max-w-[87.5rem] px-4 mx-auto">

                    <div className="grid items-center grid-cols-1 gap-6 mt-20 lg:grid-cols-12">
                        <div className="lg:col-span-5">
                            <h1 className="mb-3 leading-normal capitalize">Craft a Complete Website Quickly with the Help of Design Blocks</h1>
                            <p className="mb-6 text-lg text-slate-500 ">The block design approach basically breaks the design into small parts. These are built independently and then later combine into a customizable page which makes a website more flexible in terms of layout and content.</p>
                            <button type="button" className="py-2.5 px-6 bg-white text-custom-500 btn border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 ">
                                <span className="align-middle">Discover Now</span> <MoveRight className="inline-block size-4 align-middle ltr:ml-1 rtl:mr-1 rtl:rotate-180"></MoveRight></button>
                        </div>
                        <div className="text-center lg:col-span-6">
                            <img src={widgets4} alt="" className="shadow-lg ltr:lg:ml-auto rtl:lg:mr-auto rounded-xl" />
                            <img src={widgets5} alt="" className="relative -mt-24 shadow-lg ltr:ml-auto ltr:mr-24 rtl:mr-auto rtl:ml-24 rounded-xl" />
                        </div>
                    </div>

                    <div className="grid items-center grid-cols-1 gap-6 mt-32 lg:grid-cols-12">
                        <div className="text-center lg:col-span-6">
                            <img src={widgets2} alt="" className="shadow-lg ltr:ml-auto rtl:mr-auto rounded-xl" />
                            <img src={widgets} alt="" className="relative -mt-24 ml-[30%]  shadow-lg ltr:ml-auto rtl:mr-auto ltr:mr-24 rtl:ml-24 rounded-xl" />
                        </div>
                        <div className="lg:col-span-5">
                            <h1 className="mb-3 leading-normal capitalize">Boost Your Business Using Our Potent Tools</h1>
                            <p className="mb-6 text-lg text-slate-500 ">The block design approach basically breaks the design into small parts. These are built independently and then later combine into a customizable page which makes a website more flexible in terms of layout and content.</p>
                            <button type="button" className="py-2.5 px-6 bg-white text-custom-500 btn border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 ">
                                <span className="align-middle">Discover Now</span> <MoveRight className="inline-block size-4 align-middle ltr:ml-1 rtl:mr-1 rtl:rotate-180"></MoveRight></button>
                        </div>
                    </div>


                </div>
            </section>
        </React.Fragment>
    );
}

export default AboutUs;

Footer

import React from "react";
import { Facebook, Instagram, Linkedin, Twitter, Youtube } from "lucide-react";

// Image

const Footer = () => {
    return (
        <React.Fragment>
            <footer className="relative pt-20 pb-12 bg-slate-800">
                <div className="container 2xl:max-w-[87.5rem] px-4 mx-auto">
                    <div className="relative z-10 grid grid-cols-12 gap-5 xl:grid-cols-12">
                        <div className="col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3">
                            <h5 className="mb-4 font-medium tracking-wider text-slate-50">Dashboards</h5>
                            <ul className="flex flex-col gap-3 text-15">
                                <li>
                                    <a href="#!" className="relative inline-block transition-all duration-200 ease-linear text-slate-400 hover:text-slate-300 before:absolute before:border-b before:border-slate-500 before:inset-x-0 before:bottom-0 before:w-0 hover:before:w-full before:transition-all before:duration-300 before:ease-linear">Analytics</a>
                                </li>
                                <li>
                                    <a href="#!" className="relative inline-block transition-all duration-200 ease-linear text-slate-400 hover:text-slate-300 before:absolute before:border-b before:border-slate-500 before:inset-x-0 before:bottom-0 before:w-0 hover:before:w-full before:transition-all before:duration-300 before:ease-linear">CRM</a>
                                </li>
                            </ul>
                        </div>
                        <div className="col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3">
                            <h5 className="mb-4 font-medium tracking-wider text-slate-50">Apps Pages</h5>
                            <ul className="flex flex-col gap-3 text-15">
                                <li>
                                    <a href="#!" className="relative inline-block transition-all duration-200 ease-linear text-slate-400 hover:text-slate-300 before:absolute before:border-b before:border-slate-500 before:inset-x-0 before:bottom-0 before:w-0 hover:before:w-full before:transition-all before:duration-300 before:ease-linear">Ecommerce Apps</a>
                                </li>
                                <li>
                                    <a href="#!" className="relative inline-block transition-all duration-200 ease-linear text-slate-400 hover:text-slate-300 before:absolute before:border-b before:border-slate-500 before:inset-x-0 before:bottom-0 before:w-0 hover:before:w-full before:transition-all before:duration-300 before:ease-linear">Invoices</a>
                                </li>

                            </ul>
                        </div>
                        <div className="col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2">
                            <h5 className="mb-4 font-medium tracking-wider text-slate-50">Resources</h5>
                            <ul className="flex flex-col gap-3 text-15">
                                <li>
                                    <a href="#!" className="relative inline-block transition-all duration-200 ease-linear text-slate-400 hover:text-slate-300 before:absolute before:border-b before:border-slate-500 before:inset-x-0 before:bottom-0 before:w-0 hover:before:w-full before:transition-all before:duration-300 before:ease-linear">All Resources</a>
                                </li>
                                <li>
                                    <a href="#!" className="relative inline-block transition-all duration-200 ease-linear text-slate-400 hover:text-slate-300 before:absolute before:border-b before:border-slate-500 before:inset-x-0 before:bottom-0 before:w-0 hover:before:w-full before:transition-all before:duration-300 before:ease-linear">Blog</a>
                                </li>
                            </ul>
                        </div>
                        <div className="col-span-12 md:col-span-6 lg:col-span-12 xl:col-span-4">
                            <div className="flex">
                                <div className="flex-1">
                                    <p className="mb-1 text-slate-500 text-15">Support Email</p>
                                    <h5 className="text-lg !font-normal text-slate-200">support@xxxx.com</h5>

                                </div>

                                <div className="flex-1">
                                    <p className="mb-1 text-slate-500 text-15">Contact Us</p>
                                    <h5 className="text-lg !font-normal text-slate-200">+(012) 1111 222 3434</h5>

                                </div>
                            </div>

                        </div>
                    </div>

                    <div className="py-5 mt-20 border-y border-slate-700">
                        <div className="relative z-10 grid grid-cols-1 gap-5 md:grid-cols-12">

                            <div className="md:col-span-3 md:col-start-10">
                                <ul className="flex items-center gap-3 md:justify-end">
                                    <li>
                                        <a href="#!" className="flex items-center justify-center size-10 transition-all duration-200 ease-linear border rounded-full text-slate-400 border-slate-700 hover:text-custom-500">
                                            <Facebook className="size-4"></Facebook></a>
                                    </li>
                                    <li>
                                        <a href="#!" className="flex items-center justify-center size-10 transition-all duration-200 ease-linear border rounded-full text-slate-400 border-slate-700 hover:text-custom-500">
                                            <Linkedin className="size-4"></Linkedin></a>
                                    </li>
                                    <li>
                                        <a href="#!" className="flex items-center justify-center size-10 transition-all duration-200 ease-linear border rounded-full text-slate-400 border-slate-700 hover:text-custom-500">
                                            <Instagram className="size-4"></Instagram></a>
                                    </li>
                                    <li>
                                        <a href="#!" className="flex items-center justify-center size-10 transition-all duration-200 ease-linear border rounded-full text-slate-400 border-slate-700 hover:text-custom-500">
                                            <Twitter className="size-4"></Twitter></a>
                                    </li>
                                    <li>
                                        <a href="#!" className="flex items-center justify-center size-10 transition-all duration-200 ease-linear border rounded-full text-slate-400 border-slate-700 hover:text-custom-500">
                                            <Youtube className="size-4"></Youtube></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div className="mt-12 text-center text-slate-400 text-16">
                        <p>
                            {new Date().getFullYear()} © ramadhan. Design & Develop by
                        </p>
                    </div>
                </div>
            </footer>
        </React.Fragment>
    );
}

export default Footer;

Menggunakan React Router di React

ramadhan.dev — Fri, 11 Oct 2024 17:00:00 +0000

Pendahuluan

React Router adalah library populer untuk menangani navigasi di aplikasi React, terutama aplikasi single-page application (SPA). Dengan TypeScript, kita bisa mendapatkan manfaat dari tipe data statis dan autocompletion, yang membuat kode lebih aman dan mudah dipelihara. Artikel ini akan membahas cara menggunakan React Router di aplikasi React yang diketik dengan TypeScript.

Apa Itu React Router?
React Router membantu Anda membuat navigasi antar halaman di aplikasi React. Dengan bantuan TypeScript, Anda dapat memastikan tipe data untuk route dan parameter lebih konsisten, yang mengurangi potensi bug dalam kode.
Instalasi React Router dengan TypeScript
Pastikan Anda sudah menginstal React dan TypeScript. Untuk menginstal React Router, jalankan perintah berikut:

### NPM
npm install react-router-dom
npm install -d @types/react-router-dom


### YARN
yarn add react-router-dom
yarn add -D @types/react-router-dom

Paket @types/react-router-dom menyediakan tipe-tipe yang diperlukan untuk menggunakan React Router dengan TypeScript.

Script untuk aplikasi
Main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter basename={''}>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

App.tsx

import {  Route, Routes } from "react-router-dom"
import Nav from "./layout/Nav"
import Home from "./page/Home"
import About from "./page/About "

function App() {

  return (
      <Routes>
        <Route element={<Nav />}>
          <Route index path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
  )


}

export default App

Nav.Tsx

import React from "react";
import { Link, Outlet } from "react-router-dom";

const Nav = () => {
    const [navClass, setNavClass] = React.useState<string>('');

    const scrollNavigation = () => {
        var scrollUp = document.documentElement.scrollTop;
        if (scrollUp >= 50) {
            setNavClass('is-sticky');
        } else {
            setNavClass('');
        }
    };


    React.useEffect(() => {
        window.addEventListener('scroll', scrollNavigation, true);
        document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

        return () => {
            window.removeEventListener('scroll', scrollNavigation, true);
            document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

        };
    }, []);



    const [activeLink, setActiveLink] = React.useState<string>("/Home");
    const handleLinkClick = (target: string) => {
        setActiveLink(target);
    };



    return (
        <React.Fragment>
            <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
                <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
                    <div className="mx-auto">
                        <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
                            <li>
                                <Link 
                                    to="/" 
                                    onClick={() => handleLinkClick("/")}
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/" ? "active" : ""}`}>Home</Link>
                            </li>
                            <li>

                                <Link 
                                    to="about"
                                    onClick={() => handleLinkClick("/about")} 
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/about" ? "active" : ""}`}>About</Link>
                            </li>
                        </ul>
                    </div>

                </div>
            </nav>
            <div className={`flex mt-[60px] h-[100vh] ${activeLink === "/about" ? "bg-red-100" : "bg-blue-100"} `}>
            <Outlet />
            </div>

        </React.Fragment>
    )
}

export default Nav

Home.tsx

const Home = () => {
    return (<div>
        <h1>
        HOME PAGE
        </h1>
    </div>)
}
export default Home

About.tsx

const About = () => {
    return (<div>
        <h1>
            ABOUT PAGE
        </h1>
    </div>)
}
export default About

Itulah panduan menggunakan React Router dengan TypeScript. Anda dapat menyesuaikannya sesuai dengan kebutuhan proyek Anda atau menambahkan lebih banyak contoh berdasarkan fitur yang ingin dijelaskan!

Panduan Lengkap Membuat Sticky Navbar untuk Navigasi Lebih Baik Pada React JS

ramadhan.dev — Thu, 10 Oct 2024 17:00:00 +0000

Pada sesi kali ini kita akan membuat sticky navbar dengan tailwind css dan react js.

Proses instalasi react dan tailwind css bisa di lihat di artikel sebelumnya

Mari kita langsung buat code untuk navbarnya

Create HTML untuk tampilan Navbarnya

<React.Fragment>
      <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
        <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
          <div className="mx-auto">
            <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
              <li>
                <a href="#home"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Home")}
                >
                  Home</a>
              </li>
              <li>
                <a href="#features"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Features")}
                >
                  Layanan Kami</a>
              </li>
            </ul>
          </div>

        </div>
      </nav>
      <section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
        <div className="flex items-center justify-center h-full">
          HOME
        </div>
        </section>
      <section className="relative h-[800px] bg-green-600" id="features">
        <div className="flex items-center justify-center h-full">
          FEATURES
        </div>
      </section>
    </React.Fragment>

Fungsi Scroll

fungsi ini berfungsi untuk mengubah status navbar menjadi sticky, dan tambahkan juga animasi smooth agar proses perpindahan halamannya menjadi bagus



  const [navClass, setNavClass] = React.useState<string>('');

  const scrollNavigation = () => {
    var scrollUp = document.documentElement.scrollTop;
    if (scrollUp >= 50) {
      setNavClass('is-sticky');
    } else {
      setNavClass('');
    }
  };


  React.useEffect(() => {
    window.addEventListener('scroll', scrollNavigation, true);
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

    return () => {
      window.removeEventListener('scroll', scrollNavigation, true);
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

    };
  }, []);

Fungsi Set Active menu

fungsi ini berfungsi untuk merubah class aktif yang ada pada menu, dan mengarahkan halaman sesuai deangan menu yang di akses

  const [activeLink, setActiveLink] = React.useState<string>("/Home");
  const handleLinkClick = (target: string) => {
    setActiveLink(target);
  };

Script lengkapnya seperti berikut

import React from "react"

function App() {



  const [navClass, setNavClass] = React.useState<string>('');

  const scrollNavigation = () => {
    var scrollUp = document.documentElement.scrollTop;
    if (scrollUp >= 50) {
      setNavClass('is-sticky');
    } else {
      setNavClass('');
    }
  };


  React.useEffect(() => {
    window.addEventListener('scroll', scrollNavigation, true);
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

    return () => {
      window.removeEventListener('scroll', scrollNavigation, true);
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

    };
  }, []);



  const [activeLink, setActiveLink] = React.useState<string>("/Home");
  const handleLinkClick = (target: string) => {
    setActiveLink(target);
  };



  return (
    <React.Fragment>
      <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
        <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
          <div className="mx-auto">
            <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
              <li>
                <a href="#home"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Home")}
                >
                  Home</a>
              </li>
              <li>
                <a href="#features"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Features")}
                >
                  Layanan Kami</a>
              </li>
            </ul>
          </div>

        </div>
      </nav>
      <section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
        <div className="flex items-center justify-center h-full">
          HOME
        </div>
        </section>
      <section className="relative h-[800px] bg-green-600" id="features">
        <div className="flex items-center justify-center h-full">
          FEATURES
        </div>
      </section>
    </React.Fragment>
  )
}

export default App

ReactJS + Vite +Tailwind

ramadhan.dev — Thu, 10 Oct 2024 01:35:51 +0000

Di bagian ini kita akan belajar cara meintegrasikan Reactjs dengan
Tailwindcss

Tailwind CSS adalah sebuah framework utility-first untuk styling css yang memungkinkan membangun antarmuka pengguna (UI) secara cepat dan efisien dengan menggunakan kelas-kelas kecil yang bisa langsung digunakan dalam markup HTML

Untuk proses installasi anda bisa melihat artikel sebelumnya
Instalasi React & Vite

Instalasi Tailwind css

jalankan perintah berikut untuk menginstall keperluan

### yarn
yarn add -D tailwindcss postcss autoprefixer
### npm
npm install -D tailwindcss postcss autoprefixer

Buat file tailwind.config.js dan postcss.config.js deangan menjalankan perintah berikut

### yarn
yarn tailwindcss init -p

### npx
npx tailwindcss init -p

Buka file tailwind.config.js yang sudah di buat, dan rubah scriptnya menjadi seperti berikut, untuk mekonfigurasi file mana saya yang bisa menggunakan tailwindcss

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tambahkan tailwind css kedalam index.css, sebelumnya hapus semua css yang default yang ada di index.css dan app.css

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

Testing Aplikasi

jalankan aplikasi dengan perintah

### Yarn
yarn dev

### NPM 
npm run dev

update file app.tsx menjadi seperti berikut

function App() {

  return (
      <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white">
        <img
          className="w-full h-48 object-cover"
          src="https://via.placeholder.com/400x200"
          alt="Card Image"
        />
        <div className="p-6">
          <h2 className="text-2xl font-bold text-gray-800 mb-2">
            Card Title
          </h2>
          <p className="text-gray-600 mb-4">
            This is a description of the card. It gives a brief overview of the content or purpose of the card.
          </p>
          <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            Learn More
          </button>
        </div>
      </div>
  )
}

export default App

preview applikasi sesudah menggunakan tailwindcss

Kesimpulan:
Dengan langkah-langkah di atas, kamu dapat mengintegrasikan Tailwind CSS ke dalam aplikasi React yang dibuat menggunakan Vite, dan mulai membangun antarmuka pengguna yang modern dan responsif dengan cepat.

Terimakasih

Artikel ini adalah bagian dari seri Belajar React:

Bagian 1: Instalasi React & Vite