В этом уроке я покажу вам, как создать простой блог, используя React, GraphQL и Cosmic JS. Это будет самый быстрый и легкий блог, построенный на стеке современных технологий. Давайте начнем.

TL;DR

Посмотреть демонстрацию
Установить блог Simple React на Cosmic JS
Посмотреть кодовую базу на GitHub

Начиная

Убедитесь, что на вашем компьютере установлены Node.js и NPM, в противном случае посетите веб-сайт Node.js, чтобы установить последнюю версию.

Начнем с создания папки для нашего приложения. В вашем любимом терминале выполните следующие команды:

mkdir simple-react-blog
cd simple-react-blog

Теперь давайте добавим файл package.json для импорта всех наших зависимостей для нашего приложения:

vim package.json

Добавьте в наш файл package.json следующее:

Это довольно легкий список зависимостей для довольно легкого приложения. Итак, что мы установим:

1. Axios для нашего HTTP-клиента, основанного на обещаниях, для получения контента из Cosmic JS GraphQL API.
2. Next.js как наш универсальный фреймворк React.
3. Далее routes для динамических маршрутов.
4. Express для нашей серверной среды веб-приложений.
5. React для обработки нашего пользовательского интерфейса.

Наши скрипты необходимы для запуска нашего приложения в производство и разработку.

Выполните следующую команду, чтобы установить наши зависимости:

npm i

Создание нашего блога

Затем приступим к созданию страниц нашего блога. Создайте папку страниц и добавьте файл index.js:

vim index.js

и добавьте в index.js следующее:

Здесь происходит несколько вещей:

1. Мы импортируем наши основные модули: Axios, Lodash и другие помощники и компоненты.
2. Мы загружаем некоторые части: верхний и нижний колонтитулы, вы можете ссылаться на эти части из базы кода на GitHub. < br /> 3. Мы запрашиваем Cosmic JS GraphQL API, чтобы вернуть только то, что нам нужно: _id, type_slug, slug, title, metadata и created_at.
4. Мы устанавливаем основные свойства в нашем компоненте на "космический" объект. И используйте lodash для анализа типов сообщений и глобальных объектов.
5. Мы возвращаем данные массива сообщений и URL-адреса изображений в наш основной канал блога.

Запрос на отдельную публикацию

Для нашего единственного поста мы добавляем свойство `post` к нашим реквизитам. Сообщение можно найти путем сопоставления query.slug со слагом Object:

Посмотрите полный файл на GitHub.

Заключение

Это сокращенная версия Simple React Blog, доступная для скачивания на странице Cosmic JS Apps. Полная кодовая база включает в себя просмотр одной страницы сообщения, а также страницу, посвященную сообщениям каждого автора. Просмотрите полную базу кода на GitHub и разверните это приложение в несколько щелчков мышью с панели инструментов Cosmic JS, установив приложение в корзину Cosmic JS. Cosmic JS - отличная React CMS для всех ваших приложений React.

Надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, напишите нам в Twitter и присоединитесь к нашему сообществу в Slack.