DEV Community: Nimra Kosar

Complete guide for router and controller with debugging

Nimra Kosar — Tue, 21 Oct 2025 11:03:24 +0000

1. What is a Router:

A router in backend frameworks (like Express.js) defines how your app responds to client requests (GET, POST, PUT, DELETE) on specific URLs.
It decides which controller function should handle a request.

Example concept:

Client → /api/users
Router → Finds a matching route → Calls UserController.getAllUsers

Purpose:

Organizes endpoints.
Keeps code modular and readable.
Separates routing logic from business logic.

2. What is a Controller

A controller contains the logic for handling requests.
It performs actions like:
Reading data from request (req.body, req.params)
Communicating with databases
Sending responses back to clients

Purpose:

Keep logic separate from routes.
Make debugging and updates easier.
Reuse business logic in different routes.

3. How Router and Controller Work Together

Router file defines the endpoint:

router.get('/users', getAllUsers);

Controller file defines the function:

const getAllUsers = (req, res) => {
  // logic to get users
};

When /users is requested, router calls the controller.

4. Structure Example

project/
│
├── routes/
│   └── userRoutes.js
│
├── controllers/
│   └── userController.js
│

userRoutes.js

import express from 'express';
import { getAllUsers, createUser } from '../controllers/userController.js';

const router = express.Router();

router.get('/', getAllUsers);
router.post('/', createUser);

export default router;

userController.js

export const getAllUsers = (req, res) => {
  try {
    res.status(200).json({ message: "Users fetched successfully" });
  } catch (error) {
    res.status(500).json({ message: "Error fetching users" });
  }
};

app.js

import express from 'express';
import userRoutes from './routes/userRoutes.js';

const app = express();
app.use(express.json());
app.use('/api/users', userRoutes);

app.listen(3000);

5. Debugging Techniques

Console Logging

Log req.body, req.params, req.query to verify data.

Example:

console.log("User ID:", req.params.id);

Use Debuggers

VS Code: Add breakpoints in controller files.

Run app in debug mode (node --inspect app.js).

Error Middleware
Add a global error handler:


app.use((err, req, res, next) => {
  console.error("Error:", err.message);
  res.status(500).json({ message: "Something went wrong" });
});

Test Routes

Use Postman or Thunder Client.
Send GET, POST, PUT, DELETE requests.
Check response codes (200, 400, 500).
CORS Check

Install CORS:

npm install cors

Use it:
import cors from 'cors';
app.use(cors());

Detailed Summary on react js

Nimra Kosar — Fri, 22 Aug 2025 23:30:41 +0000

2. Essential Tools and Technologies

Babel: Transpiles modern JavaScript (ES6+) and JSX into older JavaScript that browsers can understand.

** Webpack / Vite:**
Bundlers that compile, optimize, and package your code for deployment.
Webpack is highly configurable and ideal for large projects.
Vite is faster and simpler, better for small/medium projects or prototyping.

JSX:

Lets you write HTML-like syntax directly in JavaScript, making components easier to read and write.

3. ES6 Features for React

Modern React relies heavily on ES6 features:
let/const: Block-scoped variables.
Arrow functions: Shorter syntax and lexical this.
Classes: Useful for class-based components and structure.
Destructuring: Extract values from objects and arrays easily.
Spread & Rest operators: Copy, merge, or collect properties/values.
Promises & Async/Await: Handle asynchronous operations like API calls.
Modules: Import/export functions, classes, or variables to keep code modular.

Mastering these ES6 features is essential for writing clean, modern React code.

Core React Concepts

a) Components

Components are reusable building blocks of a UI. They can be:
Functional Components: Use functions to define UI; preferred with hooks.
Class Components: Use classes to manage state and lifecycle methods; older approach.

b) JSX

JSX allows you to write HTML directly inside JavaScript code. Example:
const Button = () => Click me;

c) Virtual DOM

React keeps an in-memory copy of the real DOM called the Virtual DOM.
When state changes, React compares the Virtual DOM to the real DOM (diffing algorithm) and updates only the changed elements.
This improves performance and avoids unnecessary re-rendering.

d) State & Props

State: Local data for a component. Changing state triggers re-render.
Props: Read-only data passed from parent to child components.

5. Hooks

Hooks let functional components handle state and lifecycle logic:
useState: Manage component state
useEffect: Handle side effects like API calls, subscriptions, or timers
useContext: Share global data without prop drilling
useReducer: Manage complex state logic
useRef: Access DOM elements or persist values
useMemo & useCallback: Optimize performance by memoizing values and functions

Hooks have largely replaced class components in modern React development.

6. Forms and User Input

Controlled Components: Form data is handled by React state; allows validation and complex logic.
Uncontrolled Components: Form data is handled by DOM using refs;simpler but less controls

Choosing between controlled and uncontrolled forms depends on complexity and validation requirements.

7. Routing with React Router DOM

React Router allows declarative client-side routing:
BrowserRouter: Wraps the app for routing
Route: Maps a URL path to a component
Link: Navigation without page reload
useParams, useLocation: Access URL parameters and route state

