ReactJs for Fresher

ReactJS is a JavaScript library for building user interfaces from reusable components. Instead of creating an entire web page as one large block, React encourages developers to divide the interface into smaller components such as a navbar, search box, product card, login form, sidebar, table, or modal.

A fresher should not start React by memorizing Hooks or copying complete applications. The stronger path is to understand JavaScript first, learn how React renders components and manages state, and then gradually build applications involving APIs, routing, forms, reusable components, and real-world project structure.

This roadmap covers that complete path.

1. What Is ReactJS?

React is used to build interactive web and native user interfaces using components.

A component represents a reusable piece of UI.

For example, an e-commerce website may contain:

• Header
• SearchBar
• CategoryMenu
• ProductCard
• ProductList
• ShoppingCart
• LoginForm
• Footer

Each can be implemented as an independent React component and combined to build a complete application.

React itself focuses primarily on the UI layer. Applications commonly use other libraries or frameworks for areas such as routing, server communication, state management, authentication, and application architecture.

The official React documentation describes React as a library for building interfaces from components.

2. Why Should a Fresher Learn React?

React is useful when an application contains interactive UI that changes according to user actions or data.

Consider a shopping application.

When the user:

• searches for a product,
• changes a filter,
• adds an item to the cart,
• changes quantity,
• logs in,
• switches pages,
• submits a form,

the UI must respond to those changes.

React provides a structured way to manage these interactions.

Learning React also develops several transferable frontend skills:

• Component-based design
• State management
• Event-driven programming
• Working with APIs
• JavaScript modules
• Client-side routing
• Form handling
• Debugging UI applications
• Reusable code design
• Frontend architecture

3. What Should You Know Before React?

A beginner should first understand the technologies on which React depends.

HTML Fundamentals

Learn:

• HTML document structure
• Headings
• Paragraphs
• Links
• Images
• Lists
• Tables
• Forms
• Input types
• Buttons
• Labels
• Semantic HTML
• div and span
• id and class
• data attributes
• Basic accessibility

You should be able to create a normal HTML page before converting the same interface into React components.

CSS Fundamentals

Understand:

• Selectors
• Classes
• IDs
• Specificity
• Box model
• Margin
• Padding
• Border
• Width and height
• Display
• Position
• Flexbox
• CSS Grid
• Responsive design
• Media queries
• Pseudo-classes
• CSS variables

You do not need to become an advanced CSS specialist before React, but you should be comfortable designing basic responsive layouts.

4. JavaScript Knowledge Required Before React

JavaScript is the most important prerequisite.

A large percentage of beginner React problems are actually JavaScript problems.

Learn these topics properly before attempting advanced React concepts.

Variables

Understand:

• let
• const
• Scope
• Block scope
• Variable reassignment

Prefer const unless a variable needs reassignment.

Example:

const name = "Rahul";
let score = 10;
score = 20;

5. JavaScript Data Types

Understand:

• String
• Number
• Boolean
• Undefined
• Null
• Object
• Array
• Function

React applications continuously work with objects and arrays, especially when dealing with API responses and application state.

Example:

const user = {
    id: 101,
    name: "Amit",
    active: true
};

6. JavaScript Operators

Learn:

• Arithmetic operators
• Comparison operators
• Logical operators
• Assignment operators
• Ternary operator
• Optional chaining
• Nullish coalescing

The ternary operator appears frequently in conditional rendering.

Example:

const message = isLoggedIn ? "Welcome" : "Please Login";

7. Conditions

Understand:

• if
• else
• else if
• switch
• ternary operator
• logical AND

React uses normal JavaScript conditions to determine which UI should be displayed.

8. Loops

Learn:

• for
• while
• for...of
• forEach()
• map()
• filter()
• find()
• reduce()

For React development, map() is particularly important because lists of data are commonly converted into lists of components.

Example:

const products = ["Laptop", "Mobile", "Keyboard"];

const upperProducts = products.map(product => product.toUpperCase());

9. JavaScript Functions

Understand:

• Function declarations
• Function expressions
• Arrow functions
• Parameters
• Return values
• Callback functions
• Higher-order functions

Example:

const calculateTotal = (price, quantity) => {
    return price * quantity;
};

React components themselves are usually JavaScript functions.

10. Arrays

You should be comfortable with:

• Creating arrays
• Accessing elements
• Adding elements
• Removing elements
• Searching arrays
• Transforming arrays
• Copying arrays
• Array destructuring
• Spread syntax

Important methods include:

• map()
• filter()
• find()
• some()
• every()
• reduce()
• includes()
• slice()

Instead of modifying the existing array, create a new array.

Example:

const updatedUsers = [...users, newUser];

11. Objects

Understand:

• Object creation
• Property access
• Object methods
• Destructuring
• Spread syntax
• Nested objects

Example:

const user = {
    name: "Priya",
    city: "Pune"
};

const { name, city } = user;

React props are frequently destructured this way.

12. Destructuring

Destructuring makes React code easier to read.

Example:

const product = {
    name: "Laptop",
    price: 55000
};

const { name, price } = product;

Component example:

function ProductCard({ name, price }) {
    return <p>{name} - ₹{price}</p>;
}

13. Spread Operator

Spread syntax is heavily used when updating arrays and objects without mutating the original value.

Object example:

const updatedUser = {
    ...user,
    city: "Mumbai"
};

Array example:

const updatedItems = [...items, newItem];

This becomes especially important when updating React state.

14. JavaScript Modules

Modern React projects are divided into multiple files.

Learn:

• export
• export default
• import
• Named exports

Example:

export function calculateTotal() {
    // Logic
}

Import:

import { calculateTotal } from "./utils";

JavaScript modules allow applications to separate components, utility functions, services, constants, and other logic into maintainable files.

15. Promises and Async Programming

React applications frequently communicate with backend APIs.

Learn:

• Synchronous vs asynchronous execution
• Promise
• then()
• catch()
• finally()
• async
• await
• try/catch

Example:

async function loadUsers() {
    try {
        const response = await fetch("/api/users");
        const users = await response.json();
        console.log(users);
    } catch (error) {
        console.error(error);
    }
}

Promises represent the eventual result of asynchronous operations and form the basis of much modern JavaScript asynchronous code.

16. Fetch API

Learn how frontend applications communicate with backend servers.

Understand:

• GET
• POST
• PUT
• PATCH
• DELETE
• Request
• Response
• HTTP status codes
• JSON
• Headers
• Error handling

Example:

async function getProducts() {
    const response = await fetch("https://example.com/api/products");

    if (!response.ok) {
        throw new Error("Unable to load products");
    }

    return response.json();
}

One important detail is that fetch() does not automatically reject its Promise simply because an HTTP response has a status such as 404 or 500. Applications should inspect the response status or response.ok.

17. Learn Basic DOM Concepts

React manages much of the UI update process, but understanding the browser DOM helps you understand what React is solving.

Know:

• What DOM means
• Selecting elements
• Changing text
• Adding elements
• Removing elements
• Event listeners
• Form values
• Browser events

You do not need to write large applications using manual DOM manipulation before learning React.

18. Set Up the React Development Environment

Install:

• Node.js
• npm
• VS Code or another code editor
• Browser
• React Developer Tools
• Git

Node.js provides the runtime and tooling commonly used to install packages and run React development tools.

19. Create Your First React Project

For a simple client-side learning project, Vite provides an easy setup.

Example:

npm create vite@latest

Choose:

React
JavaScript

Then:

cd project-name
npm install
npm run dev

Vite provides a development server and production build workflow for modern frontend applications.

