Skip to main content
Version: v1.4

📓 3.3.0.1 React Fundamentals Objectives

During this course section, we will learn how to build a basic React application that uses local and shared state. Over the course of the section, we will create an application that acts as a ticketing system that students can use to request help for programming bugs. We'll call this app Help Queue and it will have full create, read, update, and delete (CRUD) functionality.

What is CRUD?

CRUD describes the four basic operations almost every data-driven application performs. In Help Queue, create means adding a new ticket, read means viewing the list of tickets, update means editing an existing ticket, and delete means removing a ticket once it has been resolved. Together, these four operations cover the full lifecycle of a ticket in the app.

In later course sections, we'll also use the Help Queue app to learn and implement other programming tools like Firebase and external APIs.

Even though we will learn full CRUD in this section, you will only be expected to add CREATE, READ, and UPDATE functionality for the independent project.

Note that we will be adding full CRUD functionality because knowing how to create, read, update and delete with any language and framework is a useful skill. However, React isn't opinionated. That means there are many ways to structure an application that has CRUD functionality. How that application should be planned and structured depends on other aspects of the UI and the application.

In this course section, we will learn about:

  • Using Vite to scaffold a new React + TypeScript project;
  • Using JSX/TSX, an HTML-like syntax extension, to build our components in React component files;
  • Building functional components with React hooks;
  • Using props typed with TypeScript interfaces;
  • Adding local and shared state to a basic React application;
  • Other important concepts such as unidirectional data flow, reusing components, and passing data through callbacks.

Independent Project Objectives​

At the end of this section, you will complete an independent project. Your code will be reviewed for the following objectives:

  • Application compiles and runs without error, and warnings in the DevTools console are resolved.
  • Components are used correctly.
  • Application effectively uses local and shared state.
  • Props are used correctly and are always typed with TypeScript interfaces.
  • README includes an accurate representation of the application's component tree.
  • Project is in a polished, portfolio-quality state.
  • The prompt's required functionality and baseline project requirements are met.