10 Days · 2 Hours / Day · Full Notes

10-Day React Internship — Full Notes

Complete day-by-day study notes for React — from JSX and components to hooks, routing, context and deploying your own React app in 10 days.

Certificate IncludedTheory + Practical DailyOnline & Offline

Jump to a day

Day 1: React Foundations & Setup Day 2: JSX & Components Day 3: Props & State Day 4: Events & Conditional Rendering Day 5: Lists, Keys & Forms Day 6: useEffect & Fetching Data Day 7: React Router — Multi-Page Navigation Day 8: Context API & Global State Day 9: Custom Hooks & Performance Day 10: Capstone Project & Deployment

Day 1

React Foundations & Setup

Understand what React is, why it exists, and get your development environment running with your first app.

Theory — Hour 1

What is React?

React is a JavaScript library built by Meta for building fast, interactive user interfaces.
It breaks a UI into small, reusable pieces called components — like LEGO blocks for web pages.
React updates only the parts of the page that changed, making apps much faster than reloading the whole page.

Why React?

Used by Facebook, Instagram, Airbnb, Netflix — the most popular front-end library in the world.
One codebase can power web (React), mobile (React Native) and desktop apps.
Massive community, tonnes of ready-made packages, and top demand in job market.

How the Web Works (Quick Recap)

Browser downloads HTML (structure), CSS (style) and JavaScript (behaviour) from a server.
React runs entirely in the browser — it writes HTML for you using JavaScript.
The browser's DOM (Document Object Model) is the live tree of all page elements React controls.

Setting Up

Install Node.js (comes with npm). Check: node -v and npm -v in terminal.
Create a project: npx create-react-app my-app (classic) or npm create vite@latest (modern, faster).
Folder structure: src/ holds your code, public/ holds static files, package.json lists dependencies.

Create and run your first React app

# Create project with Vite (recommended)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

# You'll see: Local: http://localhost:5173/

Practical — Hour 2

Install Node.js, create a Vite React project, start the dev server and view it in the browser.
Open src/App.jsx, change the heading text, save and watch the browser update instantly (Hot Module Replacement).

Key Takeaways

React = a JavaScript library for building UIs from reusable components.
Vite is the modern, fast way to start a React project — prefer it over Create React App.
The dev server auto-refreshes the browser every time you save a file.

Day 2

JSX & Components

Learn JSX — React's HTML-in-JavaScript syntax — and build your first custom components.

Theory — Hour 1

What is JSX?

JSX lets you write HTML-like code inside JavaScript. React converts it to real DOM calls.
Rules: every element must be closed (<br /> not <br>), and you must return one root element.
Use className instead of class (class is a reserved JS keyword).

JavaScript Inside JSX

Wrap any JavaScript expression in curly braces { } inside JSX.
Examples: <h1>{name}</h1>, <p>{2 + 2}</p>, <img src={url} alt={desc} />.
You can NOT use statements (if, for) directly — use expressions, ternary, or map().

Creating a Component

A component is just a JavaScript function that returns JSX.
Component names MUST start with a capital letter — React tells apart components from HTML tags this way.
One file per component is the convention; export it with export default.

Composing Components

Use a component like an HTML tag: <Header /> or <Card />.
Components can nest inside each other to build complex UIs from simple pieces.
The top-level component (usually App) is the root that contains everything.

Your first custom component

// src/components/Greeting.jsx
export default function Greeting({ name }) {
  const today = new Date().toDateString();
  return (
    <div className='greeting'>
      <h2>Hello, {name}!</h2>
      <p>Today is {today}.</p>
    </div>
  );
}

// src/App.jsx — using the component
import Greeting from './components/Greeting';
export default function App() {
  return <Greeting name='Sudhar' />;
}

Practical — Hour 2

Create a ProfileCard component that displays a name, role and avatar image using JSX.
Build a simple page layout using three components: Header, MainContent and Footer — compose them in App.

Key Takeaways

JSX = HTML syntax inside JavaScript. Use { } for expressions, className for CSS class.
Components are just functions that return JSX — name them with a capital letter.
Compose big UIs from small, single-purpose components.

