Create a page component

В сайтах Gatsby есть два основных типа компонентов.

Первый тип — это компоненты страниц. Они содержат все элементы внешнего вида конкретной страницы твоего сайта.

В этом примере мы создадим два компонента страниц: для главной страницы и About.

Создание компонента сайта Gatsby

Надо будет посмотреть, что внутри файла index.js. И сравнить, что было до и что стало после.

Изменям контент главной страницы Создаём новую страницу About Надо поменять названия файлов более атомарно. Не «Создаём новую страницу About», а «Как создать новую страницу компонент React». Надо погуглить, как это называется на программистском)

Второй тип — это Компоненты-кирпичики React.

После того, как мы создали несколько компонентов страниц, время создать несколько компонентов-кирпичиков. Это не официальное название, но очень подходит.

Компоненты-кирпичики — это часть страницы. Например, меню навигации или шапка сайта.

Маленькие компоненты-кирпичики можно комбинировать в компонентах-страницах.

Самое полезное в компонентах-кирпичиках, что их можно использовать в разных местах своего сайта.

В React есть встроенная фича для создания динамичных компонентов — properties или props.

Можно менять props компонентов, чтобы менять их внешний вид, как они будут выглядеть на странице. Это, наверно, про то, как в статье Кода писали.

Когда определяешь аргумент, ему надо дать отдельное обозначение, как на примере. И потом это значение может меняться. А не то, что забил раньше.

Теперь у нас есть две страницы: главная и About, но перейти на них можно только изменив адрес вручную. Поэтому мы добавим ссылки.

Компонент link — это предустановленный компонент, то есть уже существующий в каком-то пакете. В нашем случае в пакете Gatsby. Это значит, что можно импортировать и использовать компонент, вместо того, чтобы писать его самому вручную.

Компонент link позволяет добавлять ссылки на другие страницы твоего сайта. Это похоже на тег <a> в html, но со своими преимуществами. У этого компонента есть prop to, что соответсвует атрибуту href. Значение задаёт адрес, куда ты хочешь сделать ссылку.

Компонент link можно использовать для перехода между страницами сайта Gatsby. Для внешних ссылок он не подходит.

Добавим ссылки на наши страницы.

1. На главной странице импортируем компонент link из пакета Gatsby и добавим ссылку на страницу About.

2. На странице About импортируем компонент link из пакета Gatsby и добавим ссылку на главную страницу.

3. Проверим каждую страницу и увидим, что на них появились ссылки.

[[ Использование компонента ]]

Create a reusable layout component

Создание повторяющихся компонентов.

Если посмотреть на конечный итог тестового блога Gatsby, то можно заметить, что многие части на страницах повторяются: заголовок сайта и навигационное меню.

Конечно, можно прописать их вручную. Но что если их надо будет поменять? А вдруг страниц не две, а десяток или даже сотня? Что тогда делать? Вручную запаришься переписывать.

Вместо этого проще сделать один шаблон Layout, который будет повторяться на разных страницах. Поэтому, когда надо будет сделать изменения, ты меняешь Layout и он меняется везде.

Создадим первый Layout с использованием React prop children.

Компоненты с дочерними элементами.

В дополнение к тем