Chapter 2. <Hello World />: our first component
This chapter covers
- Thinking about user interfaces with components
- Components in React
- How React renders components
- Different ways of creating components in React
- Using JSX in React
Chapter 1 talked about React in mostly theoretical terms. If you’re a “show me the code!” kind of person, this chapter is for you. We’ll start looking at React up close in this chapter. As we get into some of React’s API, you’ll build a simple comment box that will help you see the mechanics of React in action and start to solidify a mental model of how React works. We’ll start by building React components without any “syntactic sugar” or conveniences that might obscure the underlying technology. We’ll explore JSX (a lightweight markup language that helps us build React components more easily) at the end of the chapter. In later chapters, we’ll get more complex and see how to create a full app out of React components (Letters Social—check it out at https://social.react.sh), but in this chapter, we’ll keep our scope limited to just a few related components.
Before diving in, let’s take a brief, high-level look at React again to orient ourselves. Figure 2.1 gives you an overview of the core aspects of most React applications. Let’s look at each part: