Автор оригинала: FreeCodeCamp Community Member.

Андреем Покровским

Обновление 06/16/2017: Я обновил проект, чтобы использовать Reactrouter 4 и WebPack 2. Некоторые части были израсходованы и упрощены. Включенные ссылки на Frontend React Demo и WordPress Backend Demo.

WordPress – это мощный инструмент управления контентом. Но когда дело доходит до развивающихся на вершине, может быть довольно неприятным. Сумасшедшая смесь WordPress HTML и PHP-петель часто может оказаться неприятным для того, чтобы понять и трудно поддерживать.

В конце туннеля есть свет! Начиная с версии 4.7, WordPress поставляется со встроенным API для отдыха, и плагины больше не требуются. Это облегчает использование WordPress строго в качестве хранения данных или CMS Backend, одновременно, что позволяет для полностью настраиваемого решения переднего конца вашего выбора.

Вам больше не нужно иметь местную установку WordPress и иметь дело с настройкой VHOSTS. Ваш локальный процесс разработки может быть ограничен для создания переднего конца, который связан с установкой WordPress, размещенной на удаленном сервере.

В этой статье я собираюсь использовать Rectjs Чтобы построить переднюю часть приложения, React Router для маршрутизации и WebPack для объединения все это вместе. Я также покажу вам, как интегрировать передовые пользовательские поля, для тех из нас, кто полагается на него в качестве инструмента для создания интуитивного решения для наших клиентов.

Стек выглядит так: – Reactjs – React Router V4 – ALT (для реализации потока) – WebPack V2.

Github Repo : https://github.com/dreyskee/wp-apirect . React Frontend Demo URL : http://wp-ap-ereact.surge.sh/ WordPress Backend Demo URL : http://andreypokrovskiy.com/projects/wp-ap-react/wp-admin Пользователь : Демо Пройти : WP-React-Demo

Настройка проекта

Давайте назвать проект «WP-API-реагирование». Чтобы следовать, первое, что вам нужно сделать, это включить это в свой Package.json и запустить NPM установить :

Установите WebPack и WebPack-Dev-Server глобально, если вы еще этого не сделали:

NPM I WebPack WebPack-Dev-Server -G

Теперь в папке проекта создайте wepack.dev.js Для конфигурации развития и WebPack.Production.js С конфигурацией для построения проекта для производства.

Вставьте это в webpack.dev.config.js :

И это в webpack.production.config.js :

Создайте папку «SRC» в корне в проекте и создайте index.html внутри этого. index.html Файл будет включать этот кусок кода:

Теперь давайте добавим еще несколько папок в проект. Внутри папки «SRC» Создавайте папку «Сценарии» и внутри «сценариев» Создать «компоненты», «Flux» и index.js файл. Эта структура поможет сохранить файлы организованными.

К настоящему времени структура папки должна выглядеть так:

WP-API-Реакция/ – Node_Modules/ – SRC/ – – Сценарии/ – – – Компоненты/ – – – Flux/ – – – index.js – – index.html – Package.json – webpack.config.js.

index.js Это точка входа для WebPack, и она пройдет все маршруты для проекта. Давайте включите React, React Router и основную структуру маршрутизации в файле:

index.js ссылается на домашний компонент в импорте. Нам нужно создать его в папке «Компоненты». Home.js будет компонент шаблона для домашней страницы. Включите это в файл:

Если вы запустите NPM начать В терминале внутри папки проекта и открыть http://localhost: 8080/ В браузере вы должны увидеть «Hello World!» сообщение. Если вы начнете изменять файлы WebPack, будет горяче перезагрузить страницу для вас.

Флюс с Alt.

Теперь пришло время реализовать Flux Использование Alt Отказ Вам нужно будет создать три новые папки внутри папки «Flux»: «ALT», «Магазины» и «Действия»:

WP-API/ – Node_Modules/ – SRC/ – – Сценарии/ – – – Flux/ – – – – Alt/ – – – – Действия/ – – – – магазины/ – – – Компоненты/ – – – – Home.js – – – index.js – – index.html – Package.json – webpack.config.js.

Создать Alt.js Внутри папки «ALT» и вставьте это в файл:

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

Создать Daadactions.js В папке «Действия». Этот файл будет иметь всю логику для получения данных из конечных точек API WordPress API. Для разговора с API мы будем использовать Axios Отказ Включить это в Daadactions.js :

Не забудьте заменить URL пример установки WordPress с вашим.

Создать Datastore.js В папке «Магазины». Этот файл будет слушать Daadactions.js ‘ gustuccess () Метод, который возвращает данные из API WordPress. Затем он будет хранить и манипулировать данными. Вставьте это в Datastore.js :

Чтобы получить данные из API WordPress и сделайте его доступным для приложения, вам нужно включить Daadactions.js в index.js и оберните функцию рендера в Daadactions.GetPages () Отказ Возвращенный ответ позже будет использоваться для динамически создания маршрутов:

Теперь каждый раз, когда приложение начинается Daadactions.GetPages () Вызывает конечную точку и магазины API WordPress API, возвращаемые данные в Datastore.js Отказ

