HTML CSS to React JS Course
This course takes you from zero React knowledge to building and deploying real-world React applications. You will learn how to think in components, manage state, work with APIs, handle routing and build production-ready projects. Every concept is taught 1-to-1 with real code examples and portfolio-ready projects you will build from scratch.
What will you learn
- Understand the React component model and JSX
- Manage application state with useState and useReducer
- Master all core React hooks including useEffect, useRef, useMemo and useCallback
- Build reusable custom hooks
- Implement routing with React Router
- Connect your app to real APIs using Axios and React Query
- Build forms with validation using React Hook Form
- Manage global state with Redux Toolkit
- Optimise performance and avoid common mistakes
- Deploy React applications to production
Modules and Chapters
Module 1 — React Foundations
- What is React and why it exists
- Virtual DOM and how React renders
- JSX syntax and rules
- Your first React component
- Project setup with Vite
Module 2 — Components and Props
- Functional components
- Props — passing and destructuring
- Children prop
- Component composition
- Rendering lists and conditional rendering
Module 3 — State Management
- useState — all patterns
- State with objects and arrays
- Lifting state up
- Controlled forms and inputs
- useReducer for complex state
Module 4 — React Hooks Complete
- useEffect — dependency array and cleanup
- useRef — DOM access and persisting values
- useMemo and useCallback
- useContext — avoiding prop drilling
- Building custom hooks
Module 5 — Routing
- React Router setup
- Dynamic routes and useParams
- Nested routes and Outlet
- Protected routes
- Programmatic navigation
Module 6 — APIs and Data Fetching
- Fetch and Axios
- Loading and error states
- POST PUT DELETE requests
- React Query for server state
- Custom useFetch hook
Module 7 — Forms and Validation
- Controlled inputs
- React Hook Form
- Validation with Zod
- Form error messages and states
Module 8 — State Management at Scale
- When Context is not enough
- Redux Toolkit setup
- createSlice, actions and reducers
- useSelector and useDispatch
Module 9 — Performance and Deployment
- React.memo and avoiding re-renders
- Code splitting with lazy and Suspense
- React DevTools profiler
- Building for production
- Deploying to Vercel
Module 10 — Portfolio Projects
- Project 1 — Task manager with full CRUD
- Project 2 — Movie search app with API
- Project 3 — E-commerce product listing with cart
- Code review and portfolio guidance
Frequently Asked Questions
Yes, basic JavaScript knowledge is required. We recommend completing our JavaScript Before React module first.
Yes, you will build 3 complete portfolio-ready projects by the end of this course.
Yes, every session is personalised and conducted 1-to-1 at your pace.
Yes, Redux Toolkit is included in the state management module.
Yes, all core hooks and custom hooks are covered in depth.
Yes, you will connect your React apps to real APIs using Axios and React Query.
Yes, a completion certificate will be provided.
Yes, this course is designed to make you job-ready as a React developer with real projects in your portfolio.
Basic TypeScript with React is introduced in the later modules.
Kudos! and close