Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Layout, Routing, and Core UI Patterns in React

via CodeSignal

Go to class Write review

Overview

Transform your app into a multi-page experience by building a persistent layout and configuring React Router. You’ll implement navigation, reusable UI components, and a searchable catalog powered by mock data while learning key patterns for structuring React applications.

Syllabus

  • Unit 1: Layout and Routing Setup
    • Explore the Layout and Router
    • Add an “About” Page and Wire It into the Router
    • Building the Navigation Bar with NavLinks
    • Defining Routes in React Router
  • Unit 2: Creating UI Components
    • Observing Foundational UI Components in Action
    • Implementing a Reusable Search Input Component
    • Implementing a Pagination Component
    • Creating a Loading Spinner Component
    • Wiring Up Components in the UI Demo Page
  • Unit 3: Displaying Mock Data
    • Observing the Catalog with Mock Data and Filtering
    • Implementing the BookGrid Component
    • Hooking Up Components in the Catalog Page
    • Implementing Filtering and Pagination Logic in CatalogPage
  • Unit 4: Building a Reading List
    • Observing the Dynamic Reading List Feature
    • Implementing In-Memory Data Functions for Mock Books
    • Adding a Reading List Route and Navigation Link
    • Implementing the Reading List View Logic

Reviews

Start your review of Layout, Routing, and Core UI Patterns in React

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.