Create React App should not be the default choice for a new learning project because React officially deprecated it for new applications in February 2025.

20. Understand the React Project Structure

A small React application may look like:

src/
    components/
    pages/
    assets/
    services/
    hooks/
    utils/
    App.jsx
    main.jsx

Start simple.

Add folders when the application grows.

21. Understand main.jsx

The entry file attaches the React application to the HTML page.

Typical structure:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
    <StrictMode>
        <App />
    </StrictMode>
);

The important idea is:

HTML provides a root element.

React renders the application inside that element.

22. Components

Components are the foundation of React.

Example:

function Welcome() {
    return <h2>Welcome to React</h2>;
}

A component should normally:

• Have a clear responsibility
• Receive data through props when necessary
• Manage local state when necessary
• Return UI
• Remain reusable where practical

23. Component Naming

React component names begin with an uppercase letter.

Correct:

function ProductCard() {
    return <div>Product</div>;
}

Incorrect component naming:

function productCard() {
    return <div>Product</div>;
}

Lowercase JSX names are generally interpreted as built-in HTML elements.

24. JSX

JSX allows developers to describe UI using syntax that resembles HTML inside JavaScript.

Example:

function User() {
    const name = "Neha";

    return <h2>Hello {name}</h2>;
}

Inside {} you can use JavaScript expressions.

Examples:

<p>{user.name}</p>
<p>{price * quantity}</p>
<p>{isActive ? "Active" : "Inactive"}</p>

JSX is not simply an HTML file placed inside JavaScript. It follows React and JavaScript rules.

25. JSX Rules

Important beginner rules include:

• Return valid JSX structure
• Use className instead of HTML class
• Close appropriate tags
• Use camelCase for many DOM properties
• JavaScript expressions go inside {}

Example:

function Profile() {
    return (
        <>
            <h1 className="title">Profile</h1>
            <p>React Developer</p>
        </>
    );
}

26. React Fragments

Fragments allow multiple sibling elements without adding an unnecessary DOM wrapper.

Example:

return (
    <>
        <h2>Products</h2>
        <p>Available products</p>
    </>
);

Use a normal element such as <section> when the wrapper has semantic or styling value.

27. Props

Props allow a parent component to send information to a child component.

Example:

function ProductCard({ name, price }) {
    return (
        <div>
            <h3>{name}</h3>
            <p>₹{price}</p>
        </div>
    );
}

Usage:

<ProductCard name="Laptop" price={55000} />

Think of props as component inputs.

A child should not directly modify values received as props.

28. Props vs State

This distinction is fundamental.

Props

Props come from another component.

Example:

<User name="Rahul" />

State

State belongs to the component that manages it.

Example:

const [count, setCount] = useState(0);

Use props to communicate data.

Use state when information needs to be remembered and changed over time.

29. Event Handling

React responds to browser interactions using event handlers.

Example:

function Button() {
    function handleClick() {
        console.log("Button clicked");
    }

    return <button onClick={handleClick}>Save</button>;
}

Learn events such as:

• onClick
• onChange
• onSubmit
• onFocus
• onBlur
• onKeyDown
• onMouseEnter

onClick={handleClick()}

when you mean to pass the function for React to call later.

Usually use:

onClick={handleClick}

30. State and useState

State allows a component to remember information between renders.

Example:

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}

Calling the setter requests another render with updated state.

The official React documentation describes state as a component's memory and explains that Hooks such as useState connect components to React features.

31. Understand State as a Snapshot

One of the most useful React mental models is that each render receives a snapshot of state.

Consider:

setCount(count + 1);
console.log(count);

A beginner may expect count to immediately contain the new value.

That is not how state should be understood.

The current event handler belongs to a particular render and sees that render's state snapshot. Calling the setter requests a future render.

This concept explains many React state bugs.

32. Functional State Updates

When the next state depends on the previous state, use the updater form.

Example:

setCount(previousCount => previousCount + 1);

This is particularly useful when multiple state updates can be queued.

React processes updater functions using the previous queued state value.

33. Updating Objects in State

Incorrect:

user.name = "Amit";
setUser(user);

Prefer:

setUser({
    ...user,
    name: "Amit"
});

React code is easier to reason about when existing state objects are treated as immutable.

34. Updating Arrays in State

users.push(newUser);

Prefer:

setUsers([...users, newUser]);

For deletion:

setUsers(users.filter(user => user.id !== id));

For update:

setUsers(
    users.map(user =>
        user.id === id
            ? { ...user, active: true }
            : user
    )
);

These patterns appear constantly in real React applications.

35. Conditional Rendering

Applications frequently display UI based on conditions.

Example:

function Dashboard({ loggedIn }) {
    if (!loggedIn) {
        return <p>Please login</p>;
    }

    return <h2>Dashboard</h2>;
}

Ternary example:

<p>{isAdmin ? "Administrator" : "User"}</p>

AND example:

{hasError && <p>Something went wrong</p>}

React uses standard JavaScript control flow for conditional UI.

36. Rendering Lists

React applications commonly receive arrays from APIs.

Example:

const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Keyboard" }
];

return (
    <div>
        {products.map(product => (
            <ProductCard
                key={product.id}
                name={product.name}
            />
        ))}
    </div>
);

map() and filter() are core JavaScript operations used for list rendering.

37. Understand React Keys

Each element generated from a list needs a stable key.

Prefer:

key={product.id}

A key helps React identify which list item corresponds to which rendered component.

A database ID or another stable unique identifier is usually preferable.

38. Forms in React

Forms are central to practical frontend development.

Learn:

• Text input
• Number input
• Email
• Password
• Radio button
• Checkbox
• Select
• Textarea
• Submit
• Validation
• Error messages
• Multiple fields

Simple controlled input:

import { useState } from "react";

function LoginForm() {
    const [email, setEmail] = useState("");

    return (
        <input
            type="email"
            value={email}
            onChange={event => setEmail(event.target.value)}
        />
    );
}

39. Controlled Components

A controlled form field gets its current value from React state.

Example:

const [name, setName] = useState("");

<input
    value={name}
    onChange={event => setName(event.target.value)}
/>

Advantages include predictable access to current values and straightforward validation.

40. Form Submission

Example:

function handleSubmit(event) {
    event.preventDefault();

    console.log(formData);
}

return (
    <form onSubmit={handleSubmit}>
        <button type="submit">Register</button>
    </form>
);

Understand why preventDefault() may be used when handling traditional browser form submission yourself.

41. Form Validation

Validate according to application requirements.

Examples:

• Required fields
• Correct email format
• Password rules
• Numeric ranges
• Matching passwords
• Character limits
• Server-side validation errors

Client-side validation improves user experience, but security-sensitive validation must also be performed by the server. A user can bypass frontend code.

42. Component Communication

Understand four common situations.

Parent to Child

Use props.

Child to Parent

Pass a function from the parent.

Example:

function Parent() {
    function handleSave(value) {
        console.log(value);
    }

    return <Child onSave={handleSave} />;
}

Sibling to Sibling

Usually move shared state to their closest common parent.

Deeply Shared Data

Context may be appropriate.

React calls the process of moving shared state into the nearest common parent "lifting state up."

43. Lifting State Up

Imagine two components need the same selected product.

Instead:

Parent
   ├── ProductList
   └── ProductDetails

Store selectedProduct in Parent.

Pass the value and handlers to the children.

This creates a clear source of truth.

44. Designing Good State

Poor state design creates unnecessary bugs.

Good principles include:

• Group state that changes together when appropriate
• Avoid contradictory state
• Avoid duplicate state
• Avoid redundant state
• Calculate values when they can be derived from existing state

