React JS Course: Build Modern Front-Ends with Hooks

Explain what React solves and create a new React project with Vite.

• Why frameworks: keeping a growing UI in sync with data
• Single-page apps (SPA) and multi-page apps (MPA)
• Declarative UI, the virtual DOM and re-rendering
• Node.js and npm, and creating a project with Vite
• Project structure, dev server and React DevTools

Node.jsnpmViteVS CodeReact DevTools

Build a small app from function components that respond to user actions.

• JSX and how it becomes JavaScript
• Function components and props
• State with useState
• Handling events
• Conditional rendering
• Rendering lists and why keys matter
• Reading older class components (for awareness only)

Practice: A counter and a shopping-list app · A product card list from local data

Load data from an API and handle loading, empty and error states properly.

• useEffect: when it runs and how to clean up
• Fetching data with fetch or Axios using async/await
• Loading, empty and error states
• CRUD operations against a REST API
• Cancelling stale requests

Fetch APIAxios

Practice: A weather app · A notes app with create, edit and delete

Build a multi-page app with forms and shared state.

• Controlled components and form validation
• Routing with React Router: routes, links, URL parameters, nested layouts
• Lifting state up
• Context API for shared data such as theme or logged-in user
• useReducer for complex state
• Refs with useRef

React Router

Practice: A blog app with routing and full CRUD

Write cleaner components and fix slow renders when they matter.

• Custom hooks to share logic
• useMemo, useCallback and React.memo, and when not to use them
• Error boundaries for graceful failures
• Code splitting with lazy and Suspense
• Measuring performance with the React DevTools Profiler

Practice: Extract a reusable useFetch hook and use it across your apps

Choose and use common libraries for styling, server data and global state.

• Styling: Tailwind CSS, CSS Modules and styled-components
• Server data with TanStack Query (React Query) or SWR
• Global state with Redux Toolkit (basics)
• Using a component library without losing control of your design

Tailwind CSSTanStack QueryRedux Toolkit

Practice: An e-commerce product page with cart state and filters

Test your components and put your React app live on the internet.

• Component tests with Vitest or Jest and React Testing Library
• Linting and formatting with ESLint and Prettier
• Environment variables in Vite, and why secrets never go in front-end code
• Building for production
• Deploying to Vercel or Netlify from GitHub

VitestReact Testing LibraryESLintPrettierVercelNetlify

Compare Vue with React so you can read and pick up a Vue codebase later.

• Vue single-file components and templates
• Directives: v-if, v-for, v-model, v-bind
• The Composition API compared with React hooks
• Vue Router and Pinia in one short demo

VueVite