Tagline: Hooks-first React — components, state, effects, context, composition; scenario-driven UI logic assessment.
| Field | Value |
|---|---|
| Course code | REACT-FUND-A |
| Duration | 12 weeks |
| Credits | 4 |
| Compliance | NBA-aligned OBE |
| Prerequisite | NODE-FUND-A Units 1–8 or equivalent JavaScript |
| Publication | published |
| Price | INR 1500 |
| DB snapshot | 2026-07-06T07:25:39.722Z |
Course objective
Build maintainable user-interface logic with React hooks and functional components, using scenario-driven autograding that verifies state, effects, and rendered output — preparing learners for modern frontend engineering without class-component legacy patterns.
Hooks-first React fundamentals: functional components, custom hooks, effects, context, and composition — graded via scenario JSON and structured snapshots in a headless harness (no class components, no legacy react queue).
Course outcomes (CO1–CO6)
| CO | Bloom | Weight | Statement |
|---|---|---|---|
| CO1 | understand | 17% | Explain React's render model, props, scenario snapshots, and the hooks-only autograder contract. |
| CO2 | apply | 17% | Implement state and event handling with useState and custom hooks. |
| CO3 | apply | 17% | Synchronize components with external systems using useEffect, dependency arrays, and cleanup. |
| CO4 | apply | 17% | Manage async UI state with mocked fetch and stale-closure-safe effect patterns. |
| CO5 | analyze | 16% | Apply useRef, useMemo, useCallback, useContext, and useReducer appropriately. |
| CO6 | create | 16% | Compose small functional components and custom hooks in integrative capstone labs. |
Activity totals (live from platform)
| Metric | Count |
|---|---|
| Units / chapters | 11 |
| Topics | 44 |
| Topic quiz activities | 28 |
| MCQ questions | 174 |
| Practice labs | 0 |
| Evaluated coding labs | 74 |
| Instructional content blocks | 184 |
Certificates & earning criteria
| Certificate | CO scope | Evaluated lab quota | CO attainment | Gate |
|---|---|---|---|---|
| React Foundations | CO1–CO4 | ≥ 90% | ≥ 70% | React Foundations summative quiz |
| React Professional | CO1–CO6 | ≥ 95% | ≥ 70% | React Professional end-of-course capstone |
Unit syllabus (unit → topics → activities)
Unit 1 — Scenario snapshots & the autograder
Unit totals: 3 topics · 20 MCQ questions · 0 practice · 2 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | Course map & hooks-first policy | 10 | 0 | 0 | Yes |
| 2 | pure, hook & component modes + version envelope | 6 | 0 | 1 | Yes |
| 3 | Your first hook snapshot submission | 4 | 0 | 1 | Yes |
Unit 2 — UI as a function of props
Unit totals: 4 topics · 24 MCQ questions · 0 practice · 11 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | Props, immutability & derived strings | 6 | 0 | 2 | Yes |
| 2 | Conditional output without JSX complexity | 6 | 0 | 3 | — |
| 3 | Lists, keys & projection helpers | 6 | 0 | 3 | — |
| 4 | className composition & cn() patterns (reading + pure labs) | 6 | 0 | 3 | — |
Unit 3 — useState
Unit totals: 4 topics · 24 MCQ questions · 0 practice · 11 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | useState, snapshots & invoke steps | 6 | 0 | 3 | — |
| 2 | Functional setState & batching mental model | 6 | 0 | 3 | — |
| 3 | Multiple state variables & derived state | 6 | 0 | 3 | — |
| 4 | useCounter pattern pack | 6 | 0 | 2 | — |
Unit 4 — Events & custom hooks
Unit totals: 4 topics · 24 MCQ questions · 0 practice · 11 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | Handlers via invoke & state transitions | 6 | 0 | 3 | — |
| 2 | Extracting useToggle & useFormField | 6 | 0 | 3 | — |
| 3 | Composing hooks without violating rules | 6 | 0 | 3 | — |
| 4 | Rules of Hooks (quiz-heavy, 2 eval) | 6 | 0 | 2 | — |
Unit 5 — useEffect — mount & dependencies
Unit totals: 5 topics · 34 MCQ questions · 0 practice · 13 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | Mount effects & effectLog contract | 6 | 0 | 2 | — |
| 2 | Dependency arrays & re-run rules | 6 | 0 | 4 | — |
| 3 | Synchronizing with mock external stores | 6 | 0 | 4 | — |
| 4 | React Foundations summative quiz | 10 | 0 | 0 | — |
| 5 | Sandbox security & forbidden imports | 6 | 0 | 3 | — |
Unit 6 — Effect cleanup
Unit totals: 4 topics · 24 MCQ questions · 0 practice · 13 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | Cleanup functions & unmount | 6 | 0 | 4 | — |
| 2 | Subscribe / unsubscribe simulation | 6 | 0 | 4 | — |
| 3 | Empty deps & run-once patterns | 6 | 0 | 3 | — |
| 4 | Missing deps & infinite loop pitfalls (quiz + 2 eval) | 6 | 0 | 2 | — |
Unit 7 — Async effects & mock fetch
Unit totals: 4 topics · 24 MCQ questions · 0 practice · 13 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | mockFetch contract & loading state | 6 | 0 | 4 | — |
| 2 | Async functions inside effects | 6 | 0 | 3 | — |
| 3 | Stale closures & dependency fixes | 6 | 0 | 3 | — |
| 4 | Error & empty states in data hooks | 6 | 0 | 3 | — |
Unit 8 — useRef & useMemo
Unit totals: 4 topics · 0 MCQ questions · 0 practice · 0 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | useRef for mutable values & DOM refs | 0 | 0 | 0 | — |
| 2 | useMemo & expensive derived values | 0 | 0 | 0 | — |
| 3 | renderCount in scenarios & memo wins | 0 | 0 | 0 | — |
| 4 | When not to memoize (quiz + 2 eval) | 0 | 0 | 0 | — |
Unit 9 — useCallback & performance habits
Unit totals: 4 topics · 0 MCQ questions · 0 practice · 0 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | useCallback & stable handlers | 0 | 0 | 0 | — |
| 2 | Referential equality in hook snapshots | 0 | 0 | 0 | — |
| 3 | usePaginatedList & useDebounce patterns | 0 | 0 | 0 | — |
| 4 | React Compiler & perf reading (quiz-only) | 0 | 0 | 0 | — |
Unit 10 — useContext & useReducer
Unit totals: 4 topics · 0 MCQ questions · 0 practice · 0 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | createContext & Provider in scenarios | 0 | 0 | 0 | — |
| 2 | useContext for theme & user session | 0 | 0 | 0 | — |
| 3 | useReducer & action dispatch | 0 | 0 | 0 | — |
| 4 | When context vs local state (quiz + 2 eval) | 0 | 0 | 0 | — |
Unit 11 — Components, JSX & capstone
Unit totals: 4 topics · 0 MCQ questions · 0 practice · 0 evaluated labs
| # | Topic | MCQs | Practice | Evaluated | Preview |
|---|---|---|---|---|---|
| 1 | JSX components & static markup grading | 0 | 0 | 0 | — |
| 2 | Component composition & children patterns | 0 | 0 | 0 | — |
| 3 | Integrative custom-hook capstone | 0 | 0 | 0 | — |
| 4 | React Professional end-of-course capstone | 0 | 0 | 0 | — |
Counts are from the live course catalog. MCQs = questions in topic checkpoint quizzes. Practice = formative run-only or SQL practice lane. Evaluated = submit-graded labs that count toward progress and certificates.