Example of unnecessary state:

const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [fullName, setFullName] = useState("");

fullName can normally be calculated:

const fullName = `${firstName} ${lastName}`;

React's official guidance similarly recommends avoiding redundant and duplicated state.

45. useEffect

useEffect is one of the most misunderstood React Hooks.

Effects are intended for synchronizing a component with systems outside React.

Examples may include:

• Network communication
• Browser APIs
• Subscriptions
• Timers
• Third-party widgets

Example:

import { useEffect } from "react";

useEffect(() => {
    document.title = "Dashboard";
}, []);

React describes Effects as a mechanism for synchronizing components with external systems.

46. useEffect Dependency Array

Three patterns should be understood.

Runs after relevant renders:

useEffect(() => {
    // Synchronization
});

Runs with an empty dependency list according to the Effect lifecycle:

useEffect(() => {
    // Synchronization
}, []);

Re-synchronizes when dependencies change:

useEffect(() => {
    // Synchronization using userId
}, [userId]);

React's linting rules are designed to identify reactive values that belong in the dependency list.

47. Effect Cleanup

Some Effects create resources that should be cleaned up.

Example:

useEffect(() => {
    const timer = setInterval(() => {
        console.log("Running");
    }, 1000);

    return () => {
        clearInterval(timer);
    };
}, []);

Cleanup is relevant for things such as:

• Timers
• Event listeners
• Subscriptions
• Connections
• Certain asynchronous workflows

Think in terms of starting synchronization and later stopping it.

48. Avoid Unnecessary Effects

A frequent beginner mistake is putting normal calculations inside useEffect.

Suppose:

const total = price * quantity;

You usually do not need:

useEffect(() => {
    setTotal(price * quantity);
}, [price, quantity]);

If a value can simply be calculated while rendering, calculate it.

Using fewer unnecessary Effects often makes React applications easier to understand.

49. API Calling in React

A beginner should learn the full API lifecycle.

Your UI should account for:

• Initial state
• Loading
• Success
• Empty result
• Error

Example structure:

const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");

A professional UI should not assume every network request succeeds immediately.

50. Basic API Example

useEffect(() => {
    async function loadProducts() {
        try {
            const response = await fetch("/api/products");

            if (!response.ok) {
                throw new Error("Unable to load products");
            }

            const data = await response.json();
            setProducts(data);
        } catch (error) {
            setError(error.message);
        } finally {
            setLoading(false);
        }
    }

    loadProducts();
}, []);

For learning purposes this demonstrates the basic process clearly.

As applications become larger, data-fetching responsibilities may move into route loaders, custom hooks, service functions, or dedicated server-state libraries depending on the architecture.

51. CRUD Operations

Every React fresher should build at least one CRUD application.

CRUD means:

• Create
• Read
• Update
• Delete

Example project:

Employee Management System

Features:

• Display employees
• Add employee
• View employee
• Edit employee
• Delete employee
• Search employees
• Filter departments
• Validate forms

CRUD projects force you to combine components, forms, state, APIs, routing, and error handling.

52. useRef

useRef stores a reference that does not need to trigger rendering when changed.

Common use cases include:

• Referencing DOM elements
• Focusing an input
• Storing timer IDs
• Keeping non-rendered mutable values

Example:

import { useRef } from "react";

function SearchBox() {
    const inputRef = useRef(null);

    function focusInput() {
        inputRef.current.focus();
    }

    return (
        <>
            <input ref={inputRef} />
            <button onClick={focusInput}>
                Focus
            </button>
        </>
    );
}

React describes useRef as a Hook for referencing values not required for rendering.

53. useContext

Context lets components access shared information without manually passing the same prop through every intermediate component.

Possible examples:

• Theme
• Current authenticated user
• Language
• Application preferences

Basic idea:

const ThemeContext = createContext(null);

Provider:

<ThemeContext.Provider value={theme}>
    <App />
</ThemeContext.Provider>

Consumer:

const theme = useContext(ThemeContext);

useContext reads and subscribes to a context value.

54. Prop Drilling

Prop drilling occurs when data is passed through several intermediate components mainly so that a deeply nested component can receive it.

Example:

App
  ↓
Layout
  ↓
Sidebar
  ↓
UserProfile

Prop drilling is not automatically a problem.

For small component trees, props are simple and explicit.

Consider Context when data genuinely belongs to a wider section of the application.

55. useReducer

useReducer can make complex state transitions easier to organize.

Instead of scattering many setters:

setLoading(...)
setError(...)
setData(...)

a reducer can describe transitions using actions.

Basic form:

const [state, dispatch] = useReducer(reducer, initialState);

Reducer:

function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return {
                ...state,
                count: state.count + 1
            };
        default:
            return state;
    }
}

A reducer should be pure and return the next state based on the current state and action.

Learn useState thoroughly before useReducer.

56. Custom Hooks

Custom Hooks allow reusable stateful logic to be extracted from components.

Example idea:

useFetch()
useAuth()
useDebounce()
useLocalStorage()

A custom Hook is useful when multiple components need the same React-related behavior.

Extract logic when there is meaningful reuse or separation of responsibility.

57. Routing

Real applications normally have multiple URLs.

Examples:

/
/login
/products
/products/101
/cart
/profile

React itself does not require one particular router.

React Router is one commonly used routing solution and supports declarative, data, and framework modes.

For a fresher learning a normal client-side React application, start with basic declarative routing.

58. Basic Routing Concepts

Learn:

• BrowserRouter
• Routes
• Route
• Link
• NavLink
• URL parameters
• Nested routes
• Not-found route
• Programmatic navigation
• Query parameters

Conceptual example:

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/products" element={<Products />} />
    <Route path="/products/:id" element={<ProductDetails />} />
    <Route path="*" element={<NotFound />} />
</Routes>

Declarative routing maps URL patterns to React UI.

59. Dynamic Route Parameters

Consider:

/products/101

Here 101 represents a product identifier.

The same page component can display different products depending on the URL.

This pattern is common in:

• Product details
• User profiles
• Blog articles
• Course pages
• Employee details

Understanding route parameters is required for practical CRUD applications.

60. Navigation

Users should normally navigate using router-aware links rather than forcing complete page reloads.

Learn the difference between:

• Internal application navigation
• External website links
• Programmatic redirects
• Browser history

61. Protected Routes

Some pages should only be available to authenticated users.

Examples:

• Dashboard
• Profile
• Orders
• Admin panel

A protected route may check authentication state before rendering a page.

However, frontend route protection is not a security boundary by itself.

Backend APIs must independently verify authentication and authorization.

Hiding an admin button in React does not make an API secure.

62. Authentication Fundamentals

A frontend React developer should understand the overall authentication flow.

Typical process:

Login Form
    ↓
Backend API
    ↓
Credentials Verified
    ↓
Session or Token
    ↓
Authenticated Requests
    ↓
Protected UI

Learn concepts such as:

• Login
• Logout
• Current user
• Authentication
• Authorization
• Sessions
• Tokens
• Expiration
• Protected API requests

63. State Management Categories

Before choosing a library, understand what kind of state you have.

Local UI State

Examples:

• Modal open
• Input value
• Selected tab

Often use useState.

Shared Client State

Examples:

• Theme
• Some authentication-related UI state
• Application preferences

Context or another state solution may be appropriate.

URL State

Examples:

?page=2
?sort=price
?search=laptop

Often belongs in the URL.

Server State

Examples:

• Products
• Orders
• Users
• Transactions

This data ultimately comes from a server.

Distinguishing these categories prevents unnecessary global state.