Для доступа к этому просто включает Datastore.js в любом компоненте и вызовите соответствующий метод. Например, давайте получим все данные внутри Home.js Файл и console.log Это:

После того, как WebPack обновляет страницу, вы должны увидеть возвращенный объект данных в консоли:

Object {pages: Array[1], posts: Array[1]}

Динамические маршруты

Прямо сейчас в приложении нет маршрутов, отличных от маршрута индекса. Если у вас есть несколько страниц, созданных в Backend WordPress, шансы вы хотите, чтобы они были доступны для переднего конца. Чтобы динамически добавлять маршруты, чтобы реагировать маршрутизатор, нам нужно добавить другой метод в index.js Давайте назовем это BuildRoutes () :

Включить {this.buildroutes (ответ)} Внутри реактивный маршрутизатор сразу после <Компонент маршрута = {home} точный />. Способ просто проходит через все страницы, возвращаемые API WordPress, и возвращает новые маршруты. Обратите внимание, как для каждого маршрута он добавляет компонент «Главная». Это означает, что компонент «Главная» будет использоваться для каждого маршрута.

Допустим, в WordPress у вас есть страница с слизком “О “ Отказ Если вы перейдете к маршруту этой страницы «/о», он будет загружен, но вы все равно будете увидеть ту же «Hello World» сообщение. В случае, если вам нужен только один шаблон для каждой страницы, вы можете оставить его как есть и получить конкретные данные страницы, позвонив Datastore.getPageByslug (Slug) и предоставляя текущую страницу Slug.

Однако в большинстве случаев вам нужно будет иметь несколько шаблонов для разных страниц.

Шаблоны страницы

Для того, чтобы использовать шаблоны страницы, которые нам нужно, чтобы реагировать знать, какой шаблон использовать с любой заданной страницей. Мы можем использовать Slug Page, который возвращается API для отображения шаблонов для отображения на разные маршруты.

Предположим, у нас есть две страницы с слизнями «домой» и «о». Нам нужно создать объект, который отображает промывки страницы для реагирования на компонентные пути. Давайте имеем шаблоны объекта и включите его в index.js :

Мы также сделали обновления для BuildRoutes () Метод требует правильного компонента. Не забудьте создать О.Ойс Компонент для сопоставления «о» слизняках.

Для того, чтобы получить данные, специфичные, все, что вам нужно сделать, это позвонить Страница datastore.get by slug (slug) Способ и указать текущую страницу Slug:

render() {    let page = DataStore.getPageBySlug('about');

return (        
            
{page.title.rendered}
        
    );}

Динамическая навигация

Теперь мы собираемся добавить глобальную навигацию, которая будет отражать все ссылки на страницу Backend WordPress. Сначала создайте Header.js Компонент в папке «Компоненты»:

Мы получаем все страницы от WordPress, используя Datastore.getAllpages () Затем мы сортируем их «MENU_ORDER» с Lodyash и зацикливаем через них, чтобы выплюнуть React Router />. Обратите внимание, что маршрут домашней страницы исключается из массива AllPages и включена в качестве отдельной ссылки.

Включить Header.js компонент в index.js И вы увидите, что Dynamic Nav включен на каждой странице:

Передовые пользовательские поля

Большинство разработчиков WordPress знакомы с Передовые пользовательские поля плагин. Он делает CMS WordPress CMS полностью настраиваемым и удобным для пользователя. К счастью, очень легко получить доступ к данным ACF, используя API WordPress.

Чтобы получить данные ACF с конечных точек API, нам нужно установить другой плагин, называемый ACF для отдыха API Отказ Это будет включать в себя свойство ACF в объекте, возвращенном API WordPress. Вы можете получить доступ к полям ACF, как так:

render() {    let page = DataStore.getPageBySlug('about');    let acf = page.acf; // Advanced Custom Fields data

return (        
            
{acf.yourCustomFieldName}
        
    );}

Следующие шаги

Хорошо, мы охватывали наиболее распространенное использование корпуса для использования администратора CMS WordPress, а также фронт-концентрация реагирования.

Некоторые следующие шаги могут быть добавлять стиль для проекта менее или SASS. Или, возможно, расширение Datajaction.js Файл, добавив дополнительные вызовы конечной точки API, чтобы потянуть больше данных, таких как комментарии, категории и таксономии.

Я настоятельно рекомендую проверить официальный WordPress REST API Справочник , где функциональность API хорошо документирована. Там вы найдете информацию о CRUD, Pagination, Authentication, Querying, создание пользовательских конечных точек и многое другое. Эти ресурсы помогут расширить то, что мы построили здесь.

по Андрей Покровский – Старший разработчик на Gigareef.

Если вы получили это далеко, вы могли бы быть таким разработчиком, который бы отлично подходит в Gigareef. В настоящее время мы ищем талантливых разработчиков для работы над проектами, связанными с реактивными/средними проектами стека/руля/узла.

Отправить письмо jobs@gigareef.com. И рассказать нам немного о себе.

Gigareef , где технологии процветает