This is essential for SPAs to navigate seamlessly without full page reloads.

8. Build Tools: Webpack vs Vite

Webpack: Mature, flexible, highly configurable. Best for large projects needing optimized bundles.
Vite: Lightning-fast build times, simpler setup. Ideal for small projects or rapid prototyping.

9. Performance Optimization

Memoization: React.memo, useMemo, useCallback prevent unnecessary re-renders
Higher-Order Components (HOCs): Wrap components to add reusable behavior
Error Boundaries: Catch component errors to prevent entire app crashes

Optimizing components ensures smooth performance in large, dynamic applications.

10. State Management

For small apps: React state and context API are enough
For large apps: Redux provides centralized, predictable global state management
Supports debugging, testing, and better scalability

11. Mobile Development with React Native

Reuses React concepts to build cross-platform apps for iOS and Android
Single codebase for multiple platforms saves time and resources
Integrates with native components while using React's component-based architecture

12. Key Takeaways

ES6 syntax is crucial for clean, maintainable React code.
Component-based architecture makes UI modular, reusable, and easy to maintain.
Virtual DOM ensures high performance by minimizing direct DOM updates.
Hooks allow functional components to manage state and lifecycle efficiently.
React Router simplifies SPA navigation with dynamic routes.
Choosing the right build tool (Webpack vs Vite) depends on project size and speed needs.
Controlled vs uncontrolled forms affect developer control and UX.
Memoization, HOCs, and error boundaries improve performance and reliability.
Redux enables scalable state management for complex applications.
React Native extends React knowledge to mobile app development

Redux ka startup Year: 2015 Creators: Dan Abramov & Andrew Clark Inspiration: Facebook ka Flux architecture + Functional Programming ka concept called Elm architecture (Elm ek functional language hai).

Nimra Kosar — Sat, 16 Aug 2025 11:02:41 +0000

Nimra Kosar

Aug 16 '25

Redux in react

#webdev #programming #javascript #beginners

Comments 1

3 min read

Redux in react

Nimra Kosar — Sat, 16 Aug 2025 10:53:53 +0000

Redux in React:

A Beginner’s Guide that Doesn’t Waste Your Time
Why you should care (and when you shouldn’t)

For more detail visit this link:
https://nimracode.hashnode.dev/redux-in-react

1. What is Redux?

In React apps, managing data can sometimes get messy. Passing data to multiple components and keeping everything updated quickly becomes confusing.

👉 This is where Redux helps.
Redux gives you a single box (store) where all your data lives. Every component can directly read from or update this box.

Simple analogy:

React components = family members 👨‍👩‍👧‍👦

Redux store = fridge 🧊🍕

Whenever a member needs food (data), they grab it from the fridge. No need to constantly ask each other for it.

2. Why Use Redux?

Redux is useful when:

Your app gets large and passing props everywhere feels painful.

You want your data safe and centralized.

You want easier debugging and better control.

For small apps, Redux is not necessary. React’s useState or Context API is usually enough.

3. The 3 Main Parts of Redux

Redux = 3 key pieces:

Store → Where your data lives.

Actions → “What needs to be done” (e.g., add todo, delete todo).

Reducers → “How the data changes.”

The flow looks like this:

👉 Component → sends Action → Reducer updates data → Store holds new data → UI updates automatically.

Redux is for predictable global state — data that many components need (like auth user, shopping cart, theme, feature flags, cached server data).

If your app is small or state is local (like form fields or simple toggles), just use React state or Context. Don’t swing a hammer at a thumbtack.

Modern Redux = Redux Toolkit (RTK)

The old boilerplate is gone. If any tutorial tells you to write manual action types and giant switch reducers — walk away.

The Mental Model (30 Seconds)

Store: one object holding your app state.

Slice: a focused piece of the store (e.g., auth, todos) with reducers.

Action: a plain object describing “what happened.”

Reducer: pure function → (state, action) → newState.

Dispatch: send an action to update state.

Selector: read a piece of state (optionally memoized).

With RTK

Write slices with createSlice.

Handle async with createAsyncThunk.

Configure everything with configureStore.

Use React with Provider, useSelector, and useDispatch.

Project Setup (JS or TS)

# JavaScript
npm i @reduxjs/toolkit react-redux

# TypeScript (adds types automatically)
npm i @reduxjs/toolkit react-redux @types/react-redux

Folder Structure

src/
  app/
    store.ts
  features/
    counter/
      counterSlice.ts
      Counter.tsx
  main.tsx

Step 2: Create the Store

// store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Step 3: Create a Slice (Actions + Reducer together)

// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Step 4: Connect Store to the App

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Step 5: Use Redux in a Component

// Counter.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;

When to Use Redux

✅ For large apps (e-commerce, dashboards)
✅ When many components need the same data
✅ When you want state centralized and predictable

❌ For small apps (like a simple todo or counter), Redux is often overkill.

6. Recap for Beginners

Redux = a global fridge for your app data 🧊.

Three key concepts: Store, Actions, Reducers.

Redux Toolkit = easy syntax, less boilerplate.

Advice: Learn the basics, but only use Redux when it’s truly needed.