64. Redux and Other State Libraries

First master:

• useState
• Props
• Lifting state
• Context
• useReducer

Then learn an external state library when the project actually benefits from it.

For job preparation, familiarity with Redux may still be useful because many existing React applications use it.

Focus on understanding:

• Store
• State
• Action
• Reducer
• Selector
• Dispatch
• Immutable updates
• Async operations

65. Server-State Libraries

Larger applications may use specialized libraries for remote data.

A server-state solution can help manage areas such as:

• Fetching
• Caching
• Refetching
• Mutation
• Loading state
• Stale data
• Request deduplication

TanStack Query is one example commonly used for this category.

A fresher does not need it before understanding normal API calls.

Learn the underlying problem first.

66. Styling React Applications

You can style React using several approaches.

Examples:

• Plain CSS
• CSS Modules
• Utility-first CSS frameworks
• Component libraries
• CSS-in-JS solutions

For beginners, plain CSS is sufficient.

Example:

import "./ProductCard.css";

Then:

function ProductCard() {
    return <div className="product-card">Product</div>;
}

Learn React separately from styling libraries so you know which technology is responsible for what.

67. Responsive Design

A frontend developer should be able to build pages that work on:

• Desktop
• Laptop
• Tablet
• Mobile

Practice:

• Flexible widths
• CSS Grid
• Flexbox
• Media queries
• Responsive navigation
• Responsive tables
• Responsive forms
• Responsive cards

A React application that works only at one screen size is incomplete frontend work.

68. Reusable Component Design

Good reusable components expose what needs to vary through props.

Instead of:

function RedButton() {
    return <button className="red">Save</button>;
}

you may create:

function Button({ children, variant, onClick }) {
    return (
        <button
            className={`button ${variant}`}
            onClick={onClick}
        >
            {children}
        </button>
    );
}

Reuse should reduce duplication without making components unnecessarily abstract.

69. Component Composition

Composition means combining smaller components into larger interfaces.

Example:

<Card>
    <ProductImage />
    <ProductInformation />
    <AddToCartButton />
</Card>

Composition is often preferable to creating giant components with many unrelated responsibilities.

70. Folder Structure

A beginner project might start with:

src/
    components/
    pages/
    services/
    hooks/
    utils/
    assets/
    App.jsx
    main.jsx

A larger feature-based project might use:

src/
    features/
        auth/
        products/
        cart/
        orders/
    shared/
        components/
        hooks/
        utils/

There is no universal folder structure suitable for every React application.

Choose a structure that makes related code easy to locate.

71. Service Layer

Example:

services/
    productService.js
    userService.js
    orderService.js

Possible service:

export async function getProducts() {
    const response = await fetch("/api/products");

    if (!response.ok) {
        throw new Error("Unable to fetch products");
    }

    return response.json();
}

Separating communication code can improve maintainability as the project grows.

72. Environment Variables

Environment-specific values may include:

• API base URL
• Public analytics identifiers
• Feature settings

Vite exposes client-side environment values through import.meta.env using its environment-variable conventions.

Anything delivered to the browser must be treated as potentially visible to the user.

73. Loading States

Bad UX:

User clicks "Load Products" and nothing appears to happen.

Better:

if (loading) {
    return <p>Loading products...</p>;
}

More polished applications may use:

• Skeleton loaders
• Spinners
• Disabled buttons
• Progress indicators

Loading state should accurately communicate what the application is doing.

74. Error States

Handle:

• Network failure
• Invalid server response
• 401 Unauthorized
• 403 Forbidden
• 404 Not Found
• Server errors
• Validation errors
• Empty responses

Example:

if (error) {
    return <p>{error}</p>;
}

For production applications, user-facing errors should generally be understandable rather than exposing technical stack traces.

75. Empty States

An empty result is different from an error.

Example:

if (products.length === 0) {
    return <p>No products found.</p>;
}

Useful empty states occur in:

• Search results
• Shopping carts
• Notifications
• Orders
• Messages
• Tables

Handling empty states makes projects feel much closer to real applications.

76. Search

Practice implementing:

• Search input
• Case-insensitive search
• Debounced search
• Backend search
• Search result count
• Clear search
• Empty results

Search is a good exercise for understanding controlled inputs and derived data.

77. Filtering

Example filters:

• Category
• Price
• Status
• Date
• Department
• Rating

78. Sorting

Practice:

• Price low to high
• Price high to low
• Name A-Z
• Date newest first
• Date oldest first

Understand JavaScript array sorting and the implications of mutating arrays.

Create copies when necessary before sorting state-derived arrays.

79. Pagination

Learn:

• Current page
• Page size
• Total records
• Total pages
• Previous
• Next
• Server-side pagination
• Client-side pagination

For large datasets, server-side pagination is usually more appropriate than downloading every record only to display a small subset.

80. Modal Dialogs

Build reusable modals for:

• Confirmation
• Edit form
• Delete confirmation
• Product preview

Consider:

• Close button
• Escape key
• Focus management
• Background interaction
• Accessibility

A modal is more than an absolutely positioned <div>.

81. Accessibility

Frontend developers should understand basic web accessibility.

Practice:

• Semantic HTML
• Correct labels
• Keyboard navigation
• Focus states
• Alt text
• Button semantics
• Form error association
• Heading hierarchy
• Accessible modal behavior

React does not remove the need to understand HTML accessibility.

82. Performance Fundamentals

First identify actual performance problems.

Learn concepts such as:

• Unnecessary renders
• Expensive calculations
• Large lists
• Code splitting
• Lazy loading
• Network payload
• Image optimization

React provides APIs such as memo, useMemo, and useCallback, but they should be applied based on a concrete optimization need rather than automatically. React's current documentation also notes that React Compiler can automatically memoize values and functions in applications using the compiler, reducing some need for manual memoization.

83. React.memo

memo may allow React to skip a component render when its props have not changed in a relevant way.

Memoization itself has complexity and comparison costs.

Measure before optimizing.

84. useMemo

useMemo caches the result of a calculation between renders according to its dependencies.

Conceptual example:

const filteredProducts = useMemo(() => {
    return expensiveFilter(products, search);
}, [products, search]);

It is primarily an optimization tool, not a replacement for ordinary variables.

85. useCallback

useCallback can cache a function definition according to its dependencies.

It may be useful in certain memoization scenarios or when stable function identity matters.

Understand the problem before applying the optimization.

86. Lazy Loading

Large applications can avoid loading every page component immediately.

Conceptual example:

const AdminPage = lazy(() => import("./pages/AdminPage"));

Dynamic import() allows an ECMAScript module to be loaded asynchronously.

Lazy loading becomes useful as applications grow.

87. Error Boundaries

Understand the concept of error boundaries even if you do not use them in your first project.

A rendering error inside one section of an application should not necessarily destroy the entire user experience.

Learn:

• Error fallback UI
• Error reporting
• Component failure isolation

They solve different problems.

88. Testing

A fresher should understand why frontend code is tested.

Learn three levels conceptually.

Unit Testing

Test small functions or isolated logic.

Component Testing

Test component behavior.

Examples:

• Button triggers expected action
• Validation message appears
• Data appears after loading

Integration Testing

Test several pieces working together.

Focus on user-visible behavior rather than testing implementation details unnecessarily.

89. What Should You Test?

Useful tests include:

• Form validation
• User interactions
• Conditional UI
• Loading states
• Error states
• Search
• Cart calculations
• Authentication-dependent UI
• Important business logic

Testing every trivial line is not the objective.

Focus on behavior where failure would matter.

90. Git and GitHub

A React fresher should know Git.

Learn:

