Creating Our First Create React App Application

In Chapter 1, Introducing Create React App 2, we started off by taking a good, long look at Create React App and some of the options it provides. We even got started with create-react-app and started learning React at a very basic level. What we need to do now, however, is start diving into building an application that will serve as the framework for adding more functionality and testing the limits of Create React App.

To make things extra easy, we're going to build a simple to do list, since that is an application that nearly everyone can understand. It even has a great non-digital analog to it, making it a simple thing to reason about!

In this chapter, we'll cover the following topics:

• Designing a web app
• Building a simple project structure
• Passing values to components via props
• Passing functions to children components...

Creating our first major project

It's now time for us to move forward and start building a real project that will function as the baseline project for all of the other features that we want to explore in this book! To do that, though, let's take a brief moment to talk about how we want to design our application.

Designing our application

It's very difficult to build a project when you're not sure precisely what you're building in the first place, right? When we talk about how to design, build, and plan an application, we need to talk about the problem we're ultimately trying to solve in the first place. With that in mind, let's talk about the theoretical vision for our application.

First...

Summary

By now, you should have a strong grasp on React, how React functions, how to write good JSX and React code, and a bunch of the different gotchas and concerns you can run into. We covered all of this while still getting work done without ever having to go outside of Create React App. Now, we should have the following:

• A working Create React App project
• A more complicated application structure
• An understanding of how to affect parent structures by passing variables and functions as properties
• How to bind functions that may be called from inside event handlers

As we move on from this chapter, we'll dive more deeply into the other features of Create React App and the functionality it supports. It was important for us to have our application built and ready to go to give us room to iterate and explore the real depths of Create React App, so now that we're ready...