@alexandrtovmach:"Жаль что нет универсального языка"
RUUA

Строительные блоки Gatsby

В предыдущем разделе мы подготовили локальную среду разработки, установив необходимое программное обеспечение и создав первый сайт Gatsby с помощью "hello world" стартера. Здесь мы детальнее разберемся в коде, этого стартера.

Использование стартеров Gatsby

Мы уже использовали стартер hello world, с помощью команды:

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Данная структура команды применима к любому существующему стартеру Gatsby:

gatsby new [НАЗВАНИЕ_ПРОЕКТА] [ССЫЛКА_НА_GIT_РЕПОЗИТОРИЙ_СТАРТЕРА]

Запуская данную команду без URL-адреса, Gatsby-CLI автоматически создаст проект на основе стартера по умолчанию. В этом разделе мы продолжим использовать проект "Hello World", созданный в предыдущей части руководства.

✋ Привет код

Откроем проект "Hello World" с помощью редактора, и рассмотрим структуру файлов и папок, содержащихся в каталоге "hello-world". Это должно выглядеть примерно так:

01-hello-world-vscode

Заметка: опять же, здесь показан редактор Visual Studio Code. Если ты используешь другой редактор, он будет выглядеть немного иначе (😱 да ладно)

Посмотрим на код, который приводит в действие домашнюю страницу.

💡 Если ты остановил сервер разработки после запуска gatsby development, запусти его снова ― самое время внести некоторые изменения в сайт hello-world!

Знакомство со страницами Gatsby

Открываем каталог /src в редакторе. Внутри находится один каталог: /pages.

Посмотрим файл в src/pages/index.js. Код внутри создает компонент, который содержит один элемент <div> и некоторый текст ― "Hello world!".

✋ Внесение изменений в домашнюю страницу Hello World

  1. Изменим текст "Hello World!" на "Hello Gatsby!" и затем сохраним файл. Если окно браузера и редактора расположены рядом друг с другом, то можно заметить как изменения в коде и содержимом практически мгновенно отображаются в браузере после сохранения файла.

💡 Gatsby использует hot-reload, чтобы ускорить процесс разработки. По сути, когда используется сервер разработки Gatsby, файлы проекта находятся под наблюдением в фоновом режиме и каждый раз, когда сохраняется файл, изменения будут немедленно отображены в браузере. Не нужно обновлять страницу или перезагружать сервер ― изменения просто появляются.

  1. Теперь вы можете сделать ваши изменения чуть более заметными. Попробуйте заменить код в src/pages/index.js на приведенный ниже код и сохраните снова. Вы увидите изменения в тексте - цвет текста будет фиолетовым, а размер шрифта будет больше.
import React from "react"

export default () => (
  <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
)

💡 Мы расскажем больше о стилях в Gatsby в часть вторая руководства.

  1. Удалите размер шрифта, измените текст "Hello Gatsby!" На заголовок первого уровня и добавьте абзац под заголовком.
import React from "react"

export default () => (
  <div style={{ color: `purple` }}>    <h1>Hello Gatsby!</h1>    <p>What a world.</p>  </div>
)

03-more-hot-reloading

  1. Добавьте изображение. (В данном случае случайное изображение из Unsplash).
import React from "react"

export default () => (
  <div style={{ color: `purple` }}>
    <h1>Hello Gatsby!</h1>
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />  </div>
)

04-add-image

Подождите ... HTML в нашем JavaScript?