• git init
• git status
• git add
• git commit
• git branch
• git switch
• git merge
• git pull
• git push
• .gitignore

Also understand:

• Repository
• Branch
• Commit
• Merge conflict
• Pull request

Projects should be available in a clean Git repository when used as portfolio evidence.

91. Browser Developer Tools

Learn to debug instead of randomly changing code.

Use browser developer tools for:

• Console
• Network requests
• Elements
• CSS inspection
• Storage
• Performance analysis

When API data does not appear, inspect the Network tab.

When CSS does not apply, inspect the Elements and Styles panels.

When JavaScript crashes, read the actual console error.

92. React Developer Tools

Use React Developer Tools to inspect:

• Component tree
• Props
• State
• Component relationships
• Rendering behavior

Understanding your component tree is far more productive than adding console.log() everywhere.

93. Common React Fresher Mistakes

Learning React Before JavaScript

Result: every React problem appears difficult.

Fix: strengthen JavaScript fundamentals.

Mutating State

Incorrect:

users.push(user);

Fix:

setUsers([...users, user]);

Misusing useEffect

Missing Keys

Use stable keys when rendering lists.

Using Array Index as Every Key

Creating Giant Components

Split components based on responsibility.

Creating Too Many Components

Copying Projects Without Understanding

Build features yourself.

Installing Libraries for Simple Problems

Understand native React and JavaScript first.

Ignoring Error Handling

APIs fail.

Ignoring Loading States

Network operations take time.

Ignoring Mobile Layout

Frontend applications must work across screen sizes.

Storing Everything Globally

Most state does not need global state management.

Memorizing Hooks

Understand the problem each Hook solves.

94. TypeScript After React Fundamentals

Once comfortable with JavaScript React, learn TypeScript.

Important concepts:

• Primitive types
• Arrays
• Objects
• Interfaces
• Type aliases
• Union types
• Optional properties
• Function parameter types
• Return types
• Generics
• React props typing
• Event typing

Example idea:

type ProductProps = {
    name: string;
    price: number;
};

function ProductCard({ name, price }: ProductProps) {
    return <p>{name}: {price}</p>;
}

A fresher does not need TypeScript before understanding basic React, but many professional frontend codebases use it, so it is valuable for job preparation.

95. React and Backend Development

React normally runs on the user-facing side of an application.

A backend may be built using technologies such as:

• Node.js
• Java
• Spring Boot
• .NET
• Python
• PHP
• Go

React does not care which backend technology generated the HTTP API as long as the frontend and backend communicate through an agreed interface.

For example:

React
   ↓
HTTP / JSON
   ↓
Spring Boot
   ↓
Database

A Java developer can therefore use React as the frontend and Spring Boot as the backend.

96. Learn HTTP Fundamentals

Frontend developers should understand:

• Request
• Response
• URL
• Query parameter
• Path parameter
• HTTP method
• Headers
• Request body
• Response body
• JSON
• Status codes
• Authentication headers
• CORS

React knowledge alone is insufficient for debugging frontend-backend communication.

97. Understand CORS

CORS problems occur when browser security rules restrict certain cross-origin requests.

Understand:

• Frontend origin
• Backend origin
• Allowed origins
• Allowed methods
• Allowed headers
• Credentials

CORS configuration usually belongs primarily on the server side.

98. Security Basics for React Developers

Learn basic frontend security concepts.

Pay attention to:

• Exposing secrets
• Authentication tokens
• Authorization
• User-generated HTML
• XSS
• Unsafe third-party packages
• Sensitive data in browser storage
• HTTPS
• Secure backend validation

Never assume client-side validation or hidden UI controls provide security.

Anything running in the user's browser can potentially be inspected or manipulated.

99. Build Project 1 – Counter and Basic Components

Features:

• Counter
• Increase
• Decrease
• Reset
• Conditional message
• Reusable button component

Learn:

• Components
• Props
• State
• Events

100. Build Project 2 – Todo Application

Features:

• Add task
• Edit task
• Delete task
• Mark completed
• Filter completed
• Filter pending
• Task count
• Local persistence

Concepts:

• State
• Forms
• Array updates
• Conditional rendering
• Filtering
• Component communication

101. Build Project 3 – Product Explorer

Features:

• Product cards
• API data
• Search
• Category filters
• Sorting
• Loading
• Errors
• Product details
• Routing

This introduces realistic API-driven UI.

102. Build Project 4 – Employee Management CRUD

Features:

• Employee list
• Add employee
• View details
• Edit employee
• Delete employee
• Search
• Pagination
• Validation
• Backend API integration

This is a strong fresher project because CRUD operations appear in many business applications.

103. Build Project 5 – E-Commerce Frontend

Possible features:

• Product listing
• Product detail page
• Search
• Filters
• Sorting
• Cart
• Quantity update
• Wishlist
• Login UI
• Checkout UI
• Order history
• Responsive design

Focus on application architecture rather than producing dozens of decorative pages.

104. Build Project 6 – Admin Dashboard

Features:

• Login
• Sidebar
• Dashboard cards
• Users table
• Search
• Filters
• Pagination
• Forms
• Charts
• Status badges
• Responsive sidebar
• Role-based UI

A dashboard exposes you to layouts commonly found in business software.

105. Portfolio Project Quality Checklist

Before putting a React project on your resume, verify:

• Project runs successfully
• No major console errors
• No broken links
• Responsive layout
• Loading states exist
• Error states exist
• Forms validate properly
• Components are reasonably organized
• Meaningful file names
• No unused code
• No exposed secrets
• README explains setup
• Git history is reasonably clean
• Live demo works if provided
• Repository contains actual original implementation
• Project solves a clear problem

Three well-developed projects are usually more useful as evidence of ability than twenty cloned mini-projects.

106. Deployment

Learn how a React application moves from development to production.

For a Vite application:

npm run build

Vite builds production-ready static assets into its output directory for deployment.

Learn concepts such as:

• Production build
• Environment configuration
• Static hosting
• SPA routing configuration
• HTTPS
• Domain
• Cache
• Deployment logs

A project is not truly finished until someone else can run or access it successfully.

107. React Development Workflow in a Real Project

A typical feature may follow this flow:

Requirement
    ↓
Understand UI
    ↓
Identify Components
    ↓
Identify State
    ↓
Define API Requirements
    ↓
Build UI
    ↓
Add Events
    ↓
Connect API
    ↓
Handle Loading
    ↓
Handle Errors
    ↓
Validate
    ↓
Test
    ↓
Review
    ↓
Deploy

Thinking in this sequence is more useful than trying to remember Hook definitions.

108. How to Read an Existing React Project

When joining a company, you may not build an application from zero.

Start by locating:

1. package.json
2. Application entry point
3. App/root component
4. Routing
5. Main layout
6. Feature folders
7. State management
8. API/service layer
9. Authentication flow
10. Shared components
11. Environment configuration
12. Tests

Then trace one feature from UI to API.

For example:

ProductPage
    ↓
ProductList
    ↓
useProducts
    ↓
productService
    ↓
API

This is an effective way to understand unfamiliar frontend architecture.

109. package.json

A React developer should know what package.json represents.

Understand:

• Project metadata
• Scripts
• Dependencies
• Development dependencies
• Package versions

Understand the dependency causing the issue before changing it.

110. npm Fundamentals

Learn:

npm install
npm install package-name
npm uninstall package-name
npm run dev
npm run build

Also understand:

• node_modules
• package.json
• Lock file
• Dependency
• Dev dependency

111. ESLint and Code Quality

A linter identifies suspicious or inconsistent code patterns.