Day 3

Props & State

Make components dynamic with props (input data) and state (data that changes over time).

Theory — Hour 1

Props — Passing Data Down

Props (properties) are how a parent component passes data to a child component.
Passed like HTML attributes: <Button label='Click Me' color='blue' />.
Props are read-only — a child component must never modify its own props.

Destructuring Props

function Button({ label, color }) { ... } is cleaner than props.label, props.color.
Default values: function Button({ label = 'OK', color = 'gray' }) { ... }.

State — Data That Changes

State is data owned by a component that can change — a counter, a form input, a toggle.
When state changes React automatically re-renders the component to show the new value.
Declare with useState: const [count, setCount] = useState(0).

The Golden Rule

Never mutate state directly. Always use the setter: setCount(count + 1), NOT count++.
State updates are asynchronous — React batches them for performance.
If new state depends on old state, use the callback form: setCount(prev => prev + 1).

Counter — props + state in action

import { useState } from 'react';

function Counter({ title, start = 0 }) {
  const [count, setCount] = useState(start);
  return (
    <div>
      <h3>{title}</h3>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>+</button>
      <button onClick={() => setCount(prev => prev - 1)}>-</button>
      <button onClick={() => setCount(start)}>Reset</button>
    </div>
  );
}

// Usage
<Counter title='Likes' start={10} />

Practical — Hour 2

Build a like/dislike counter that shows the total and highlights when positive or negative.
Create a ColorPicker component that receives an array of colors as a prop and lets the user click to select one — store the selected color in state.

Key Takeaways

Props = input data passed in from outside (read-only). State = data owned inside (changeable).
Always use the setter function to change state — never mutate state directly.
State change → React re-renders the component automatically.

Day 4

Events & Conditional Rendering

Handle user interactions and show or hide content based on conditions.

Theory — Hour 1

Handling Events

React events use camelCase: onClick, onChange, onSubmit, onKeyDown.
Pass a function reference, not a call: onClick={handleClick} not onClick={handleClick()}.
The event object is passed automatically: function handleClick(e) { e.preventDefault(); }.

Synthetic Events

React wraps browser events in a SyntheticEvent for consistent cross-browser behaviour.
e.target.value gives the current input value; e.preventDefault() stops default behaviour (e.g. form submit).

Conditional Rendering

Use the ternary operator: {isLoggedIn ? <Dashboard /> : <Login />}.
Use && for show/hide: {error && <p className='error'>{error}</p>}.
For complex logic, compute JSX in a variable before the return statement.

Controlled Inputs

A controlled input stores its value in state: <input value={text} onChange={e => setText(e.target.value)} />.
This makes React the single source of truth — you always know what the input contains.

Login toggle with controlled input

import { useState } from 'react';

export default function LoginDemo() {
  const [name, setName]         = useState('');
  const [loggedIn, setLoggedIn] = useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    if (name.trim()) setLoggedIn(true);
  }

  return loggedIn ? (
    <div>
      <p>Welcome, {name}!</p>
      <button onClick={() => { setLoggedIn(false); setName(''); }}>Logout</button>
    </div>
  ) : (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} placeholder='Your name' />
      <button type='submit'>Login</button>
    </form>
  );
}

Practical — Hour 2

Build a toggle card that shows a 'Read More' section only when a button is clicked.
Create a simple search box that filters a hardcoded list of items as the user types.

Key Takeaways

Pass function references to event handlers — never call them during render.
Ternary (? :) for if/else rendering; && for show/hide rendering.
Controlled inputs bind value to state — React always knows the current value.

Day 5

Lists, Keys & Forms

Render dynamic lists from arrays and build complete forms with validation.

Theory — Hour 1

Rendering Lists with map()

Use Array.map() to turn an array into an array of JSX elements.
Each element needs a unique key prop so React can track changes efficiently.
Bad key: array index (causes bugs on reorder). Good key: a unique id from your data.

Why Keys Matter

Keys help React identify which items changed, were added, or were removed.
Without keys, React re-renders the entire list on any change — slow and buggy.

