Building Modular, High-Performance Web Applications for Modern Businesses

// Example of a modular React component
import React, { useState } from 'react';
import './DataTable.css';

const DataTable = ({ data, columns, onRowSelect }) => {
  const [sortField, setSortField] = useState(null);
  const [sortDirection, setSortDirection] = useState('asc');

  const handleSort = (field) => {
    // Sorting logic here
  };

  return (
    <div className="data-table-container">
      <table className="data-table">
        <thead>
          {/* Table header rendering */}
        </thead>
        <tbody>
          {/* Table body rendering */}
        </tbody>
      </table>
    </div>
  );
};

export default DataTable;

// Example of React code splitting with lazy loading
import React, { lazy, Suspense } from 'react';

// Instead of importing directly
// import Dashboard from './Dashboard';

// Use lazy loading
const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Router>
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/reports" component={Reports} />
          <Route path="/settings" component={Settings} />
        </Router>
      </Suspense>
    </div>
  );
}

// DataTable.js - A reusable, modular component
import React, { useState, useEffect } from 'react';
import './DataTable.css';
import Pagination from './Pagination';
import SortIndicator from './SortIndicator';

const DataTable = ({
  data,
  columns,
  pageSize = 10,
  onRowClick,
  loading = false
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [sortField, setSortField] = useState(null);
  const [sortDirection, setSortDirection] = useState('asc');

  // Pagination logic
  const totalPages = Math.ceil(data.length / pageSize);
  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  // Handle sorting
  const handleSort = (field) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  return (
    <div className="data-table-container">
      {loading ? (
        <div className="loading-indicator">Loading...</div>
      ) : (
        <>
          <table className="data-table">
            <thead>
              <tr>
                {columns.map(column => (
                  <th
                    key={column.field}
                    onClick={() => handleSort(column.field)}
                  >
                    {column.header}
                    {sortField === column.field && (
                      <SortIndicator direction={sortDirection} />
                    )}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {paginatedData.map((row, index) => (
                <tr
                  key={index}
                  onClick={() => onRowClick && onRowClick(row)}
                >
                  {columns.map(column => (
                    <td key={column.field}>
                      {row[column.field]}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>

          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={setCurrentPage}
          />
        </>
      )}
    </div>
  );
};

export default DataTable;

/* Component-specific CSS with BEM methodology */
.data-table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 2rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table__header {
  background-color: var(--primary-light);
  color: var(--text-dark);
  font-weight: 600;
}

.data-table__row {
  border-bottom: 1px solid var(--border-color);
}

.data-table__row:hover {
  background-color: var(--hover-bg);
}

.data-table__cell {
  padding: 0.75rem 1rem;
  text-align: left;
}

.data-table__cell--numeric {
  text-align: right;
}

.data-table__cell--actions {
  width: 100px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .data-table__cell {
    padding: 0.5rem;
  }
}

// userSlice.js - A Redux Toolkit slice for modular state management
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import userService from '../services/userService';

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async (_, { rejectWithValue }) => {
    try {
      const response = await userService.getUsers();
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

const userSlice = createSlice({
  name: 'users',
  initialState: {
    data: [],
    loading: false,
    error: null,
    selectedUser: null
  },
  reducers: {
    selectUser: (state, action) => {
      state.selectedUser = action.payload;
    },
    clearSelectedUser: (state) => {
      state.selectedUser = null;
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export const { selectUser, clearSelectedUser } = userSlice.actions;
export default userSlice.reducer;