2 Baby steps with React

 

This chapter covers

  • Creating a new React project
  • Nesting elements
  • Creating a component class
  • Working with properties

This chapter will teach you how to create a new React project and how to create custom components to render HTML. Both of these concepts will serve as the basis for all future chapters.

First, we’ll examine how to create a new React project. While doing so, we’ll teach you both how to start your own React projects and how to utilize the React template system to quickly instantiate the examples and projects that we’ll work on in this book. It’s quite magical how in a single line you can get the code downloaded and ready to go with everything set up for you!

As we start our first React project, we’ll introduce several fundamental React concepts that you’ll use frequently, including elements, components, and properties. In a nutshell, elements are instances of components that can be passed properties. What are their use cases, and why do you use them? Hang tight for this information until section 2.3 because, right now, we’re going to discuss how to create a new React web application.

Note

The source code for the examples in this chapter is available at https://rq2e.com/ch02. In section 2.2, however, you’ll learn that you don’t have to download anything manually. You can instantiate all the examples from this and subsequent chapters directly from the command line using a single command.

2.1 Creating a new React app

2.1.1 React project commands

2.1.2 File structure

2.1.3 Templates

2.1.4 Pros and cons

2.2 A note about the examples in this book

2.3 Nesting elements

2.3.1 Node hierarchy

2.3.2 Simple nesting

2.3.3 Siblings

2.4 Creating custom components

2.5 Working with properties