Building Forms

Use one state variable per field, or a single object: const [form, setForm] = useState({ name: '', email: '' }).
Update object state: setForm(prev => ({ ...prev, name: e.target.value })).
Handle submit with onSubmit on the <form> tag and call e.preventDefault().

Basic Validation

Check required fields and show an error message using conditional rendering.
Keep an errors object in state: { name: 'Name is required', email: '' }.
Disable the submit button when the form is invalid: <button disabled={!isValid}>.

Dynamic list + add-item form

import { useState } from 'react';

export default function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a project' },
  ]);
  const [input, setInput] = useState('');

  function addTodo() {
    if (!input.trim()) return;
    setTodos(prev => [...prev, { id: Date.now(), text: input }]);
    setInput('');
  }

  return (
    <div>
      <ul>
        {todos.map(t => <li key={t.id}>{t.text}</li>)}
      </ul>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>Add</button>
    </div>
  );
}

Practical — Hour 2

Build a Todo list: add items, mark as done (strikethrough), and delete items.
Create a registration form with name, email and password fields with validation — show errors below each field.

Key Takeaways

Use .map() to render lists; always provide a unique, stable key prop.
Never use array index as a key if the list can be reordered or filtered.
For forms, control every input with state and validate before submission.

Day 6

useEffect & Fetching Data

Run side effects like API calls, timers and subscriptions with the useEffect hook.

Theory — Hour 1

What is a Side Effect?

A side effect is anything outside pure rendering: API calls, timers, event listeners, DOM manipulation.
React's render function must be pure (no side effects). Put side effects inside useEffect.

useEffect Syntax

useEffect(fn, deps) — fn runs after the component renders.
Dependency array controls when it runs: [] = once on mount, [value] = when value changes, no array = every render.
Return a cleanup function to cancel timers or subscriptions when the component unmounts.

Fetching Data from an API

Use the Fetch API or axios inside useEffect to load data from a server.
Pattern: show a loading spinner → fetch → set data in state → render data.
Always handle errors with try/catch and show a user-friendly error message.

Async in useEffect

useEffect cannot be async directly. Create an async function inside and call it.
Cancel ongoing requests on cleanup to prevent state updates on unmounted components.

Fetch and display data from a public API

import { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers]     = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    async function fetchUsers() {
      try {
        const res  = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        setError('Failed to load users.');
      } finally {
        setLoading(false);
      }
    }
    fetchUsers();
  }, []);   // [] = run once on mount

  if (loading) return <p>Loading...</p>;
  if (error)   return <p>{error}</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Practical — Hour 2

Fetch a list of posts from jsonplaceholder.typicode.com/posts and display title + body with a loading state.
Add a search input that filters the fetched posts by title as the user types.

Key Takeaways

useEffect is for side effects (API calls, timers) — never put them directly in the render function.
The dependency array controls when the effect re-runs — always think about what it depends on.
Always handle loading and error states to give users a good experience.

Day 7

React Router — Multi-Page Navigation

Build a multi-page React app with URL-based navigation using React Router.

Theory — Hour 1

Client-Side Routing

In a traditional site, every URL loads a new HTML page from the server.
React Router intercepts URL changes and renders different components — no full page reload.
This makes navigation instant, like a native app.

Core Components

<BrowserRouter>: wraps your entire app and enables routing.
<Routes> + <Route path='/about' element={<About />} />: define which component renders at each URL.
<Link to='/about'>About</Link>: navigate without a page reload (replaces <a href>).
<NavLink>: same as Link but adds an 'active' class when the URL matches.

Dynamic Routes & URL Params

Define with a colon: <Route path='/user/:id' element={<UserPage />} />.
Read the param inside the component: const { id } = useParams().
Use this to build product pages, blog posts, user profiles — one route, many pages.

Programmatic Navigation

const navigate = useNavigate(); then navigate('/home') to redirect from code (e.g. after login).
navigate(-1) goes back — like hitting the browser back button.

Simple 3-page app with React Router

