Jak vytvářet aplikace React na vrcholu rozhraní API WordPress REST

AKTUALIZACE 16. 6. 2017:
Aktualizoval jsem projekt tak, aby používal ReactRouter 4 a Webpack 2. Některé části byly refactored a zjednodušeny. Zahrnuty odkazy na frontend React demo a Wordpress backend demo.

WordPress je výkonný nástroj pro správu obsahu. Ale pokud jde o vývoj na vrcholu toho, může být docela frustrující. Šílená směs smyček HTML a PHP ve WordPressu se často může ukázat jako neintuitivní, aby ji bylo možné pochopit a těžko udržovat.

Na konci tunelu je ale světlo! Od verze 4.7 přichází WordPress s integrovaným REST API a pluginy již nejsou nutné. Usnadňuje tak přísné používání aplikace WordPress jako úložiště dat typu backend nebo CMS a zároveň umožňuje zcela vlastní front-end řešení dle vašeho výběru.

Už nemusíte mít místní instalaci WordPress a zabývat se nastavením vhostů. Proces místního vývoje může být omezen na vytváření frontendu, který je spojen s instalací WordPress hostovanou na vzdáleném serveru.

V tomto článku budu používat ReactJS k sestavení front-end části aplikace, React Router pro směrování a Webpack pro spojování všech dohromady. Ukážu vám také, jak integrovat pokročilá vlastní pole, pro ty z nás, kteří se na něj spoléhají jako na nástroj pro vytvoření intuitivního řešení pro naše klienty.

Zásobník vypadá takto:
- ReactJs
- React Router v4
- Alt (pro implementaci Flux)
- Webpack v2

Reprezentace GitHub: https://github.com/DreySkee/wp-api-react
Reagovat frontend demo url: http://wp-api-react.surge.sh/
Ukázka URL backendu Wordpress: http://andreypokrovskiy.com/projects/wp-api-react/wp-admin
Uživatel: demo
Předat: wp-reagovat-demo

Nastavení projektu

Pojmenujme projekt „wp-api-response“. Chcete-li pokračovat, první věc, kterou musíte udělat, je zahrnout toto do souboru package.json a spustit instalaci npm:

Nainstalujte si webpack a webpack-dev-server také globálně, pokud jste tak již neučinili:

npm i webpack webpack-dev-server -g

Nyní ve složce projektu vytvořte wepack.dev.js pro vývojovou konfiguraci a webpack.production.js s konfigurací pro sestavení projektu pro výrobu.

Vložte to do webpack.dev.config.js:

A to v webpack.production.config.js:

Vytvořte složku „src“ v kořenovém adresáři projektu a uvnitř ní vytvořte index.html. Soubor index.html bude zahrnovat tento kus kódu:

Nyní přidáme do projektu několik dalších složek. Uvnitř složky „src“ vytvořte složku „skripty“ a uvnitř „skriptů“ vytvořte „komponenty“, „tok“ a soubor index.js. Tato struktura pomůže udržovat soubory uspořádané.

Struktura složek by nyní měla vypadat takto:

wp-api-reagovat /
 - node_modules /
 - src /
 - - skripty /
 - - - komponenty /
 - - - tok /
 - - - index.js
 Index.html
 - package.json
 - webpack.config.js

index.js je vstupním bodem pro Webpack a bude obsahovat všechny trasy pro projekt. Zahrneme do souboru React, React Router a základní strukturu směrování:

index.js odkazuje na komponentu Home v importu. Musíme ji vytvořit ve složce „komponenty“. Home.js bude součástí šablony domovské stránky. Zahrnout do souboru:

Pokud spustíte npm start v terminálu uvnitř složky projektu a otevřete v prohlížeči http: // localhost: 8080 /, měla by se zobrazit zpráva „Ahoj svět!“. Pokud začnete měnit soubory, Webpack vám stránku znovu načte.

Flux s Altem

Nyní je čas implementovat tok pomocí Alt. Ve složce „tok“ budete muset vytvořit tři nové složky: „alt“, „obchody“ a „akce“:

wp-api /
 - node_modules /
 - src /
 - - skripty /
 - - - tok /
 - - - - alt /
 - - - - akce /
 - - - - obchody /
 - - - komponenty /
 - - - - Home.js
 - - - index.js
 Index.html
 - package.json
 - webpack.config.js

Vytvořte Alt.js uvnitř složky „alt“ a vložte jej do souboru:

Vše, co tento soubor dělá, je export instance Alt, kterou použijeme v obchodech a akcích.

Vytvořte soubor DataActions.js ve složce „Akce“. Tento soubor bude mít veškerou logiku pro získávání dat z koncových bodů API WordPress REST. K rozhovoru s API použijeme axios. Zahrnout to do souboru DataActions.js:

Nezapomeňte nahradit adresu URL příkladu instalace WordPress vaší.

Vytvořte DataStore.js ve složce „obchody“. Tento soubor bude poslouchat metodu getSuccess () DataActions.js, která vrací data z rozhraní WordPress API. Poté data uloží a bude s nimi manipulovat. Vložte to do DataStore.js:

Chcete-li získat data z rozhraní WordPress API a zpřístupnit je pro aplikaci, musíte zahrnout DataActions.js do index.js a zabalit funkci vykreslování do DataActions.getPages (). Vrácená odpověď bude později použita k dynamickému vytváření tras:

