Где-то между использованием редактора WYSIWYG, такого как Wix, и созданием собственного стека с нуля с помощью чего-то вроде Webpack, используется такая структура, как Gatsby.
Gatsby более известен как генератор статических сайтов, хотя он также конкурирует с полнофункциональными фреймворками серверного рендеринга, такими как Next.js и SvelteKit. Gatsby прилагает все усилия, чтобы сделать процесс разработки удобным и простым, одновременно предоставляя необходимые функции веб-сайта, такие как современные размытые изображения, готовые к использованию.
Но в отличие от Next.js или SvelteKit, Gatsby — это чисто интерфейсный фреймворк, а не полнофункциональный. Поэтому Node.js необходим для разработки, а не для развертывания. Для этого Gatsby поддерживает несколько платформ развертывания по щелчку, включая Netlify и Gatsby Cloud.
Давайте сразу углубимся — это лучший способ понять, как работает «Гэтсби» и что он предлагает. Вам понадобится доступ к командной строке для установки Node.js/NPM, а также к Git, который используется для загрузки стартового набора. Получив доступ к NPM из командной строки, используйте его для глобальной установки Gatsby, набрав npm install -g gatsby-cli.
Когда это будет завершено, вы сможете ввести gatsby -v и получите ответ с установленной версией. Начните создавать новое приложение с помощью gatsby new. Гэтсби в значительной степени будет держать вас за руку на протяжении всего интерактивного процесса, и любой ваш выбор можно будет изменить позже. Я назвал свой проект «Моя демо» и принял местоположение my-demo по умолчанию.
На вопрос о том, какую CMS использовать, вы можете ответить «Нет (или я добавлю позже)». То же самое касается процессоров CSS. Вы можете оставить пустыми поля для добавления дополнительных плагинов.
Запустите стартовое приложение Gatsby.
Теперь вы можете запустить приложение в режиме разработки, выполнив cd– заходим в новый каталог (my-demo) и набираем gatsby develop.
После запуска вы можете посетить localhost:8000 и увидеть экран приветствия, как показано на рисунке 1.
Рисунок 1. Экран приветствия Гэтсби
ИДГГорячая замена модуля
Gatsby поставляется с активной HMR (горячей заменой модуля), так что продолжайте и измените <title> элемент в /src/pages/index.js, который будет <title>My Home Page></title> и вы сразу увидите это изменение, отраженное в браузере. (Убедитесь, что приложение работает в режиме разработки; либо запустите процесс в фоновом режиме, либо откройте новое окно командной строки.)
Добавить страницу
Gatsby построен на React, поэтому в вашем распоряжении полный спектр возможностей React. Ключевым фактом разработки в Gatsby является то, что каждая страница является компонентом React. Даже индексная страница является компонентом React. Вы можете убедиться в этом, открыв этот файл и заметив, что он определяет функцию (const IndexPage = () => { return (...)), а затем экспортирует его как модуль JS (export default IndexPage). Короче говоря, файл index.html экспортирует функциональный компонент React, который представляет индексную страницу.
Давайте добавим новую страницу и сделаем это очень просто. Создайте новый файл /src/pages/mypage.js и скопируйте в него содержимое листинга 1.
Листинг 1. Добавление простой страницы
import * as React from "react";
const MyPage = () => { return (
My New Page
)}
export default MyPage;
Добавление навигации
Вы можете посетить новую страницу по адресу localhost:8000/mypage. Теперь добавьте ссылку с вашей новой страницы на индексную страницу. Добавьте встроенный компонент Link Gatsby, импортировав его:
import { Link } from 'gatsby'
Теперь добавьте его на свою страницу с помощью <Link to="https://www.infoworld.com/">Home</Link>. Появится ссылка, и вы сможете щелкнуть ее, чтобы перейти на индексную страницу.
Создание общего компонента
Теперь добавьте новый файл src/comComponents/Dog.js. (Обратите внимание, что вы также добавляете каталог компонентов.) Поместите содержимое листинга 2 в этот файл.
Листинг 2. Компонент Dog
cat src/components/Dog.js
import * as React from "react";
const DogComponent = ({ name }) => {
return (
{name} says Woof!
)}
export default DogComponent;
Это типичный повторно используемый компонент React, который принимает один реквизит (name), который затем используется в разметке через синтаксис токена. Вы можете использовать его в компонентах страницы, как показано в листинге 3.
Листинг 3. Использование компонента Dog
import Dog from '../components/Dog.js';
//...
<Dog name="Buster" />
Здесь нет ничего специфичного для Гэтсби, за исключением того факта, что ваши общие компоненты не заходите в каталог страниц. (Обратите внимание, что в названии каталога компонентов нет ничего особенного.)
Использование изображений
Одна из претензий «Гэтсби» на славу — это сложная имиджевая поддержка. Теперь это доставляется через официальные плагины. Давайте добавим изображения в компонент Dog. Начните с установки пакетов NPM, как показано в листинге 4.
Листинг 4. Установка плагинов образа и зависимостей
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
В листинге 4 установлены четыре различных плагина, используемых Gatsby для обработки изображений и загрузки их из файловой системы. Теперь зарегистрируйте плагины в Gatsby, отредактировав файл gatsby-config.js в корневом каталоге проекта. Этот файл имеет пустую запись о плагинах в экспорте модуля. Добавьте записи плагина, показанные в листинге 5.
Листинг 5. Регистрация плагинов изображений в gatsby-config.js
plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp` ]
Два плагина изображений включают один для динамических изображений (изображений, которые управляются данными, т. е. которые могут меняться в зависимости от состояния приложения) и один для статических изображений, которые всегда остаются неизменными. В данном случае мы просто собираемся использовать статическое изображение.
Откройте файл /src/comComponents/dog.js и добавьте импорт и компонент, как показано в листинге 6.
Листинг 6. Использование компонента StaticImage
import * as React from "react";
import { StaticImage } from "gatsby-plugin-image";
const DogComponent = ({ name }) => {
return (
<div>
Foo2
<div>
<StaticImage src="https://www.infoworld.com/article/3646408/https://dogtime.com/assets/uploads/gallery/shih-tzu-dog-breed-pictures/shih-tzu-breed-picture-1.jpg" alt="A Shitzu" width={350} height={350}/>
</div>
<span>{name} says Woof!</span>
</div>
)}
export default DogComponent;
В листинге 6 компонент StaticImage импортируется из пакета gatsby-plugin-image и используется для отображения изображения по заданному URL-адресу. Обратите внимание: если вы хотите загружать файлы из локальной файловой системы, вам также необходимо импортировать файловую систему gatsby-source-filesystem и настроить ее так, чтобы она указывала на местоположение(я), где находятся ваши файлы изображений (см. здесь). Если вы хотите использовать динамические изображения, вы используете компонент GatsbyImage и должны включить подключаемый модуль gatsby-transformer-sharp.
Гэтсби и GraphQL
Еще одной примечательной особенностью Gatsby является интенсивное использование GraphQL, языка запросов, созданного Facebook. GraphQL может извлекать данные из многочисленных источников для использования вашими компонентами. Эта возможность используется во многих плагинах Gatsby для унификации способа загрузки данных.
Я собираюсь дать вам представление о том, как это работает, извлекая данные из информации, определенной в файле gatsby-config.js. Аналогичный процесс используется для доступа к файлам файловой системы и данным из систем управления контентом и баз данных.
Сначала посмотрите gatsby-config.js. Обратите внимание, что он экспортирует несколько полей метаданных, как показано в листинге 7.
Листинг 7. Экспорт gatsby-config.js
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
title: "My Demo",
}
Теперь откройте файл src/pages/mypage.js и получите доступ к этим метаданным, как показано в листинге 8.
Листинг 8. Доступ к метаданным с помощью GraphQL
import * as React from "react";
import { Link, useStaticQuery, graphql } from 'gatsby';
import Dog from '../components/Dog.js';
const MyPage = () => {
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
title
}
}
}
`)
return (
<main>{data.site.siteMetadata.title}
<Link to="https://www.infoworld.com/">Home</Link>
<br />
<Dog name="Buster" />
</main>
)}
export default MyPage;
Изменения в листинге 8 начинаются с импорта useStaticQuery и graphql пакеты из gatsby. В теле разметки вы можете увидеть токен доступа к метаданным сайта с помощью {data.site.siteMetadata.title}. Но откуда эти данные?
Перед return инструкции, переменная данных заполняется вызовом useStaticQuery, и это определяет запрос GraphQL, который обращается к метаданным сайта. Эти запросы имеют доступ к переменным страницы, таким как параметры запроса, и, таким образом, могут быть полностью динамическими при доступе к хранилищу данных (т. е. с использованием идентификаторов объектов).
GraphQL, вероятно, является самым большим препятствием на пути внедрения Gatsby из-за его сложного интерфейса. Но в долгосрочной перспективе GraphQL предоставляет мощный подход к унифицированным запросам данных.
Великий Гэтсби
Вы почувствовали вкус некоторых способностей Гэтсби. Gatsby имеет обширную экосистему плагинов, включающую как официальные, так и созданные сообществом плагины. Это хорошее место для начала, когда вам что-то нужно.
Gatsby продолжает развиваться, чтобы идти в ногу с изменениями в отрасли. Это заманчивый вариант, особенно если вы хотите создавать статические сайты, такие как блоги.
Узнайте больше о разработке JavaScript
- Простой автоматизированный конвейер сборки для Node.js
- Практический опыт работы с REST API Dropwizard
- Практический опыт работы с MarkoJS
- Практический опыт работы с SolidJS
- Практический опыт работы со SvelteKit
- Практический опыт со Svelte
- Практический опыт работы с MarkoJS
- Как использовать Auth0 с Node.js и Express
- Как использовать FilePond с Node.js
- Практический опыт работы с CodeSandBox
- 7 инструментов, меняющих разработку JavaScript
- 10 советов по настройке производительности React UI
- Как использовать параллельный режим React
- Как обрабатывать взаимодействие компонентов в React
- Как обрабатывать ошибки в React
- Как использовать функциональные компоненты React
