React.js Full Course: Beginner to Advanced

Free React.js course for beginners. 30 lessons in simple English: JSX, props, state, hooks, forms, React Router, data fetching, performance, testing and deploy.

All levels · 30 lessons

Start Here

  1. What Is React? Why Use It and How It Works - Learn what React is in easy words, why people use it, and the three big ideas: components, state and the virtual DOM.
  2. Set Up React with Vite: Your First Project Step by Step - Install the tools, create your first React project with Vite, and learn what each file does. Run it in your browser.
  3. JSX Explained Simply: Write HTML Inside JavaScript - Learn JSX in simple steps: the rules, curly braces, className and styles, and the small mistakes every beginner makes.
  4. React Components and Props Explained with Examples - Build components and send data to them with props. Learn defaults, children, and how to split a page into small parts.
  5. React useState Explained: Make Your Page React to Change - Learn state with useState using a counter, a toggle and a text box, and why you must never change state directly.
  6. Handling Events in React: Clicks, Typing and Forms Made Simple - React to clicks, typing and form submit. Learn the event object, how to pass values, and the most common event mistakes.
  7. Conditional Rendering in React: Show and Hide Things the Easy Way - Show different content with if, ternary, && and early return. Build loading, empty and error screens the easy way.
  8. Rendering Lists in React: map(), Keys, Filter and Sort Explained - Show lists with map, learn why keys matter, and filter, sort, add and remove items without breaking your state.
  9. React Forms and Controlled Inputs: Text, Checkbox, Select and Submit - Build forms the React way. Use controlled inputs, checkboxes, selects, simple checks and helpful error messages.
  10. Styling React Apps: CSS, CSS Modules, Inline Styles and Tailwind - Compare plain CSS, CSS Modules, inline styles and Tailwind. Make pages that fit phones and support dark mode.

Hooks and Data

  1. React useEffect Explained: Side Effects, Dependencies and Cleanup - Understand useEffect in plain words: side effects, the dependency array, cleanup, and when you do not need it.
  2. Fetching Data in React: fetch, Loading, Errors and Cancelling Requests - Load data from an API safely. Show loading and error messages, cancel old requests and send data with POST.
  3. React useRef Explained: Access the DOM and Keep Values Without Redrawing - Learn useRef: focus an input, scroll to an element, keep a timer id, and know when to use a ref and not state.
  4. Lifting State Up and Component Composition in React - Learn where state should live, how two components share data through a parent, and how children avoid prop drilling.
  5. React useReducer Explained: Manage Complex State with Actions - Learn useReducer with a to-do list. Understand actions, reducers and when to choose it over useState.
  6. React Context API Explained: Share Data Without Passing Props - Share data like the theme or user without passing props. Learn createContext, Provider and useContext with examples.
  7. React Custom Hooks: Reuse Logic Between Components - Write your own hooks: useToggle, useLocalStorage, useFetch and useDebounce. Reuse logic in many components.
  8. React Router: Multiple Pages, Links, Params, Layouts and Protected Routes - Build a multi-page app with React Router: routes, links, URL params, layouts, 404 page and protected routes.
  9. Advanced React Forms: FormData, Validation Rules and React Hook Form - Go further with forms: FormData, clean validation, helpful errors, and when React Hook Form is worth using.
  10. How React Renders: Pure Components, Re-renders, Batching and StrictMode - See what happens when React draws a component. Learn pure components, re-renders, batching and StrictMode.

Advanced React

  1. React Performance: memo, useMemo, useCallback and When Not to Use Them - Find slow parts and fix them with memo, useMemo, useCallback and debounce, without adding code you do not need.
  2. React Code Splitting: lazy, Suspense and Faster First Load - Make the first load faster by loading code only when needed. Learn lazy, Suspense and route splitting.
  3. React Error Boundaries and Portals: Safe Crashes, Modals and Tooltips - Stop one bug from crashing the whole page with error boundaries, and build safe modals and tooltips with portals.
  4. React State Management: Redux Toolkit and Zustand Explained for Beginners - Learn when you need a state library. See the same cart built with Redux Toolkit and with Zustand.
  5. TanStack Query (React Query): Fetching, Caching and Updating Server Data - Load, cache and update server data with TanStack Query. Learn useQuery, query keys, mutations and refetching.
  6. Testing React Apps with Vitest and React Testing Library - Write tests that act like a user with Vitest and React Testing Library. Test forms, data loading and hooks.
  7. React Accessibility (a11y): Build Apps Everyone Can Use - Build apps everyone can use: real HTML, labels, keyboard use, focus, colour contrast and how to test it.
  8. React 19 New Features: Actions, useActionState, useOptimistic, use and More - The main React 19 tools in simple words: form actions, useActionState, useOptimistic, use and ref as a prop.
  9. React with TypeScript: A Beginner Guide to Typing Props, State and Events - Learn TypeScript for React: type props, state, events, refs and API data, and understand the errors it shows.
  10. React Project Structure, Best Practices, Deployment and What to Learn Next - Organise a real project, follow clear best practices, deploy your app and plan what to learn next, such as Next.js.