Nyní při každém spuštění aplikace DataActions.getPages () volá koncový bod rozhraní API WordPress a uložená data ukládá do DataStore.js.

Chcete-li k němu získat přístup, jednoduše zahrňte DataStore.js do libovolné komponenty a zavolejte příslušnou metodu. Například získáme všechna data uvnitř souboru Home.js a console.log:

Poté, co webpack obnoví stránku, měli byste vidět vrácený datový objekt v konzole:

Objekt {pages: Array [1], příspěvky: Array [1]}

Dynamické trasy

Momentálně v aplikaci nejsou nastaveny žádné jiné trasy než trasa indexu. Pokud máte v backendu WordPress vytvořeno několik stránek, je pravděpodobné, že budou k dispozici pro rozhraní frontend. Chcete-li dynamicky přidávat trasy do React Routeru, musíme do index.js přidat další metodu, nazveme ji buildRoutes ():

Zahrňte {this.buildRoutes (response)} do React Routeru hned za . Metoda jednoduše prochází všemi stránkami vrácenými pomocí rozhraní WordPress API a vrací nové trasy. Všimněte si, jak pro každou trasu přidá komponentu „Domů“. To znamená, že komponenta „Home“ bude použita pro každou trasu.

Řekněme, že ve WordPressu máte stránku se slgem „asi“. Pokud přejdete na trasu pro tuto stránku „/ about“, načte se, ale stále se zobrazí stejná zpráva „Hello World“. V případě, že pro každou stránku potřebujete pouze jednu šablonu, můžete ji opustit tak, jak je, a získat data pro konkrétní stránku voláním DataStore.getPageBySlug (slug) a poskytnutím aktuální slug stránky.

Ve většině případů však budete muset mít více šablon pro různé stránky.

Šablony stránek

Abychom mohli používat šablony stránek, musíme dát React vědět, jakou šablonu použít s danou stránkou. Můžeme použít stránku slg, která se vrátí API pro mapování šablon na různé trasy.

Předpokládejme, že máme dvě stránky se slimáky „home“ a „about“. Musíme vytvořit objekt, který mapuje stránky na stránky React komponenty path. Pojmenujme šablony objektů a zahrni je do index.js:

Také jsme provedli aktualizace metody buildRoutes () tak, aby vyžadovala správnou komponentu. Nezapomeňte vytvořit komponentu About.js pro mapování slimáka „about“.

Chcete-li získat data pro konkrétní stránku, stačí zavolat metodu DataStore.getPageBySlug (slug) a poskytnout aktuální stránku slug:

poskytnout() {
    let page = DataStore.getPageBySlug (‘about’);
vrátit se (
        
            

{page.title.rendered}

        
    ); }

Dynamická navigace

Nyní přidáme globální navigaci, která bude odrážet všechny odkazy na backend stránky WordPress. Nejprve vytvořte komponentu Header.js ve složce „components“:

Všechny stránky získáme z WordPressu pomocí DataStore.getAllPages (), potom je roztřídíme podle „menu_order“ s lodash a opakujeme je, abychom vyplivli React Router. Trasa domovské stránky je vyloučena z pole allPages a zahrnuta jako samostatný odkaz.

Zahrňte komponentu Header.js do index.js a na každé stránce uvidíte dynamickou navigaci:

Pokročilá vlastní pole

Většina vývojářů WordPress je obeznámena s pluginem Advanced Custom Fields. Díky tomu je WordPress CMS plně přizpůsobitelný a uživatelsky přívětivý. Naštěstí je velmi snadné získat přístup k datům ACF pomocí rozhraní WordPress API.

K získání dat ACF z koncových bodů API je třeba nainstalovat další plugin nazvaný ACF do REST API. To bude zahrnovat vlastnost acf v objektu vráceném rozhraním API WordPress. Do polí ACF můžete přistupovat takto:

poskytnout() {
    let page = DataStore.getPageBySlug (‘about’);
    nechť acf = page.acf; // Pokročilá data vlastních polí
vrátit se (
        
            

{acf.yourCustomFieldName}

        
    ); }

Další kroky

Dobře, pokryli jsme nejběžnější případ použití pákového efektu administrátora systému WordPress CMS a front-end React.

Dalším krokem může být přidání stylu projektu v Less nebo Sass. Nebo možná rozšíření souboru DataAction.js přidáním dalších volání koncových bodů API a získání dalších dat, jako jsou komentáře, kategorie a taxonomie.

Důrazně doporučujeme vyzkoušet si oficiální příručku API WordPress REST API, kde je funkce API dobře zdokumentována. Najdete zde informace o CRUD, stránkování, autentizaci, dotazování, vytváření vlastních koncových bodů a další. Tyto zdroje pomohou rozšířit to, co jsme zde vytvořili.

autor: Andrey Pokrovskiy - Senior Developer ve společnosti Gigareef

Pokud jste se dostali tak daleko, možná jste ten typ vývojáře, který by se skvěle hodil do Gigareefu. V současné době hledáme talentované vývojáře, kteří budou pracovat na projektech zahrnujících projekty ReactJS / MEAN Stack / Handlebars / Node.

Pošlete e-mail na adresu jobs@gigareef.com a řekněte nám něco o sobě.

Gigareef, kde technologie vzkvétá