React

Introduction

This guide is a step-by-step introduction to React.js, one of the most powerful libraries for building modern, interactive web applications. With its component-based architecture, virtual DOM, and declarative approach, React has changed how developers build for the web.

Throughout this guide, you’ll learn core concepts through hands-on examples and progressively build your understanding of React’s capabilities. Here’s what we’ll cover:

Part 1

  • State and JSX interaction

  • Component structure and file organization

  • Props and dynamic rendering

  • Events, spread operator, and preventing defaults

  • Conditional rendering

  • Callbacks, destructuring, and immutability

  • Lifting state up

Part 2

  • API calls with fetch and async handling

  • Side effects with useEffect

  • Third-party libraries and custom components

  • Reading docs and using external tools

  • Persisting data with a backend

  • Deploying your app

Prerequisites

To get the most out of this guide, you should have a basic understanding of:

If you’re not comfortable with these yet, we recommend brushing up on the syntax before diving in.

Setup

Please refer to this setup guide.

PreviousExercise: The NUSMods APINextSetup

Last updated