Pay attention to warnings rather than disabling rules immediately.

React linting can identify problems such as incorrect Effect dependencies and Hook usage.

Good code quality habits include:

• Meaningful variable names
• Small focused functions
• Clear component responsibilities
• Removing dead code
• Consistent formatting
• Handling errors
• Avoiding duplicated logic

112. Rules of Hooks

Hooks should be called according to React's Hook rules.

In normal React code:

• Call Hooks at the top level
• Call Hooks from React components or custom Hooks

if (loggedIn) {
    useEffect(() => {
        // Incorrect pattern
    }, []);
}

Keep Hook call order predictable.

113. Render and Commit Mental Model

React UI updates can be understood broadly as:

1. Something triggers a render.
2. React evaluates components to determine the UI.
3. React commits the required changes.

Rendering does not simply mean "the browser changed the DOM."

React first calculates what the UI should be before committing relevant updates.

Understanding this model helps explain state, Effects, and performance behavior.

114. What a React Fresher Must Know for Interviews

Prepare these concepts thoroughly:

• What React is
• Component
• JSX
• Props
• State
• Props vs state
• Event handling
• Conditional rendering
• Lists
• Keys
• useState
• State immutability
• useEffect
• Effect cleanup
• Dependency array
• useRef
• useContext
• useReducer
• Custom Hooks
• Controlled components
• Lifting state
• Routing
• API calls
• Loading and error handling
• Authentication basics
• Redux fundamentals
• Memoization
• React.memo
• useMemo
• useCallback
• Lazy loading
• Error boundaries
• Virtual DOM concept
• Rendering
• Reconciliation concept
• Component lifecycle concepts
• Testing basics
• JavaScript fundamentals

For fresher interviews, strong JavaScript understanding can be just as important as React-specific knowledge.

115. JavaScript Topics Frequently Asked with React

Prepare:

• var vs let vs const
• == vs ===
• null vs undefined
• Hoisting
• Scope
• Closures
• Callback
• Promise
• async/await
• Event loop basics
• map()
• filter()
• reduce()
• Destructuring
• Spread operator
• Rest parameter
• Arrow functions
• Objects
• Arrays
• Shallow copy
• Modules
• Optional chaining
• ES modules

If these are weak, advanced React preparation will not compensate for the gap.

116. React Coding Problems for Freshers

Practice building small features without following tutorials:

• Counter
• Toggle button
• Character counter
• Password visibility
• Todo list
• Search filter
• Dropdown
• Tabs
• Accordion
• Modal
• Pagination
• Product filter
• Shopping cart
• Stopwatch
• Form validation
• API user list
• Editable table
• Star rating
• Autocomplete search
• Theme switcher

The objective is to convert requirements into state, events, data transformations, and components.

117. React Interview Project Questions

Be prepared to explain your project in detail.

Possible questions include:

• Why did you choose React?
• How did you structure components?
• Where did your data come from?
• How did you call the API?
• How did you handle API failures?
• How did you implement authentication?
• How did you manage shared state?
• How did you validate forms?
• How did you implement routing?
• How did you protect routes?
• How did you handle responsive design?
• What difficult bug did you solve?
• What would you improve next?
• Why did you choose a particular library?

If you cannot explain your own project, interviewers may assume it was copied.

118. React Learning Order for a Fresher

Follow this sequence:

Stage 1 – Web Foundation

Learn:

Stage 2 – Modern JavaScript

Learn:

Stage 3 – React Fundamentals

Learn:

Stage 4 – Component Interaction

Learn:

Stage 5 – Hooks

Learn:

Stage 6 – Application Development

Learn:

Stage 7 – Architecture

Learn:

Stage 8 – Production Skills

Learn:

Stage 9 – Professional Development

Learn:

Stage 10 – Interview Preparation

Practice:

119. 12-Week ReactJS Fresher Roadmap

Week 1 – HTML and CSS

Practice:

• Semantic HTML
• Forms
• Flexbox
• Grid
• Responsive design

Build one responsive static website.

Week 2 – JavaScript Fundamentals

Practice:

• Variables
• Conditions
• Loops
• Functions
• Arrays
• Objects

Solve small JavaScript problems daily.

Week 3 – Modern JavaScript

Learn:

• map
• filter
• reduce
• Destructuring
• Spread
• Modules
• Promises
• async/await
• Fetch

Build a JavaScript API project.

Week 4 – React Basics

Learn:

• Setup
• Components
• JSX
• Props
• Events

Build reusable UI components.

Week 5 – State

Learn:

• useState
• Forms
• Conditional rendering
• Lists
• Keys
• State updates

Build Todo Application.

Week 6 – Effects and APIs

Learn:

• useEffect
• Cleanup
• Fetch
• Loading
• Error handling

Build API-based Product Explorer.

Week 7 – Routing

Learn:

• Routes
• Links
• Parameters
• Nested UI concepts
• Not-found page
• Protected page concepts

Build a multipage SPA.

Week 8 – Advanced State

Learn:

• Lifting state
• Context
• useReducer
• Custom Hooks

Improve earlier projects.

Week 9 – CRUD Application

Create a complete employee, student, inventory, or task management system connected to an API.

Week 10 – Professional Skills

Learn:

• Git
• GitHub
• Testing basics
• Accessibility
• Security
• Deployment

Deploy at least one complete project.

Week 11 – TypeScript and State Management

Learn basic TypeScript with React.

Understand Redux or the state management approach relevant to jobs you are targeting.

Week 12 – Interview Preparation

Revise:

• JavaScript
• React
• Project explanation
• Coding questions
• Git
• HTTP
• APIs

Apply for suitable positions while continuing project improvements.

Twelve weeks is a learning structure, not a guarantee that every learner will become job-ready within exactly twelve weeks. Previous programming knowledge and daily practice make a significant difference.

120. Daily Learning Strategy

A practical daily routine can contain four parts.

Learn

Study one concept.

Example:

useState

Implement

Write a small example without copying.

Example:

Quantity selector

Apply

Use the concept inside your main project.

Revise

Explain the concept in your own words.

A learner who can implement and explain a concept understands it better than one who only watched several tutorials about it.

121. How Much JavaScript Is Enough Before React?

You do not need to master every JavaScript topic.

You should be able to comfortably work with:

• Variables
• Functions
• Arrays
• Objects
• Conditions
• map/filter
• Destructuring
• Spread syntax
• Modules
• Promises
• async/await

If a line like this looks extremely confusing:

users.filter(user => user.active).map(user => user.name)

continue practicing JavaScript before moving aggressively into advanced React.

122. Should You Learn Class Components?

Modern React learning should focus primarily on function components and Hooks.

However, class components may still appear in older production applications.

For job preparation, understand their basic concepts:

• Class component
• this
• state
• props
• Lifecycle methods

123. Should You Learn Next.js?

Learn React fundamentals first.

After you can independently build a React application involving:

• Components
• State
• Forms
• APIs
• Routing
• Reusable UI

you can move to a React framework such as Next.js or another framework relevant to your target role.

124. Should You Learn React Native?

React Native is used for native application development and shares several React concepts.

Learn web React first if your immediate goal is frontend web development.

Then React Native becomes easier because concepts such as:

• Components
• Props
• State
• Hooks

will already be familiar.

The rendering environment and platform APIs are different, so React Native is not simply a website running on mobile.

125. React Fresher Job Opportunities

Knowledge of React can support applications for roles such as:

Junior React Developer

Typical work may include:

• Building components
• Fixing UI bugs
• Integrating APIs
• Building forms
• Maintaining pages
• Writing tests

Junior Frontend Developer

