.jpeg)
← All curricula
ReactFrontend development
Your learning plan · 22 modules
React JS Frontend Development
Build a web interface from reusable components. Move from JSX, props and state to forms, navigation, APIs, shared state, testing and a deployed React project.
- Who it's for
- Grades 9+, college students and professionals learning frontend development
Typically ages 14+ - Suggested duration
- 66 classes / 12 to 16 weeks
- How you learn
- Concepts → practice → projects
Age ranges are approximate. We'll confirm your starting module and class schedule before enrolment.
The goal
What you'll learn to do
- Explain React's features, advantages, limitations and single-page application structure.
- Build reusable components using JSX, props, state, hooks and sensible file organization.
- Handle forms, events, refs, navigation and API requests, including loading and error states.
- Compare local state, Context and Redux, and explore rendering optimization and animations.
- Build and deploy a React project, share its GitHub repository and live demo, and practise basic component testing.
One module at a time
Your module-wise syllabus
Open a module to see the topics and hands-on practice. Start with the foundations and build up step by step.
01React JS - Overview
What you'll explore
- What is React JS?
- React features
- Component-based UI
- Virtual DOM concept
- React advantages
- React limitations
- Single Page Application idea
Try it yourself
- Create a simple diagram of React app flow
- Identify components in a sample website
- Discuss React use cases
02React JS - Environment Setup
What you'll explore
- Install Node.js and npm
- NPM vs NPX vs Yarn
- Create React app using Vite or suitable setup
- Root folder and project structure
- Add dependencies and plugins
- index.html, main.jsx and App.jsx
- Running the development server
Try it yourself
- Create first React project
- Run local server
- Edit App.jsx and see live changes
03React JS - JSX
What you'll explore
- JSX meaning and rules
- Nested elements
- Attributes and className
- JavaScript expressions in JSX
- Styling in JSX
- Comments in JSX
- Naming conventions
Try it yourself
- Create JSX profile card
- Use expressions for dynamic data
- Add inline and CSS class styling
04React JS - Components
What you'll explore
- Functional components
- Class component overview
- Stateless component example
- Stateful component example
- Component file organization
- Export and import components
Try it yourself
- Create Header, Card and Footer components
- Import components into App.jsx
- Reuse one component multiple times
05React JS - Props Overview
What you'll explore
- What are props?
- Passing props from parent to child
- Using props inside components
- Default props
- Props.children
- State and props difference
Try it yourself
- Build product cards using props
- Add default values
- Pass children content to component
06React JS - Props Validation
What you'll explore
- Why props validation is useful
- PropTypes overview
- Validating string, number, boolean and array props
- Required props
- Shape validation for objects
Try it yourself
- Add prop validation to Card component
- Test with wrong prop type
- Fix warning by passing correct data
07React JS - State and Component API
What you'll explore
- State concept
- setState in class components
- useState in functional components
- Force update concept
- findDOMNode concept and modern alternatives
- State update best practices
Try it yourself
- Create counter component
- Create show/hide toggle
- Update state using previous value
08React JS - Component Life Cycle
What you'll explore
- Mounting, updating and unmounting
- Lifecycle methods overview
- componentDidMount and componentWillUnmount concept
- useEffect as modern lifecycle handling
- Dependency array
- Cleanup function
Try it yourself
- Build timer component
- Fetch data on mount
- Add cleanup function
09React JS - Forms
What you'll explore
- Controlled components
- Uncontrolled components overview
- Simple form example
- Complex form example
- Input state handling
- Validation and error messages
- React Hook Form introduction
Try it yourself
- Build registration form
- Add validation messages
- Submit and display entered data
10React JS - Events
What you'll explore
- React event system
- Click and change events
- Keyboard events
- Focus and blur events
- Passing arguments to handlers
- Child-to-parent event communication
Try it yourself
- Create button actions
- Build search input event
- Trigger parent function from child component
11React JS - Refs and Keys
What you'll explore
- Using refs
- useRef hook
- Accessing DOM elements carefully
- Focus input using ref
- List rendering keys
- Why keys should be stable
Try it yourself
- Create focus input button
- Render list of items with keys
- Fix missing key warning
12React JS - Router
What you'll explore
- Install React Router
- Create route components
- BrowserRouter, Routes, Route and Link
- Navigation bar
- Route parameters
- Nested routes
- Default and not-found routes
Try it yourself
- Build multi-page React app
- Add navigation menu
- Create dynamic detail page
13React JS - Flux Concept
What you'll explore
- Need for predictable state flow
- Flux architecture overview
- Actions, dispatcher, store and view
- Unidirectional data flow
- Flux pros and use cases
Try it yourself
- Draw Flux flow for a shopping cart
- Identify action, store and view in example
- Prepare for Redux module
14React JS - Using Redux / Flux Pattern
What you'll explore
- Install Redux and React-Redux
- Create folders and files
- Actions
- Reducers
- Store
- Root component provider
- Connecting other components
- Thunk middleware overview
Try it yourself
- Build cart counter using Redux
- Create actions and reducer
- Connect component to store
15React JS - Hooks
What you'll explore
- useState
- useEffect
- useRef
- useCallback
- useMemo
- useContext
- Custom hooks
Try it yourself
- Build API data hook
- Use useMemo/useCallback for optimization example
- Create context-based theme toggle
16React JS - Context API
What you'll explore
- Prop drilling problem
- Create context
- Provider and consumer/useContext
- Global theme/user state
- Context vs Redux
Try it yourself
- Build theme context
- Toggle light/dark mode
- Use context in multiple components
17React JS - Working with APIs
What you'll explore
- API workflow
- Axios and fetch
- GET, POST, PUT and DELETE operations
- Promises and async/await
- Loading states
- Error messages
- Displaying API response data
Try it yourself
- Build search app using API
- Display data in cards/table
- Handle error and empty states
18React JS - Error Handling and Error Boundaries
What you'll explore
- try/catch with async code
- Error messages in UI
- Error boundary concept
- Fallback UI
- Debugging React errors
Try it yourself
- Add error UI to API app
- Create error boundary component
- Test failed request state
19React JS - Rendering Optimization
What you'll explore
- Unnecessary re-renders
- React.memo
- useMemo
- useCallback
- Code splitting
- Lazy loading
- React Suspense fallback
Try it yourself
- Optimize a component
- Add lazy loading to one route
- Observe render behavior with console logs
20React JS - Animations
What you'll explore
- CSS transitions in React
- Conditional class animations
- Appear animation
- Enter and leave animations
- React transition libraries overview
- Framer Motion overview
Try it yourself
- Animate cards or modal
- Add page transition idea
- Create simple list enter/leave animation
21React JS - Deployment
What you'll explore
- Git and GitHub setup
- Build command
- Netlify/Vercel deployment
- Environment variables
- Common deployment errors
- Live link sharing
Try it yourself
- Deploy React project
- Share live link
- Update README with screenshots
22React JS - Testing and Final Review
What you'll explore
- Jest introduction
- Component testing idea
- React Testing Library overview
- Mocking basics
- Testing async code overview
- Course recap and Q&A
Try it yourself
- Write one simple test
- Prepare final React capstone
- Present project and answer review questions
Make your learning visible
Projects & practice you can build on
These ideas come from the syllabus. Your teacher will help choose and adapt projects to your level.
- Reusable profile and product cards
- A counter, show/hide toggle and timer with cleanup
- A registration form with validation
- A routed app with navigation and a dynamic detail page
- A shopping-cart counter and shared light/dark theme
- An API search app with loading, empty and error states
- A final React application with routing, API integration, state management, basic tests and a live demo
Where could you go next?
Possible next steps to discuss once you're confident with this syllabus.
Adapted for students and parents from the academy's module-wise syllabus. The downloadable PDF includes the original detailed teaching plan.