How This Book Is Structured

What's the point of React?

Lesson 0 - Object Elements

Lesson 1 - Element Factory

Lesson 2 - JSX

Lesson 3 - Nested Elements

Lesson 4 - Components

Lesson 5 - Props

Lesson 6 - Prop Types

Lesson 7 - Nested Components

Lesson 8 - Class Components

Lesson 9 - Lifecycle Methods

Lesson 10 - Example App

Lesson 11 - More Lifecycle Methods

Lesson 12 - Refactoring Components

Lesson 14 - Refs

Lesson 15 - Simple Integration

Lesson 16 - Advanced Integration

Lesson 18 - ES215

Virtual DOM Primer

Changelog

A gentle introduction to React, using the JavaScript you already know

React from Zero

In the last few chapters, we learned the basics of 

, which allows us to pass values from parent components down into child components.

But one thing is missing: we haven't talked about 

 for a minute (the "call-site") and explore how nesting works here (then we'll move back to JSX).

This would translate to the plain JavaScript version:

React.createElement(
  "p", // first
  null, // second
  React.createElement("em", null, "Hello"), // third
  ", world!" // fourth
);

# Lesson 7 - Nested Components

In the last few chapters, we learned the basics of `props`, which allows us to pass values from parent components down into child components.

But one thing is missing: we haven't talked about _how_ to nest components into each other.

## Call-Site Nesting

Let's go back to using `React.createElement` for a minute (the "call-site") and explore how nesting works here (then we'll move back to JSX).

To refresh, let's create a `` element with an `` element and a text element as children.

```html

 Hello, world!

```

![Hello, World!](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/07-nested-components/hello-world.png)

This would translate to the plain JavaScript version:

```javascript
React.createElement(
 "p", // first
 null, // second
 React.createElement("em", null, "Hello"), // third
 ", world!" // fourth
);
```