Для начала я создал репозиторий git, на который я буду ссылаться позже в статье. Вы можете форкнуть это здесь.
Сначала нам понадобится конечная точка для использования. При наличии новой учетной записи на Zesty.io первое, что вас попросят сделать, - это создать веб-ресурс. После того, как вы дадите название своей собственности, она спросит о чертеже. Поскольку мы используем Zesty в качестве автономной CMS, нам не нужно беспокоиться об этом, выберите один или ничего, и приложение-менеджер должно открыться с этого момента. Теперь, когда у нас есть веб-ресурс, нам нужно немного его настроить. Если вы перейдете в Конфигурацию ›Настройки сайта, а затем в разделе« Разработчик »вам необходимо включить« Доступ к базовому JSON API для контента »и« Разрешить междоменный доступ к базовому JSON API ».
Далее идет наша структура контента, или схема, форма данных, «поля», но еще вы хотели бы сослаться на информацию, которую будет использовать ваше приложение React. В разделе структуры контента Config нам нужно создать набор данных и определить поля, которые мы хотим, чтобы наши создатели контента заполняли.
В этом примере я хочу, чтобы все было довольно просто, поэтому у нас есть заголовок, статья, автор и необязательный URL-адрес изображения (в настоящее время тип данных изображения для внутреннего использования). Теперь мы можем заполнить фиктивные данные. В разделе Content выберите наш недавно созданный «DataSet» и добавьте к нему несколько слов. Пока вы делаете это, публикуйте их, Zesty позволяет создателям контента работать над черновиками и публиковать только тот контент, который уже готов к работе.
Теперь, когда мы закончили с одноразовой настройкой, перейдем к хорошему. Если у вас есть репо, указанное выше, и вы выполнили npm install , тогда давайте получим нужную информацию в .env
В этом примере мы будем использовать домен dev-preview (Zesty позволяет использовать несколько параметров домена, которые мы здесь не рассматриваем). Имея эти переменные, мы готовы приступить к тому, как перенести эти данные в наше приложение React.
Это проверка, чтобы убедиться, что переменные среды, необходимые для вызова fetch, на месте, а затем их возврат. Сценарии React автоматически выбирают переменные среды с префиксом REACT_APP в файле .env.
Используя заданные нами переменные среды, fetch - это то, что будет вызывать API и позволит нам установить данные в наше состояние. Если вы не знакомы с API-интерфейсом fetch, он хорошо поддерживается в современных браузерах, я предлагаю прочитать эту статью. Важно отметить, что для нашего ключа начального состояния apiData установлен пустой массив, это согласуется с тем, что возвращается Zesty JSON API по причинам, которые очевидны в функции рендеринга.
Используя метод map Array, мы можем сгенерировать карточку для каждой статьи, возвращаемой нашим JSON API. Карта очень полезна, и если вы не знакомы с ней (или ее друзья фильтруют и сокращают), отметьте это и получите просветление.
Теперь, когда все наши утки выстроились в ряд, бросьте npm run start в терминал и посмотрите на волшебство fetch, react и Zesty безголовой CMS во всей красе.
Это всего лишь отправная точка. Это открывает нам множество возможностей для интересных вещей, которые мы будем исследовать более подробно в будущем.
