It is very useful to be able to pass data into the components. The syntax of passing data into a component is similar to the syntax for assigning attributes in HTML. 

Consider, for example, we have a component called `Main`, and we want to pass a string called `"Hello World"` into it. We can do so using the following code:


```js
<Main text="Hello World" />
In the component ‘Main’, we can access this value though the `props` object:
function Main(props) {
  return <h1>{props.text}</h1>
}
```

The above component will create a `<h1>` element with the "Hello World" text inside it. Notice that we use the term `text` as the attribute name, therefore, when accessing the value from inside the component, we refer to the `text` attribute of the `props` object: `props.text`. The name `text` was an arbitrary choice, in fact, we can name it anything we like, for example:


```js
<Main headingContent="Hello World" />
```

In this case, we will use the term `headingContent` to access the value that has been passed:



```js
function Main(props) {
  return <h1>{props.headingContent}</h1>
}
```

We can also pass multiple strings into a single component:



```js
<Main text_1="First String" text_2="Second String" text_3="Third String" />
```

In this case, the method for accessing the values passed will be the same:

```js
function Main(props) {
  return (
    <div>
      <p>{props.text_1}</p>
      <p>{props.text_2}</p>
      <p>{props.text_3}</p>
    </div>
  );
}
```

To simplify the above code, we can just pass a single array that contains all the strings:

```js
let paragraphs = [
  'First String',
  'Second String',
  'Third String'
]
<Main text={paragraphs} />
```

We can pass values of any data type ranging from integers to complex objects! It is important to note that when passing raw integer values, we need to enclose them in braces:


In this section we will explore why React is useful and why it is worth learning it at all. We will also learn one prerequisite, ES6, which will be used throughout the course.

In this section, we will learn another prerequisite - JSX which will be used throughout the course. Finally, we will explore some example code to get acquainted with React.

In this section we will learn about the essential and practical parts of React excluding the components – which will be covered in the next section. We will look at how JSX can be used with React, and how to create and render more complex elements in the React DOM using JSX. We will also learn how to set up a React based project, and we will explore its structure for deepening our understanding.

In this section you’ll be introduced to React components. We will look at what React components are and why we need them. We will explore the two different types of React components and learn the syntax for creating them. We will use them to create a single page application that displays X.

In this section we will learn more about how to combine JavaScript and JSX to create dynamic content. We will also learn how to pass data between components. In the end we will also explore event handling.

In the end of the previous chapter, we tried making a Todo application though in our attempt to do so we soon discovered that we needed some method for re-rendering the components once the data is updated in a component as React wasn’t automatically doing that for us. In this section we will learn how to fix such issues using ‘Hooks’. We will learn and implement hooks in detail. By the end of this section, you will be able to create stateful components in React and combine them to create complex web applications.

In this chapter we will learn how to add different pages to our React application and render different components based on URL. You will gain sufficient knowledge to be able to create multi-page applications.

Introduction to React

Passing Data into Components