Lesson Weekend

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 an Epicodus ticketing system that students can use to request help for programming bugs. We'll call this app Help Queue and it will have full CRUD functionality including the ability to update and delete tickets.

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

Even though we will learn full CRUD in this section, you will only be expected to add CREATE and READ 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, unlike both Rails and .NET, which have a set way of doing things. 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 create-react-app, a command line interface for creating the skeleton of a React application;
  • Using JSX (styled JavaScript), a combination of JavaScript and HTML, to build our components;
  • Building both functional and class components;
  • Using props and PropTypes;
  • Adding local and shared state to a basic React application;
  • Other important concepts such as binding functions, 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.
  • Functional and class components are used correctly.
  • Application effectively uses local and shared state.
  • Props are used correctly and always include PropTypes.
  • 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 in place by the deadline.

Lesson 1 of 41
Last updated September 14, 2022