// npm install react-router-dom

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function Home()    { return <h1>Home</h1>; }
function About()   { return <h1>About</h1>; }
function Product() {
  const { id } = useParams();
  return <h1>Product #{id}</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/'>Home</Link> | <Link to='/about'>About</Link>
      </nav>
      <Routes>
        <Route path='/'           element={<Home />} />
        <Route path='/about'      element={<About />} />
        <Route path='/product/:id' element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

Practical — Hour 2

Build a 3-page app (Home, About, Contact) with a navigation bar using React Router.
Create a Products listing page where clicking a product navigates to /product/:id and shows its details.

Key Takeaways

React Router handles navigation without reloading the page — fast, app-like experience.
Use <Link> instead of <a> for internal navigation; useNavigate() for code-triggered redirects.
Dynamic routes (:param) let one route serve many pages from a data source.

Day 8

Context API & Global State

Share data across many components without prop drilling using React Context.

Theory — Hour 1

The Prop Drilling Problem

Passing data through many layers of components (grandparent → parent → child) is called prop drilling.
It makes intermediate components messy — they carry props they don't even use.
Context solves this by making data available to any component in the tree.

Creating and Providing Context

Create: const ThemeContext = createContext(defaultValue).
Provide: wrap the component tree in <ThemeContext.Provider value={...}>.
Any component inside the Provider can read the value — no matter how deep.

Consuming Context

const theme = useContext(ThemeContext); — simple one-line access anywhere in the tree.
Combine Context with useState to make the value changeable by any consumer.
Best for: current user, theme (light/dark), language, shopping cart, auth status.

When NOT to Use Context

Don't put everything in context — it can cause unnecessary re-renders.
For local state that only one component needs, useState is always the right choice.
For complex global state (large apps), consider Zustand or Redux Toolkit.

Light / Dark theme toggle with Context

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [dark, setDark] = useState(false);
  return (
    <ThemeContext.Provider value={{ dark, toggle: () => setDark(d => !d) }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() { return useContext(ThemeContext); }

// In any component:
function Navbar() {
  const { dark, toggle } = useTheme();
  return (
    <nav style={{ background: dark ? '#111' : '#fff' }}>
      <button onClick={toggle}>{dark ? 'Light' : 'Dark'} Mode</button>
    </nav>
  );
}

Practical — Hour 2

Implement a light/dark mode toggle using Context — the theme should apply to the whole page.
Build a simple cart context that tracks items added on a products page and shows the count in the Navbar.

Key Takeaways

Context avoids prop drilling — share data to any depth without threading props through every layer.
Pair Context with useState to make global data changeable.
Use context for truly global data (theme, auth, cart) — not for every piece of state.

Day 9

Custom Hooks & Performance

Extract reusable logic into custom hooks and learn to keep your React app fast.

Theory — Hour 1

Custom Hooks

A custom hook is a function whose name starts with 'use' and calls built-in hooks inside.
It lets you extract stateful logic — like form handling, data fetching, window size — into a reusable function.
Same logic, used in many components, written once. This is the React way of code reuse.

Common Custom Hook Examples

useLocalStorage: read/write a value that persists in the browser's localStorage.
useFetch: encapsulate loading + error + data pattern for any API call.
useDebounce: delay updating a search term to avoid firing a request on every keystroke.

React.memo — Skip Unnecessary Renders

By default, when a parent re-renders, all children re-render too.
Wrap a component in React.memo to make it skip re-rendering if its props haven't changed.
Only use when a component is expensive and its parent re-renders often.

useMemo & useCallback

useMemo: cache the result of an expensive calculation — recompute only when dependencies change.
useCallback: cache a function reference so child components don't re-render when the function hasn't changed.
Don't over-optimise — profile first, then fix real bottlenecks.

useFetch — reusable data-fetching hook

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(r => r.json())
      .then(d => { setData(d); setLoading(false); })
      .catch(e => { setError(e.message); setLoading(false); });
  }, [url]);

  return { data, loading, error };
}

