Techie BabajiLearn to Code. Build Real Skills.
Frontend track

React Tutorial

Build user interfaces from components. Hooks, routing, data fetching, testing and deployment.

IntermediateExamples target React 19 with Vite.
Start: Introduction to React View all topics
0/42 complete
Topics
42
Full lessons
42
Est. hours
~8
Interview Qs
29

Overview

React is a JavaScript library for building user interfaces from small, reusable components. You describe what the UI should look like for a given state, and React updates the DOM to match.

The track uses function components and hooks with Vite. It also explains when you do not need an effect — one of the most common sources of React bugs.

What you will learn

  • Build components with JSX, props and state
  • Use hooks correctly: useState, useEffect, useRef, useContext, useReducer
  • Fetch data with proper loading and error states
  • Add routing, authentication and deploy to Hostinger

Prerequisites

You will get the most from this track if you already know:

Learning path

The recommended sequence, from beginner to advanced. Each stage builds on the one before.

  1. 1Getting Started · 7 topics · Beginner
    Introduction to React · JavaScript Prerequisites · React Setup with Vite · JSX · Components · Functional Components · Props
  2. 2State & Events · 6 topics · Beginner → Intermediate
    State · Event Handling · Conditional Rendering · Lists and Keys · Forms · Controlled Components
  3. 3Hooks · 7 topics · Intermediate
    useState · useEffect · useRef · useContext · useReducer · Custom Hooks · Component Lifecycle Concepts
  4. 4Routing & Data · 5 topics · Intermediate
    React Router · API Integration · Fetch and Axios · Loading and Error States · Form Validation
  5. 5State at Scale · 6 topics · Intermediate → Advanced
    Context API · State Management · Performance Optimization · Memoization · Lazy Loading · Error Boundaries
  6. 6Auth & Quality · 5 topics · Advanced
    Authentication · Protected Routes · TypeScript with React · React Testing · Accessibility
  7. 7Shipping · 6 topics · Advanced
    Production Build · Deployment to Hostinger · React with Node.js API · React with ASP.NET Core Web API · Complete CRUD Project · React Interview Questions

Complete topic list

42 topics
1

Getting Started

7 topics
  1. Introduction to ReactBeginner5m
  2. JavaScript PrerequisitesBeginner6m
  3. React Setup with ViteBeginner5m
  4. JSXBeginner5m
  5. ComponentsBeginner5m
  6. Functional ComponentsBeginner5m
  7. PropsBeginner5m
2

State & Events

6 topics
  1. StateBeginner6m
  2. Event HandlingBeginner5m
  3. Conditional RenderingBeginner5m
  4. Lists and KeysBeginner6m
  5. FormsIntermediate5m
  6. Controlled ComponentsIntermediate5m
3

Hooks

7 topics
  1. useStateIntermediate5m
  2. useEffectIntermediate6m
  3. useRefIntermediate5m
  4. useContextIntermediate6m
  5. useReducerIntermediate6m
  6. Custom HooksIntermediate6m
  7. Component Lifecycle ConceptsIntermediate5m
4

Routing & Data

5 topics
  1. React RouterIntermediate6m
  2. API IntegrationIntermediate6m
  3. Fetch and AxiosIntermediate6m
  4. Loading and Error StatesIntermediate6m
  5. Form ValidationIntermediate6m
5

State at Scale

6 topics
  1. Context APIIntermediate6m
  2. State ManagementIntermediate6m
  3. Performance OptimizationIntermediate6m
  4. MemoizationIntermediate6m
  5. Lazy LoadingAdvanced5m
  6. Error BoundariesAdvanced6m
6

Auth & Quality

5 topics
  1. AuthenticationAdvanced7m
  2. Protected RoutesAdvanced6m
  3. TypeScript with ReactAdvanced6m
  4. React TestingAdvanced6m
  5. AccessibilityAdvanced6m

Visual guides

