Week 5: React & Next.js Foundations

Core Concepts and Framework Understanding

NoteReading & Tutorial Assignment

Complete these tutorials before Week 6. This is a hands-on week — work through the tutorials at your own pace, but aim to complete all three.

Introduction

This week we shift focus from backend architecture to building a solid foundation in React and Next.js. Many of you have been generating code with AI tools — which is great for productivity — but to debug, modify, and make architectural decisions, you need to understand what that code is doing.

The Lab 4 solution demonstrates four implementations of the same application using different combinations of React, Next.js, Express, and MongoDB. This week’s tutorials will help you understand the core concepts behind those implementations.

Tutorial 1: React Quick Start

Source: react.dev/learn

Estimated time: 60-90 minutes

This is the official React tutorial and the best place to start. It covers:

  • Creating and nesting components — React apps are built from components, which are JavaScript functions that return markup
  • Writing markup with JSX — the HTML-like syntax used inside React components
  • Adding styles — how CSS works with React components
  • Displaying data — using curly braces {} to embed JavaScript in JSX
  • Conditional rendering — showing different content based on conditions
  • Rendering lists — using .map() to transform arrays into elements
  • Responding to events — handling clicks, form submissions, and other user interactions
  • Updating the screen — using useState to manage data that changes
  • Using hooks — built-in functions like useState and useEffect
  • Sharing data between components — lifting state up to parent components

How This Connects to Lab 4

As you work through the React tutorial, notice how every concept appears in the Lab 4 solution:

React Concept Lab 4 Example
Components ProjectCard, ProjectList, TaskList, ProjectForm
Props <ProjectCard project={p} />
State (useState) const [projects, setProjects] = useState([])
Effects (useEffect) Data fetching on component mount
Event handling Form submissions, delete confirmations
Conditional rendering Loading spinners, error messages, empty states
List rendering projects.map(p => <ProjectCard key={p._id} ... />)

Tutorial 2: React Foundations Course

Source: nextjs.org/learn/react-foundations

Estimated time: 45-60 minutes

This Next.js-authored course bridges the gap between vanilla JavaScript, React, and Next.js. It covers:

  • From JavaScript to React — why React exists and what problems it solves
  • Building UI with components — the component mental model
  • Displaying data with props — passing information between components
  • Adding interactivity with state — making components dynamic
  • From React to Next.js — what a framework adds on top of a library
  • Server and Client Components — the key Next.js concept

Key Concept: Server vs. Client Components

This tutorial introduces a critical distinction:

  • Server Components (default in Next.js) — render on the server, send HTML to the browser. Better performance, smaller bundles, can access databases directly.
  • Client Components ('use client') — render in the browser. Required for interactivity: useState, useEffect, onClick, browser APIs.

In the Lab 4 solution: - react-only and react-express-mongo — everything is client-side (no server rendering) - react-nextjs-mongo and react-next-express-mongo — uses both Server and Client Components

Tutorial 3: Next.js Dashboard App

Source: nextjs.org/learn/dashboard-app

Estimated time: 3-5 hours (can be done over multiple sessions)

This is the comprehensive Next.js tutorial that builds a full dashboard application. It covers:

  1. Getting started — project setup and structure
  2. CSS styling — different styling approaches in Next.js
  3. Optimizing fonts and images — Next.js built-in optimizations
  4. Creating layouts and pages — file-based routing and nested layouts
  5. Navigating between pages — the <Link> component and client-side navigation
  6. Setting up your database — connecting to a database
  7. Fetching data — server-side data fetching patterns
  8. Static and dynamic rendering — when content is generated
  9. Streaming — progressive loading with Suspense
  10. Partial prerendering — combining static and dynamic content
  11. Adding search and pagination — URL-based state with search params
  12. Mutating data — Server Actions for data modifications
  13. Handling errors — error boundaries and error handling
  14. Improving accessibility — form validation and accessibility
  15. Adding authentication — NextAuth.js integration
  16. Adding metadata — SEO optimization

How This Connects to Lab 4

Dashboard Tutorial Chapter Lab 4 Equivalent
Layouts and Pages layout.js and page.js in Next.js variants
Navigating Between Pages <Link> component usage
Fetching Data useEffect + fetch in client components, API routes
Mutating Data Form submissions to create/update/delete projects
Handling Errors Error states in components, try/catch in API calls
Adding Authentication (Preview of Lab 6)

Understanding the Four Architectures

As you work through the tutorials, keep the Lab 4 solution architectures in mind:

Architecture 1: React Only (No Server)

Browser → React Components → localStorage
  • All tutorials from react.dev apply directly
  • No server concepts (no Server Components, no API routes)

Architecture 2: React + Express + MongoDB

Browser → React Components → fetch() → Express API → MongoDB
  • React tutorials apply to the frontend
  • Express handles the backend (separate from React)
  • Cross-origin requests require CORS

Architecture 3: Next.js + MongoDB

Browser → Next.js (React + Routing + API Routes) → MongoDB
  • All three tutorials apply
  • Server and Client Components from React Foundations
  • API routes and data fetching from Dashboard App

Architecture 4: Next.js + Express + MongoDB

Browser → Next.js (React + Routing) → Express API → MongoDB
  • Next.js handles frontend only
  • Express handles backend (like Architecture 2)
  • Combines Next.js routing with standalone API

Key Terms

  • Component — A reusable piece of UI, defined as a JavaScript function returning JSX
  • JSX — A syntax extension that lets you write HTML-like markup in JavaScript
  • Props — Read-only data passed from parent to child components
  • State — Data managed within a component that can change over time
  • Hook — A special function (useState, useEffect) that lets components use React features
  • Side Effect — An operation that affects something outside the component (data fetching, DOM manipulation)
  • Server Component — A Next.js component that renders on the server (default)
  • Client Component — A Next.js component marked with 'use client' that renders in the browser
  • File-based Routing — Next.js convention where the file system structure defines URL routes
  • API Route Handler — A Next.js file (route.js) that handles HTTP requests like a backend endpoint

Lab 4 Solution Reference

TipSolution Repository

The Lab 4 solution with all four variants is available at:

github.com/RPI-WS-spring-2026/RPI-WS-LAB4-Solution

Use this as a reference while working through the tutorials. When a tutorial introduces a concept, find the corresponding code in the solution to see it in a real application.

Further Reading