Если вы знакомы с React и JSX, не стесняйтесь пропустить этот раздел . Если вы раньше не работали с платформой React, вам может быть интересно, что делает HTML в функции JavaScript. Или почему мы импортируем `реагировать 'на первую строку, но, похоже, нигде не используем его. Этот гибридный HTML-in-JS на самом деле является синтаксическим расширением JavaScript для React, называемым JSX. Вы можете следовать этому уроку без предварительного опыта работы с React, но если вам интересно, вот краткий учебник ...

Рассмотрим исходное содержимое файла src/pages/index.js:

import React from "react"

export default () => <div>Hello world!</div>

В чистом JavaScript это выглядит примерно так:

import React from "react"

export default () => React.createElement("div", null, "Hello world!")

Теперь вы можете заметить использование 'реагировать' на импорт! Но ждать. Вы пишете JSX, а не чистый HTML и JavaScript. Как браузер читает это? Краткий ответ: это не так. Сайты Gatsby поставляются с инструментами, уже настроенными для преобразования исходного кода во что-то, что браузеры могут интерпретировать.

Сборка с компонентами

Домашняя страница, в которую вы только что вносили изменения, была создана путем определения компонента страницы. Что именно является "компонентом"?

В широком смысле компонент является строительным блоком для вашего сайта; Это автономный кусок кода, который описывает раздел пользовательского интерфейса (пользовательский интерфейс).

Gatsby построен на React. Когда мы говорим об использовании и определении ** компонентов **, мы действительно говорим о ** компонентах React ** - автономных фрагментах кода (обычно написанных с использованием JSX), которые могут принимать входные и возвращаемые элементы React, описывающие раздел пользовательского интерфейса. ,

Одно из больших умственных сдвигов, которое вы делаете, когда начинаете строить с компонентами (если вы уже являетесь разработчиком), это то, что теперь ваши CSS, HTML и JavaScript тесно связаны и часто живут даже в одном и том же файле.

Хотя это, казалось бы, простое изменение, оно имеет глубокие последствия для того, как вы думаете о создании веб-сайтов.

Возьмите пример создания пользовательской кнопки. Раньше вы создавали класс CSS (возможно, ".primary-button") со своими пользовательскими стилями, а затем всякий раз, когда вы хотите применить эти стили, например,

<button class="primary-button">Click me</button>

В мире компонентов вы вместо этого создаете компонент PrimaryButton со своими стилями кнопок и используете его на своем сайте, например:

<PrimaryButton>Click me</PrimaryButton>

Компоненты становятся базовыми строительными блоками вашего сайта. Вместо того, чтобы ограничиваться строительными блоками, которые предоставляет браузер, например <button/>, вы можете легко создавать новые строительные блоки, которые элегантно соответствуют потребностям ваших проектов.

✋ Использование компонентов страницы

Любой компонент React, определенный в src/pages/*. Js, автоматически становится страницей. Давайте посмотрим на это в действии.

У вас уже есть файл src/pages/index.js, который входит в состав" Hello World ". Давайте создадим о странице.

  1. Создайте новый файл в src/pages/about.js, скопируйте следующий код в новый файл и сохраните.
import React from "react"

export default () => (
  <div style={{ color: `teal` }}>
    <h1>About Gatsby</h1>
    <p>Such wow. Very React.</p>
  </div>
)
  1. Перейдите по адресу http://localhost: 8000/about/.

05-about-page

Просто поместив компонент React в файл src/pages/about.js, теперь у вас есть страница, доступная в/about.

✋ Использование подкомпонентов

Допустим, и домашняя страница, и страница о ней стали достаточно большими, и вы много чего переписывали. Вы можете использовать подкомпоненты, чтобы разбить пользовательский интерфейс на куски многократного использования. Обе ваши страницы имеют заголовки <h1> - создайте компонент, который будет описывать заголовок.

  1. Создайте новый каталог в src/components и файл в этом каталоге с именемheader.js.
  2. Добавьте следующий код в новый файл src/components/header.js.
import React from "react"

export default () => <h1>This is a header.</h1>
  1. Измените файл about.js, чтобы импортировать компонент Header. Замените разметку h1 на<Header/>:
import React from "react"
import Header from "../components/header"
export default () => (
  <div style={{ color: `teal` }}>
    <Header />     <p>Such wow. Very React.</p>
  </div>
)

06-header-component

В браузере текст заголовка "About Gatsby" теперь должен быть заменен на "Это заголовок". Но вы не хотите, чтобы на странице "About" говорилось "Это заголовок". Вы хотите сказать " О Gatsby ".

  1. Вернитесь в src/components/header.js и внесите следующие изменения:
import React from "react"

export default props => <h1>{props.headerText}</h1>
  1. Вернитесь к src/pages/about.js и внесите следующие изменения:
import React from "react"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Header headerText="About Gatsby" />     <p>Such wow. Very React.</p>
  </div>
)

07-pass-data-header

Теперь вы должны снова увидеть текст заголовка "About Gatsby"!

Что такое "реквизит"?

Ранее вы определили компоненты React как фрагменты кода, которые можно повторно использовать, описывающие пользовательский интерфейс. Чтобы эти многократно используемые элементы были динамичными, вы должны иметь возможность предоставлять им разные данные. Это делается с помощью ввода, называемого "реквизит". Реквизит - это (достаточно) свойства, предоставляемые компонентам React.

В about.js вы передали пропуheaderText со значением " About Gatsby " импортированному подкомпоненту Header:

<Header headerText="About Gatsby" />

В заголовке header.js компонент header ожидает получения проповеди headerText (потому что вы написали, что ожидаете этого). Таким образом, вы можете получить к нему доступ так:

<h1>{props.headerText}</h1>

💡 В JSX вы можете встроить любое выражение JavaScript, заключив его в {}. Вот как вы можете получить доступ к свойству headerText (или "prop!") Из объекта "props".

Если вы передали другую подпорку нашему компоненту <Header/>, вот так ...

<Header headerText="About Gatsby" arbitraryPhrase="is arbitrary" />

... вы также могли бы получить доступ к подпрограмме "произвольный_фраза": {props.arbitraryPhrase}.

  1. Чтобы подчеркнуть, как это делает ваши компоненты многократно используемыми, добавьте дополнительный компонент <Header/> на страницу about, добавьте следующий код в файл src/pages/about.js и сохраните.
import React from "react"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Header headerText="About Gatsby" />
    <Header headerText="It's pretty cool" />     <p>Such wow. Very React.</p>
  </div>
)

08-duplicate-header

И там у вас есть это; Второй заголовок - без переписывания кода - путем передачи разных данных с использованием реквизита.

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

Компоненты макета предназначены для разделов сайта, которыми вы хотите поделиться на нескольких страницах. Например, сайты Gatsby обычно имеют компонент макета с общим верхним и нижним колонтитулами. Другие общие элементы, добавляемые в макеты, включают в себя боковую панель и/или меню навигации.

Вы будете изучать компоненты макета в часть третья.

Ссылки между страницами

Вы будете часто хотеть связать между страницами - Давайте посмотрим на маршрутизацию на сайте Gatsby.

✋ Использование компонента <Link/>

  1. Откройте компонент страницы индекса (src/pages/index.js), импортируйте компонент<Link/>из Gatsby, добавьте компонент<Link/>над заголовком и присвойте емуtoсвойство со значением"/contact/"для пути:
import React from "react"
import { Link } from "gatsby"import Header from "../components/header"

export default () => (
  <div style={{ color: `purple` }}>
    <Link to="/contact/">Contact</Link>     <Header headerText="Hello Gatsby!" />
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

Когда вы нажимаете на новую ссылку "Контакты" на главной странице, вы должны увидеть ...

09-dev-404

... разработка Gatsby 404 стр. Зачем? Потому что вы пытаетесь создать ссылку на страницу, которая еще не существует.

  1. Теперь вам нужно создать компонент страницы для нашей новой страницы "Контакт" в src/pages/contact.js и сделать так, чтобы он ссылался на домашнюю страницу:
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Link to="/">Home</Link>
    <Header headerText="Contact" />
    <p>Send us a message!</p>
  </div>
)

После сохранения файла вы должны увидеть страницу контактов и иметь возможность установить связь между ним и домашней страницей.

Компонент Gatsby <Link/> предназначен для создания ссылок между страницами вашего сайта. Для внешних ссылок на страницы, которые не обрабатываются вашим сайтом Gatsby, используйте обычный тег HTML <a>.

Развертывание сайта Gatsby

Gatsby.js - это генератор современных сайтов, что означает отсутствие серверов для настройки или сложных баз данных для развертывания. Вместо этого команда Gatsby build создает каталог статических файлов HTML и JavaScript, которые вы можете развернуть на хостинге статического сайта.

Попробуйте использовать Surge для развертывания вашего первого веб-сайта Gatsby. Surge является одним из многих "статических хостов сайтов", которые позволяют развертывать сайты Gatsby.

Если вы еще не установили & amp; настройте Surge, откройте новое окно терминала и установите инструмент командной строки:

npm install --global surge

# Then create a (free) account with them
surge

Затем создайте свой сайт, выполнив следующую команду в терминале в корне вашего сайта (совет: убедитесь, что вы запускаете эту команду в корне своего сайта, в данном случае в папке hello-world, которую вы можете сделать, открыв новую вкладку в том же окне, которое вы использовали для запуска gatsby develop):

gatsby build

Сборка должна занять 15-30 секунд. Когда сборка завершена, интересно взглянуть на файлы, которые команда gatsby build только что подготовила для развертывания.

Посмотрите список сгенерированных файлов, введя следующую команду терминала в корень вашего сайта, которая позволит вам взглянуть на каталог public:

ls public

Затем, наконец, разверните свой сайт, опубликовав сгенерированные файлы в surge.sh.

surge public/

Как только это закончится, вы должны увидеть в своем терминале что-то вроде:

surge-deployment

Откройте веб-адрес, указанный в нижней строке (lowly-pain.surge.sh в этом дело) и вы увидите ваш недавно опубликованный сайт! Отличная работа!

➡️ Что дальше?

В этом разделе вы:

  • узнал о стартерах Gatsby и о том, как использовать их для создания новых проектов
  • узнал о синтаксисе JSX
  • узнал о компонентах
  • узнал о компонентах и подкомпонентах страницы Gatsby
  • узнал о "опорах" React и повторном использовании компонентов React

Теперь перейдите к добавлению стилей на наш сайт!