Skip to Content
View all events

React the Right Way

Published by Pearson

Intermediate content levelIntermediate

Write Clean, Production-Ready Code in React

  • Learn common mistakes—and how to avoid them—while creating UI components
  • Improve code readability and performance in a React application
  • Learn scaffolding using Create-React-App, Vite, and Nx

This course focuses on writing quality code in React. It identifies the common mistakes made while writing code in React and provides solutions to optimize it. It includes understanding modern day tools like pnpm, Vite, and Nx, how to use proper folder structure, efficiently using hooks, optimizing rerendering, managing services, and using libraries like storybook. Real-world demos are included throughout so you can follow along and get the experience you need. This intermediate React class is geared toward those looking to move beyond the beginner level.

This React course will cover the following: Setup ReactApp with essential configs : package managers (npm,yarn,pnpm), bundlers (webpack vs Vite), linting and tsconfig, husky. And Structuring Code: Folder structure, components breakdown. Plus Managing services : Creating service layer, interceptors, and using custom hooks. Also UI components optimizations: hooks, context api, Reducing useState & useEffect. Finally Performance : reducing rerenders, managing state, analyzing bundle size. And External tools & libraries: storybook bundle analyzer, chromatic, mdx.

You’ll get live, hands-on practice with experienced instructor Aashima Ahuja.

What you’ll learn and how you can apply it

  • How to use pnpm, Vite, and Nx
  • How to configure eslint, prettierrc, tsconfig, and husky
  • How to use hooks—useCallback, useMemo, useRef
  • How to use proper folder structure and managing services
  • How to use tools like storybook, chromatic, and bundle analyzer
  • How to use custom hooks, React.memo, context API, theming

And you’ll be able to:

  • Create React apps using Vite and Nx with all important configurations required for development
  • Write clean and readable code by using proper folder structure, breaking down components, and using custom hooks
  • Manage services properly by creating service layer and using interceptors
  • Optimize UI components making use of hooks, context API, and callback functions
  • Improve performance by reducing extra rerenders and using custom hooks

This live event is for you because...

  • You have basic knowledge of React and are looking to take your coding skills to the next level.
  • You want to write clean and maintainable code.

Prerequisites

  • A working knowledge of modern JavaScript (functions, scopes, classes, and asynchronous calls, etc.)
  • A basic understanding of React, including familiarity with npm and yarn and knowledge of basic hooks, i.e., useState, useEffect, useCallback, and useMemo

Course Set-up

Recommended Preparation

Recommended Follow-up

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

Segment 1: React App setup (15 minutes)

  • Reviewing different package managers: npm, yarn, and pnpm
  • Reviewing different bundlers: webpack, Vite and Nx
  • Creating React app

Configurations (15 minutes)

  • linting, tsconfig, prettierrc, husky, and gitignore

Folder structure (15 minutes)

  • Structuring routes
  • Managing components, hooks, and services
  • Writing CSS and test cases
  • Exercise: Folder structure: Link to be provided during Live Training
  • Q&A (5 minutes)
  • Break (10 minutes)

Segment 2: UI components (50 minutes)

  • Component breakdown (view and container)
  • Efficiently using hooks
  • Reducing rerenders
  • Reducing prop drilling with context API
  • React.memo, custom hooks
  • Using unique Ids
  • Exercise: Custom hook: Link to be provided during Live Training
  • Q&A (5 minutes)
  • Break (5 minutes)

Segment 3: HTTP Service Layer (50 minutes)

  • Exposing APIs in functions
  • Creating interceptors
  • Calling APIs via custom hooks
  • Logging
  • Error handling
  • Exercise: Adding a Data Service: Link to be provided during Live Training
  • Q&A (5 minutes)
  • Break (5 minutes)

Segment 4: External tools and libraries (50 minutes)

  • Setting up storybook
  • Adding MDX documentation
  • Analyzing bundle size via bundle analyzer
  • CDNs VS Node Modules
  • Exercise: Storybook: Link to be provided during Live Training

Course wrap-up and next steps (5 minutes)

Your Instructor

  • Aashima Ahuja

    Aashima Ahuja is a front-end engineer and a content creator. She has a passion for teaching front end. She has taken several trainings all over the world and is an active conference speaker. She has a bachelor's degree in Computer Science and has experience working in Big Tech companies.

    linkedinXsearch

Skill covered

React