Expected skills may extend beyond React to:

• HTML
• CSS
• JavaScript
• Responsive design
• Browser debugging
• Git

UI Developer

Work may emphasize:

• Converting designs into responsive interfaces
• CSS
• Accessibility
• Component implementation
• Design consistency

Frontend Software Engineer

May involve:

• React
• TypeScript
• APIs
• Testing
• Performance
• State management
• Code reviews

React Intern

Suitable for learners who have foundational skills but limited professional experience.

Full-Stack Developer

If React is combined with backend skills such as:

• Node.js
• Java and Spring Boot
• .NET
• Python

you can target junior full-stack roles.

Your backend knowledge must be genuine; knowing React plus a few backend commands does not automatically make someone full-stack.

126. Skills Employers May Expect from a React Fresher

A useful fresher profile includes:

Core Web

• HTML
• CSS
• JavaScript

React

• Components
• Props
• State
• Hooks
• Forms
• Routing
• API integration

Development

• Git
• GitHub
• npm
• Browser DevTools
• Responsive design

Supporting Knowledge

• HTTP
• REST APIs
• JSON
• Authentication concepts
• Basic testing

Advantage Skills

• TypeScript
• Redux or another relevant state management approach
• Testing tools
• Basic backend knowledge
• Deployment
• Accessibility

127. What Should Be on a React Fresher Resume?

Keep the resume evidence-based.

Include:

• Technical skills you can actually explain
• 2–4 meaningful projects
• GitHub links
• Live project links where available
• Education
• Internship experience
• Relevant certifications if useful
• Clear project responsibilities

For each project, explain actual work.

Weak:

Developed an amazing responsive React application.

Better:

Built an employee management application with React, REST API integration, client-side routing, form validation, search, pagination, and CRUD operations.

Specific implementation details are more useful than adjectives.

128. What Makes a Fresher Job-Ready?

You are moving toward job readiness when you can independently:

• Create a React project
• Design components
• Pass props
• Manage state
• Handle forms
• Render lists
• Call REST APIs
• Implement CRUD
• Handle loading and error states
• Implement routing
• Build responsive interfaces
• Debug browser errors
• Use Git
• Explain your code
• Read an unfamiliar component
• Build a feature from requirements
• Deploy a project

Job readiness does not mean knowing every React API.

It means being able to solve normal junior-level frontend problems and learn unfamiliar parts when required.

129. What Not to Learn Too Early

• Complex state libraries
• Micro-frontends
• Custom bundler configuration
• Advanced React internals
• Large design systems
• Server rendering internals
• Complex performance optimization
• Experimental architecture patterns

These topics can be valuable later.

They have a lower return for a beginner who is still struggling with props, state, arrays, and API calls.

130. Final React Fresher Skill Checklist

Before applying for React jobs, verify that you understand:

JavaScript

• Variables
• Functions
• Objects
• Arrays
• map/filter/reduce
• Destructuring
• Spread syntax
• Modules
• Promise
• async/await
• Fetch

React Fundamentals

• Components
• JSX
• Props
• State
• Events
• Conditional rendering
• Lists
• Keys

Hooks

• useState
• useEffect
• useRef
• useContext
• useReducer
• Custom Hooks

Application Development

• Forms
• API integration
• CRUD
• Routing
• Authentication concepts
• Error handling
• Loading states

Professional Skills

• Git
• Responsive design
• Debugging
• Testing basics
• Accessibility basics
• Security basics
• Deployment

Portfolio

• Todo or equivalent beginner project
• API project
• CRUD project
• One polished real-world project

If several core sections remain unclear, strengthen them rather than adding another framework to your resume.

ReactJS for Fresher FAQs

1. What is ReactJS?

React is a JavaScript library for building user interfaces from components. Components can represent reusable pieces such as buttons, forms, navigation bars, product cards, or entire pages.

2. Is React a programming language?

No. JavaScript is the programming language. React is a library used with JavaScript.

3. Is React a framework?

React describes itself as a library for web and native user interfaces. Complete applications often combine React with routing, data management, build tools, or a React framework.

4. Can I learn React without JavaScript?

You can begin experimenting, but you will quickly encounter difficulty. React relies heavily on JavaScript functions, arrays, objects, modules, promises, destructuring, and asynchronous programming.

5. How much JavaScript should I know before React?

You should be comfortable with functions, arrays, objects, array methods, destructuring, spread syntax, modules, promises, async/await, and basic API calls.

6. Should I learn HTML and CSS before React?

Yes. React builds user interfaces using web technologies. Understanding HTML semantics and CSS layout makes React development substantially easier.

7. What is JSX?

JSX is syntax commonly used in React to describe interface structure alongside JavaScript logic.

8. Is JSX mandatory?

React can technically be used without JSX, but JSX is the normal and far more convenient style used in most React application code.

9. What is a React component?

A component is a reusable unit of UI and related behavior. Modern components are commonly JavaScript functions that return UI descriptions.

10. What are props?

Props are values passed from one component to another, commonly from a parent to a child.

11. Can a child component modify props?

A component should treat props as read-only inputs. If data needs to change, the component responsible for the relevant state should perform the update.

12. What is state?

State is information a component needs to remember between renders and that may change over time.

13. What is the difference between props and state?

Props are inputs supplied to a component. State is data managed by the component or an owning part of the application.

14. What is useState?

useState is a Hook that declares component state and provides a setter used to request state updates.

15. Does setState update a value immediately?

State should be understood as a snapshot for a particular render. Calling a state setter requests a subsequent render rather than mutating the current render's state variable immediately.

16. Why should React state not be mutated directly?

Creating new objects or arrays makes state transitions predictable and lets React work correctly with value identity and rendering decisions.

17. What is conditional rendering?

Conditional rendering means displaying different JSX according to conditions such as authentication status, loading state, permissions, or available data.

18. What is a key in React?

A key identifies an item among its siblings when rendering collections. Stable keys help React correctly track list items as data changes.

19. Why should array indexes not always be used as keys?

Indexes can represent positions rather than actual item identity. When a list is inserted, deleted, sorted, or reordered, this can cause confusing component-state behavior.

20. What is useEffect?

useEffect is used for synchronizing a component with an external system, such as certain browser APIs, subscriptions, connections, or network-related operations.

21. Does every state change require useEffect?

No. Most UI calculations and event-driven logic do not require Effects. Use an Effect when synchronization with something outside React is actually needed.

22. What is the dependency array?

It specifies reactive values relevant to an Effect. When those dependencies change, React may need to re-synchronize the Effect.

23. What is Effect cleanup?

An Effect can return a cleanup function to stop or undo work such as timers, subscriptions, listeners, or connections when synchronization ends or restarts.

24. What is useRef?

useRef stores a reference that does not need to trigger rendering when changed. It is commonly used for DOM references and other mutable non-rendered values.

25. What is useContext?

useContext reads a value provided through React Context. It can help share suitable data across a component tree without manually passing it through every intermediate component.

26. What is prop drilling?

Prop drilling describes passing props through multiple component levels mainly so deeply nested components can receive them.

27. Is prop drilling always bad?

No. Normal prop passing is explicit and often perfectly suitable. Context or another state solution becomes useful when shared data genuinely needs broader access.

28. What is useReducer?

useReducer manages state through a reducer function and dispatched actions. It can be useful when state transitions become complex or closely related.

29. What is a custom Hook?

A custom Hook is a reusable function following React Hook conventions that extracts React-related stateful logic from components.

30. What is lifting state up?

It means moving shared state into the closest common parent of components that need to coordinate through the same data.

