Как да изградите React приложения върху API на WordPress REST

Актуализиране на 16.06.2017:
Актуализирах проекта, за да използвам ReactRouter 4 и Webpack 2. Някои части бяха реконструирани и опростени. Включени връзки към демонстрацията на интерфейса React и задния текст на Wordpress.

WordPress е мощен инструмент за управление на съдържанието. Но когато става дума за развитие на всичко отгоре, може да бъде доста разочароващо. Лудата смес на WordPress от HTML и PHP контури често може да се окаже неинтуитивна за разбиране и трудна за поддържане.

В края на тунела има светлина! Започвайки с версия 4.7, WordPress се предлага с вграден REST API и плъгините вече не са необходими. Това прави по-лесно използването на WordPress стриктно като резервно съхранение на данни или CMS, като същевременно позволява напълно персонализирано решение за предния край по ваш избор.

Вече не е необходимо да имате локална инсталация на WordPress и да се занимавате с настройка на призраци. Вашият процес на локално развитие може да бъде ограничен до изграждането на предния край, който е свързан с инсталация на WordPress, хоствана на отдалечен сървър.

В тази статия ще използвам ReactJS за изграждане на предната част на приложението, React Router за маршрутизация и Webpack за свързването му заедно. Ще ви покажа и как да интегрирате Advanced Custom Fields за онези от нас, които са разчитали на това като инструмент за създаване на интуитивно решение за нашите клиенти.

Стекът изглежда така:
- ReactJs
- React Router v4
- Alt (за изпълнение на Flux)
- Webpack v2

GitHub repo: https://github.com/DreySkee/wp-api-react
Реакция на демонстрационния URL адрес на интерфейса: http://wp-api-react.surge.sh/
Wordpress бекенд демонстрационен URL адрес: http://andreypokrovskiy.com/projects/wp-api-react/wp-admin
Потребител: демонстрация
Pass: wp-react-demo

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

Нека да наречем проекта „wp-api-react“. За да следвате, първото нещо, което трябва да направите, е да включите това в своя package.json и да стартирате npm install:

Инсталирайте и уебпакет и webpack-dev-сървър в световен мащаб, ако не сте го направили вече:

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“ създайте папка „скриптове“, а вътре в „скриптове“ създайте файл „компоненти“, „поток“ и index.js. Тази структура ще помогне да се поддържат файлове организирани.

Към момента структурата на папките трябва да изглежда така:

WP-API реакция /
 - node_modules /
 - src /
 - - скриптове /
 - - - компоненти /
 - - - поток /
 - - - index.js
 - - index.html
 - package.json
 - webpack.config.js

index.js е входната точка за Webpack и тя ще съдържа всички маршрути за проекта. Включваме във файла React, React Router и основна структура на маршрутизиране:

index.js препраща към компонента Home във вноса. Трябва да го създадем в папката „компоненти“. Home.js ще бъде шаблонният компонент за началната страница. Включете това във файла:

Ако стартирате npm start в терминала вътре в папката на проекта и отворете http: // localhost: 8080 / в браузъра, трябва да видите съобщение „Здравей свят!“. Ако започнете да променяте файлове, Webpack ще презарежда горещо страницата за вас.

Флюс с Alt

Сега е време да внедрите флукс, използвайки Alt. Ще трябва да създадете три нови папки вътре в папката „flux“: „alt“, „store“ и „Actions“:

WP-API /
 - node_modules /
 - src /
 - - скриптове /
 - - - поток /
 - - - - alt /
 - - - - действия /
 - - - - магазини /
 - - - компоненти /
 - - - - Home.js
 - - - index.js
 - - index.html
 - package.json
 - webpack.config.js

Създайте Alt.js вътре в папката "alt" и го поставете във файла:

Всичко, което този файл прави, е експортиране на Alt екземпляра, който ще използваме в магазините и действията.

Създайте DataActions.js в папката „действия“. Този файл ще има цялата логика за получаване на данните от крайните точки на WordPress REST API. За разговор с API ще използваме axios. Включете това в DataActions.js:

Не забравяйте да замените URL примера за инсталиране на WordPress с вашия.

Създайте DataStore.js в папка „магазини“. Този файл ще слуша метода getSuccess () на DataActions.js, който връща данни от WordPress API. След това ще съхранява и манипулира данните. Поставете това в DataStore.js:

За да получите данни от API на WordPress и да го направите достъпно за приложението, трябва да включите DataActions.js в index.js и да увиете функцията за изобразяване в DataActions.getPages (). Върнатият отговор по-късно ще бъде използван за динамично създаване на маршрути:

Сега всеки път, когато приложението стартира DataActions.getPages () извиква крайната точка на WordPress API и съхранява върнатите данни в DataStore.js.

