Chapter 2. Baby steps with React

 

This chapter covers

  • Nesting elements
  • Creating a component class
  • Working with properties

This chapter will teach you how to take baby steps with React and lays the foundation for the following chapters. It’s crucial for understanding React concepts such as elements and components. In a nutshell, elements are instances of components (also called component classes). What are their use cases, and why do you use them? Read on!

Note

The source code for the examples in this chapter is at www.manning.com/books/react-quickly and https://github.com/azat-co/react-quickly/tree/master/ch02 (in the ch02 folder of the GitHub repository https://github.com/azat-co/react-quickly). You can also find some demos at http://reactquickly.co/demos.

2.1. Nesting elements

In the last chapter, you learned how to create a React element. As a reminder, the method you use is React.createElement(). For example, you can create a link element like this: 

let linkReactElement = React.createElement('a',
  {href: 'http://webapplog.com'},
  'Webapplog.com'
)

The problem is that most UIs have more than one element (such as a link inside a menu). For example, in figure 2.1, there are buttons in the section, video thumbnails, and a YouTube player.

Figure 2.1. The React Quickly website has many nested UI elements.

2.2. Creating component classes

2.3. Working with properties

2.4. Quiz

2.5. Summary

2.6. Quiz answers

sitemap