// Usage in any component:
const { data: posts, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

Practical — Hour 2

Extract the data-fetching logic from Day 6 into a useFetch custom hook and reuse it in two components.
Build a useLocalStorage hook and use it to persist a user's name between page refreshes.

Key Takeaways

Custom hooks extract stateful logic into reusable functions — keep components clean.
React.memo, useMemo and useCallback prevent unnecessary re-renders — use them after profiling.
Write hooks for patterns you repeat: fetching, forms, timers, local storage.

Day 10

Capstone Project & Deployment

Build a complete React app end-to-end and deploy it live on the internet.

Theory — Hour 1

Plan Your Capstone

Pick a focused project: a Todo app with categories, a movie search app, a weather dashboard, or a portfolio site.
List the pages, components, state, and any APIs you'll use before writing code.
Keep scope small — a complete simple app beats an unfinished complex one.

Apply Everything You Learned

Components & JSX (Days 1–2), Props & State (Day 3), Events & Forms (Days 4–5).
API Fetching with useEffect (Day 6), Multi-page with React Router (Day 7).
Context for global state (Day 8), Custom hooks for reuse (Day 9).

Building for Production

Run npm run build — Vite bundles and minifies your code into a dist/ folder.
The output is pure HTML/CSS/JS — you can host it on any static server.
Check the bundle size; lazy-load heavy pages with React.lazy + Suspense.

Deploying to Vercel / Netlify

Push your project to GitHub. Connect the repo to Vercel or Netlify.
They detect it's a Vite/React project, build it, and give you a live URL in seconds.
Every git push auto-deploys — your site is always up to date.

Build and deploy commands

# 1. Build production bundle
npm run build          # creates dist/ folder

# 2. Preview locally
npm run preview        # serves dist/ at localhost:4173

# 3. Deploy with Vercel CLI (optional)
npm install -g vercel
vercel                 # follow prompts — live URL in ~30 seconds

# OR push to GitHub and connect at vercel.com / netlify.com

Practical — Hour 2

Build a complete capstone project using at least: components, state, routing, one API call, and a form.
Deploy it on Vercel or Netlify and share the live URL — add it to your portfolio.

Key Takeaways

A deployed, working project is the best proof of skill — always finish and ship.
Vercel and Netlify make deploying a React app free and instant via GitHub.
You now have the full React toolkit: components, hooks, routing, context, and deployment.

What You Will Get

Everything included in the 10-day React internship

Internship Certificate

Industry-recognised certificate on completion.

Capstone Project

A deployed React app for your portfolio.

Hands-On Coding

Build real components and apps, not just theory.

Modern React Skills

Hooks, Router, Context API and deployment.

Ready to Start Your React Internship?

Join the 10-day React internship — online or offline — with a certificate on completion. Open to all departments, no prior experience needed.

See 10-Day AI Plan

10-Day React Internship — Full Notes

React Foundations & Setup

Theory — Hour 1

Create and run your first React app

Practical — Hour 2

Key Takeaways

JSX & Components

Theory — Hour 1

Your first custom component

Practical — Hour 2

Key Takeaways

Props & State

Theory — Hour 1

Counter — props + state in action

Practical — Hour 2

Key Takeaways

Events & Conditional Rendering

Theory — Hour 1

Login toggle with controlled input

Practical — Hour 2

Key Takeaways

Lists, Keys & Forms

Theory — Hour 1

Dynamic list + add-item form

Practical — Hour 2

Key Takeaways

useEffect & Fetching Data

Theory — Hour 1

Fetch and display data from a public API

Practical — Hour 2

Key Takeaways

React Router — Multi-Page Navigation

Theory — Hour 1

Simple 3-page app with React Router

Practical — Hour 2

Key Takeaways

Context API & Global State

Theory — Hour 1

Light / Dark theme toggle with Context

Practical — Hour 2

Key Takeaways

Custom Hooks & Performance

Theory — Hour 1

useFetch — reusable data-fetching hook

Practical — Hour 2

Key Takeaways

Capstone Project & Deployment

Theory — Hour 1

Build and deploy commands

Practical — Hour 2

Key Takeaways

What You Will Get

Ready to Start Your React Internship?

@qdcodex on Instagram