За достъп до него просто включете DataStore.js във всеки компонент и извикайте подходящия метод. Например, нека да вземем всички данни във файла Home.js и да го конзолираме:

След като Webpack опресни страницата, трябва да видите върнатия обект на данни в конзолата:

Обект {страници: масив [1], публикации: масив [1]}

Динамични маршрути

В момента в приложението няма зададени маршрути, различни от маршрута на индекса. Ако имате няколко страници, създадени в WordPress бекенд, има вероятност да искате те да са достъпни за предния край. За да добавим динамично маршрути към React Router, трябва да добавим друг метод в index.js, нека го наречем buildRoutes ():

Включете {this.buildRoutes (отговор)} вътре в React Router веднага след . Методът просто преглежда всички страници, върнати от WordPress API и връща нови маршрути. Забележете как за всеки маршрут добавя компонента „Начало“. Това означава, че компонентът „Начало” ще се използва за всеки маршрут.

Нека в WordPress да кажем, че имате страница със слуз „около“. Ако отидете на маршрута за тази страница „/ about“, тя ще се зареди, но пак ще видите същото съобщение „Hello World“. В случай, че се нуждаете само от един шаблон за всяка страница, можете да го оставите такъв, какъвто е и да получите специфични данни за страницата, като се обадите на DataStore.getPageBySlug (slug) и предоставите текущата страница.

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

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

За да използваме шаблони на страници, трябва да информираме React какъв шаблон да използвате с която и да е страница. Можем да използваме връзката на страницата, която се връща от API, за да картографираме шаблони в различни маршрути.

Да допуснем, че имаме две страници с охлюви „начало“ и „около“. Необходимо е да създадем обект, който картографира страниците на страниците към пътеките на компонента React Да дадем име на шаблоните на обектите и да го включим в index.js:

Също така направихме актуализации на метода buildRoutes (), за да изискваме правилния компонент. Не забравяйте да създадете компонента About.js, за да картографирате „около“ плужека.

За да получите специфични за страницата данни, всичко, което трябва да направите, е да се обадите на метода DataStore.getPageBySlug (slug) и да предоставите текущата страница за печат:

render () {
    нека страница = DataStore.getPageBySlug („около“);
връщане (
        
            

{page.title.rendered}              ); }

Динамична навигация

Сега ще добавим глобална навигация, която ще отразява всички връзки към страницата на WordPress. Първо създайте компонент Header.js в папката „компоненти“:

Ние получаваме всички страници от WordPress с помощта на DataStore.getAllPages (), след което ги сортираме по „menu_order“ с lodash и прекарваме през тях, за да изплюем на React Router. Обърнете внимание, че маршрутът на началната страница се изключва от масива allPages и се включва като отделна връзка.

Включете компонента Header.js в index.js и ще видите динамичната навигация, включена на всяка страница:

Разширени персонализирани полета

Повечето разработчици на WordPress са запознати с приставката Advanced Custom Fields. Това прави WordPress CMS напълно адаптивни и удобни за потребителя. За щастие, достъпът до ACF данни е много лесен с помощта на WordPress API.

За да получим данни от ACF от крайните точки на API, трябва да инсталираме друг плъгин, наречен ACF към REST API. Това ще включва свойство acf в обекта, върнат от WordPress API. Можете да получите достъп до полетата за достъп така:

render () {
    нека страница = DataStore.getPageBySlug („около“);
    нека acf = page.acf; // Разширени данни за персонализирани полета
връщане (
        
            

{acf.yourCustomFieldName}              ); }

Следващи стъпки

Добре, ние обхванахме най-често използвания случай за използване на администратора на WordPress CMS, заедно с React front-end.

Някои следващи стъпки могат да бъдат да добавите стилизиране на проекта в Less или Sass. Или може би да разширите файла DataAction.js чрез добавяне на допълнителни обаждания в крайната точка на API, за да изтеглите повече данни като коментари, категории и таксономии.

Горещо препоръчвам да проверите официалното ръководство за API на WordPress REST, където функционалността на API е добре документирана. Там ще намерите информация за CRUD, pagination, автентификация, заявки, създаване на персонализирани крайни точки и други. Тези ресурси ще помогнат да разширим това, което сме изградили тук.

от Андрей Покровский - старши разработчик в Gigareef

Ако стигнете дотук, може би сте от типа на разработчика, който би бил чудесен в Gigareef. В момента търсим талантливи разработчици, които да работят по проекти, включващи ReactJS / MEAN Stack / Handlebars / Node проекти.

Изпратете имейл на jobs@gigareef.com и ни кажете малко за себе си.

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