31. What is a controlled component?

In form terminology, a controlled input receives its value from React state and reports changes through an event handler.

32. How does React communicate with a backend?

Usually through HTTP APIs using mechanisms such as fetch() or data libraries built on the same networking concepts.

33. Can React connect directly to a database?

A normal browser React application should communicate with a backend API rather than directly exposing database credentials or unrestricted database access.

34. Can React work with Java Spring Boot?

Yes. React can act as the frontend while Spring Boot provides backend APIs.

35. Can React work with Node.js?

Yes. A React frontend can communicate with a Node.js backend through HTTP APIs.

36. What is React Router?

React Router is a routing solution for React applications. Its current documentation supports declarative, data, and framework usage modes.

37. Why is routing required?

Routing lets different URLs represent different application screens or resources, such as /products, /products/10, and /profile.

38. What is a single-page application?

A SPA commonly loads an application shell and then changes client-side UI as users navigate rather than requesting a completely new traditional HTML document for every interaction.

39. What is CRUD?

CRUD stands for Create, Read, Update, and Delete, four common operations performed on application data.

40. Should a fresher learn Redux?

Yes if relevant to target roles, but only after understanding normal React state, props, Context, and reducers. Learning Redux first often hides gaps in React fundamentals.

41. Is Redux mandatory for React?

No. Many applications can be built without Redux. The appropriate state strategy depends on the application.

42. What is useMemo?

useMemo caches the result of a calculation between renders according to its dependencies and is primarily an optimization tool.

43. What is useCallback?

useCallback caches a function definition according to its dependencies. Use it when stable function identity is relevant rather than wrapping every function automatically.

44. What is React.memo?

memo can allow React to avoid some component re-renders when relevant props remain unchanged. It should be used as an optimization rather than a default wrapper around every component.

45. Should I optimize every React component?

No. First build correct and understandable code. Optimize identified bottlenecks using measurement and appropriate techniques.

46. What is lazy loading?

Lazy loading delays loading some code until it is needed. It can reduce the amount of application code required during the initial load.

47. What is React Compiler?

React Compiler is tooling that can automatically apply certain memoization optimizations during compilation. A fresher should understand normal React rendering first rather than making compiler behavior the starting point for learning React.

48. Is Create React App still recommended?

React deprecated Create React App for new applications in February 2025 and recommends alternatives such as frameworks or build tools.

49. Should a fresher use Vite?

Vite is a practical option for learning a straightforward client-side React application because it provides development and production build tooling with React templates available during project creation.

50. What is npm used for in React?

npm is commonly used to install project dependencies and execute project scripts such as development and build commands.

51. What is package.json?

It describes a JavaScript package or project and commonly contains metadata, scripts, dependencies, and configuration-related information.

52. What is node_modules?

It is the directory where installed package dependencies are normally stored locally.

53. Should node_modules be uploaded to GitHub?

Normally no. Dependencies should be reproducibly installed using the project's package manifest and lock file.

54. Should I learn TypeScript with React?

Yes, after basic React and JavaScript are comfortable. TypeScript is useful for professional frontend development, but it should not prevent a beginner from first understanding React itself.

55. Should I learn Next.js after React?

It is a logical next step for many developers, particularly when targeting jobs using React frameworks. First become comfortable with core React concepts.

56. Can I become a frontend developer by learning only React?

React alone is not enough. Frontend developers also need HTML, CSS, JavaScript, responsive design, APIs, HTTP, Git, browser debugging, and other supporting skills.

57. How many React projects should a fresher build?

There is no required number. A few complete projects that demonstrate independent problem solving are more useful than many copied applications.

58. Which React projects are good for freshers?

Good options include a Todo application, API-driven product explorer, employee CRUD system, e-commerce frontend, and admin dashboard.

59. Is a Todo application enough for getting a React job?

Usually it is too small to demonstrate the full range of frontend skills by itself. Use it for learning and then build more complete applications.

60. What should my main React portfolio project contain?

A strong project can include routing, forms, API integration, authentication-related flows, reusable components, loading/error states, responsive design, validation, and meaningful application logic.

61. Do I need backend knowledge for a React job?

Not necessarily for a dedicated frontend role, but understanding HTTP APIs, authentication, status codes, JSON, and backend/frontend boundaries is highly useful.

62. Should React developers learn SQL?

It is not necessary for every frontend position, but basic database knowledge can help you understand how complete applications work, particularly if you plan to become a full-stack developer.

63. How long does React take to learn?

There is no universal duration. Someone already comfortable with modern JavaScript can progress much faster than someone learning programming and web development simultaneously.

64. Can I learn React in one month?

You can learn substantial fundamentals in a month with focused practice, but professional competence requires repeated implementation, debugging, projects, and continued learning.

65. When should I start applying for React jobs?

Start applying when you can independently build and explain normal frontend features rather than waiting until you know every React feature.

66. What is more important for a fresher: theory or projects?

Both. Theory helps you explain how things work, while projects demonstrate that you can apply those concepts.

67. How should I prepare for React interviews?

Revise JavaScript and React concepts, solve small UI problems, practice explaining your projects, understand APIs and HTTP, and prepare to debug simple code.

68. Are JavaScript questions asked in React interviews?

Frequently. React applications are JavaScript applications, so employers commonly test JavaScript fundamentals alongside React.

69. Do I need DSA for React jobs?

The requirement varies by employer. Frontend-specific interviews may focus heavily on JavaScript and UI development, while general software engineering hiring processes may include data structures and algorithms.

70. What should I do if useEffect keeps running repeatedly?

First inspect its dependencies and determine whether the Effect updates state that causes one of those dependencies to change again. Do not simply remove the dependency array to hide the problem. React documents this as a common cause of Effect loops.

71. Why does my React component render again?

Possible reasons include state changes, parent renders, changed props, changed Context values, or other React update behavior. A render is not automatically a performance problem.

72. Does a React render mean the whole DOM is rebuilt?

No. Rendering refers to React evaluating components to determine what should be displayed. React then commits the necessary changes.

73. Should every variable be stored in state?

No. Store information in state when React needs to remember it between renders and changes should affect rendering. Derived values can often be calculated directly.

74. Should API data always be stored in Context?

No. Context is not a universal server-data solution. Choose state architecture according to ownership, lifetime, sharing requirements, and server synchronization needs.

75. Should every component have its own CSS file?

Not necessarily. Styling structure should match the project's size and conventions rather than follow an artificial one-file-per-component rule.

76. How large should a React component be?

There is no useful fixed line limit. Split a component when it contains separate responsibilities, becomes difficult to understand, or contains reusable pieces.

77. Should I memorize React syntax?

Memorize only common patterns naturally through practice. More important is understanding state, data flow, events, rendering, and component responsibilities.

78. How do I improve React problem-solving skills?

Build small features from written requirements without watching the implementation first. Debug your own mistakes and compare approaches only after attempting the problem.

79. How do I know whether I understand React?

Try building a CRUD application from an empty project without copying a tutorial. If you can design the components, state, forms, API calls, routes, loading states, and error handling yourself, your fundamentals are becoming strong.

80. What should I learn after completing this React roadmap?

Depending on your career direction, continue with TypeScript, advanced testing, a relevant state/data solution, a React framework, performance work, accessibility, or backend development. Choose the next topic based on the jobs and projects you intend to pursue rather than collecting technologies without practical use.

Recommended Learning Principle

Measure it by the features you can build without instructions.

A fresher who can independently understand a requirement, break it into components, decide where state belongs, connect an API, handle failures, debug problems, and explain the implementation has developed skills that transfer directly to real frontend development.