В JSX фигурные скобки указывают на выражение JavaScript, которое должно возвращать значение. Переданные данные доступны через props в определенном компоненте.
Затем добавим наши библиотеки React. В разделе 'External JavaScript' выберите раскрывающийся список 'Quick-add' и добавьте библиотеки 'React' и 'React DOM'.
Заметил, как мы использовали объект props для рендеринга значений заголовка и тела, которые будут переданы компоненту Blog. Props доступны только для чтения или неизменяемы, поэтому нам не нужно беспокоиться об изменении значений props.
Перед тем, как написать наш компонент App, мы должны защитить наш компонент будет определение типа переменной, которая передается каждому props. Мы определим это с помощью React.PropTypes. Добавьте в свой файл JavaScript следующее.
Здесь мы определяем, что данные, переданные нашему компоненту Blog, будут строками для заголовка и тела. Ознакомьтесь с [документацией React](https://reactjs.org/docs/typechecking-with-proptypes.html) для списка всех propTypes.
Теперь давайте сделаем это вместе в компоненте приложения и передадим наши данные.
```javascript
const App = props => {
return (
<div>
<Heading/>
<Blogtitle={blogData.title}body={blogData.body}/>
<Blogtitle={blogData.title}body={blogData.body}/>
<Blogtitle={blogData.title}body={blogData.body}/>
</div>
);
};
```
Наконец, давайте отрисуем наше приложение (обязательно добавьте тэг root `<div>` в HTML-файл):