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 lesson, we learned how to create simple component that encapsulated elements and data. In this lesson, we will find out 

how to pass data from the outside into a component.

We've already used props when we worked with elements in the earlier chapters. For example, when we set 

The props of this example get compiled to a props-object, which will look like this:

{
  className: "black-text",
  style: {
    fontSize: 42
  }
}

Now, what happens if we pass props to a custom component, one that we've created?

Here is some JSX where the custom component 

var reactElement = <MyComponent className="abc" customData="world" />;

# Lesson 5 - Props

In the last lesson, we learned how to create simple component that encapsulated elements and data. In this lesson, we will find out **how to pass data from the outside into a component.**

## Call-Site Props

We've already used props when we worked with elements in the earlier chapters. For example, when we set `className` or `style` we're using props.

```javascript
<p className="black-text" style={{ fontSize: 42 }}>
  Text
</p>
```

![Text Element](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/05-properties/text-element.png)

The props of this example get compiled to a props-object, which will look like this:

```javascript
{
  className: "black-text",
  style: {
    fontSize: 42
  }
}
```

This object is passed into the `React.createElement()` function as the second/`props` argument (or `null` when no props are used).

Now, what happens if we pass props to a custom component, one that we've created?

Here is some JSX where the custom component `MyComponent` is used and it receives two `props`: `className` and `customData`, which both have a string value:

```javascript { actualFilename=code/react-from-zero/05-properties.html endLine=29 startLine=29 statedFilename=react-from-zero/05-properties.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/react-from-zero/05-properties.html#L29 }
var reactElement = <MyComponent className="abc" customData="world" />;
```