1 diagram
React useEffect lifecycle: render, commit, effect, cleanup on dependency change and unmountRendercompute JSXCommitupdate the DOMEffect runsfetch, subscribe…deps changed?[userId]Cleanupabort, unsubscribere-renderUnmountcleanup once moreEffects run after the screen updates. Cleanup runs before the next effect and on unmount.

useEffect

The effect lifecycle: run after commit, clean up before re-running, and clean up on unmount.

Code example

A taste of the track, from JavaScript Prerequisites.

JavaScriptEight features React uses constantly Runnable
const products = [
  { id: 1, name: 'Pen', price: 20, stock: 0 },
  { id: 2, name: 'Notebook', price: 60, stock: 12 },
  { id: 3, name: 'Bag', price: 650, stock: 3 },
];


// 1. Arrow functions
const withTax = price => Math.round(price * 1.18);


// 2. Destructuring
const { name, price } = products[1];
console.log(name, withTax(price));


// 3. Spread: copy and change (never mutate state)
const updated = { ...products[0], stock: 5 };
console.log(products[0].stock, updated.stock);


// 4. map: data → display strings (in React: → JSX)
console.log(products.map(p => `${p.name}: ₹${p.price}`));


// 5. filter
const inStock = products.filter(p => p.stock > 0);
console.log(inStock.length);


// 6. Spread to add to a list
const more = [...products, { id: 4, name: 'Ruler', price: 15, stock: 9 }];
console.log(more.length, products.length);


// 7. Ternary and &&
const label = p => (p.stock > 0 ? 'In stock' : 'Sold out');
console.log(label(products[0]), products[2].stock < 5 && 'Hurry!');


// 8. Optional chaining and ??
const user = { name: 'Asha' };
console.log(user.address?.city ?? 'No city');
Expected output
Notebook 71
0 5
[ 'Pen: ₹20', 'Notebook: ₹60', 'Bag: ₹650' ]
2
4 3
Sold out Hurry!
No city
Opens this example in the full playground

Practice exercises

Introduction to React

Write a component ProfileCard that receives name and city props and renders them in an <article> with an <h2> and a <p>.

JavaScript Prerequisites

Given todos = [{ id: 1, text: "Learn JS", done: true }, { id: 2, text: "Learn React", done: false }], create a new array where todo 2 is done, without changing the original, and log the texts of unfinished todos from the original.

React Setup with Vite

Create a Vite React app called todo-app, change App.jsx to show "My Todos", and build it for production.

JSX

Write a component Badge that shows "Admin" in red bold text when isAdmin is true, and "Member" in grey otherwise, using one <span> and a style object.

Components

Split this into components: a page with a <SearchBar /> (an input and a button) and a <ResultsCount count={3} /> that shows "3 results".

Functional Components

Convert this class component to a function component: class Hello extends Component { render() { return <p>Hello {this.props.name}</p>; } }

Show all 41 exercises
Props

Create an Alert component with a type prop ("success" or "error", default "success") and children. Success shows a green border, error a red one.

State

Two components, TemperatureInput (Celsius) and FahrenheitDisplay, must stay in sync. Lift the Celsius state into a parent and show both.

Event Handling

Build a LikeButton that shows "♡ Like" and becomes "♥ Liked" when clicked, toggling back on the next click.

Conditional Rendering

Write a Greeting component: if user is null show a "Log in" button; if user.isAdmin show "Welcome back, admin <name>"; otherwise "Welcome back, <name>".

Lists and Keys

Render a list of contacts grouped by first letter: show an <h4> for each letter followed by the names starting with it.

Forms

Write an uncontrolled contact form (name, email, message) that, on submit, reads the values with FormData and shows "Thanks, <name>!".

Controlled Components

Create a controlled amount input that accepts only digits and at most one decimal point, and shows the amount with ₹ below it.

useState

Build a toggle button that shows “Show details” / “Hide details” and conditionally renders a paragraph.

useEffect

Write a component that shows the window width and updates it on resize. Make sure the listener is removed on unmount.

useRef

Build a "Copy code" box: a readonly input with a coupon code and a button that selects the input’s text using a ref and shows "Copied!".

useContext

Create a LanguageContext ("en" or "hi") with a provider in App, a toggle button, and a Greeting component that shows "Hello" or "नमस्ते".

useReducer

Write a counterReducer supporting "incremented", "decremented" (not below 0) and "reset", and use it in a Counter component.

Custom Hooks

Write useOnlineStatus() that returns true/false and updates when the browser fires "online" or "offline" events. Show "Online" or "Offline" in a component.

Component Lifecycle Concepts

Write a ProfileEditor that resets its internal state whenever the userId prop changes, without an effect.

React Router

Add a route /orders/:orderId that shows "Order #<orderId>" and a link back to /orders.

API Integration

Write a component that loads https://jsonplaceholder.typicode.com/users once and lists the names, with loading and error states.

Fetch and Axios

Add a getTodo(id) function to fetchApi and a component that loads todo 1 and shows its title.

Loading and Error States

Create a reusable <AsyncView status data onRetry render /> component that shows a loading text, an error with retry, an empty message, or calls render(data).

Form Validation

Add a phone field to validate(): required, exactly 10 digits. Write the rule and test it with "98765" and "9876543210".

Context API

Write an AuthProvider with user (null by default), login(name) and logout(), plus a useAuth hook. Show "Hi, Asha" with a Logout button, or a Login button.

State Management

Classify each: (1) whether a tooltip is visible, (2) the logged-in user, (3) the list of products from the API, (4) the current page number of a search, (5) the text in a comment box.

Performance Optimization

A Layout component holds a "menuOpen" state and renders an expensive <ProductGrid />. Restructure it so toggling the menu does not re-render ProductGrid, without memo.

Memoization

A component computes the total of a 10,000-item cart on every render, even when only a "notes" text field changes. Cache the total with useMemo.

Lazy Loading

Lazy-load a Settings page in React Router: use lazy() for the component and wrap the router outlet in Suspense.

Error Boundaries

Write a Profile component that throws if user.name is missing, and wrap it in an ErrorBoundary with fallback text "Profile unavailable". Render it with a user that has no name.

Authentication

Write a RoleGate component that renders its children only if useAuth().user.roles includes a given role, otherwise "You do not have access".

Protected Routes

Write a GuestOnly route that redirects signed-in users away from /login and /register to /account.

TypeScript with React

Type a Button component with props label (string), onClick (no arguments, returns nothing), optional disabled (boolean) and variant ("primary" | "danger", default "primary").

React Testing

Write a test for a Counter with a "+1" button and text "Count: 0" that checks the count becomes 2 after two clicks.

Accessibility

Fix this component: <div onClick={toggle}>☰</div><input placeholder="Search">. Make the menu toggle a real button with an accessible name and state, and give the input a label.

Production Build

Create .env.development and .env.production files with different VITE_API_URL values and show how a component reads it.

Deployment to Hostinger

Your app lives in public_html/shop/. Adapt the fallback rule and say which two settings in the React project must also change.

React with Node.js API

Write the vite.config.js server.proxy setting that forwards /api to http://localhost:4000 and explain why it avoids CORS.

React with ASP.NET Core Web API

Write the vite.config.js proxy for an ASP.NET Core API running at https://localhost:7001 with the development certificate.

Complete CRUD Project

Extend the project: add a "Sort by price" checkbox that sorts the visible products from cheapest to most expensive.

Common interview questions

Frequently asked questions

Do I need Create React App?
No. Create React App is deprecated. Use Vite for client-side apps or a framework such as React Router or Next.js for server rendering.
When should I use useEffect?
Only to synchronise with something outside React: network requests, subscriptions, timers or browser APIs. If you are computing a value from props or state, compute it during render instead.