React JS dla użytkowników WordPressa: podstawowe wprowadzenie

Od ponad 15 lat WordPress jest najpopularniejszym i kompletnym rozwiązaniem CMS, które pozwala budować wszystko, od jednostronicowego portfolio po pełnoprawną platformę eCommerce. WordPress używa PHP dla całej infrastruktury zaplecza, takiej jak aktualizacje, interfejsy API, uwierzytelnianie, warstwa DB i większość frontendu. Jednak, podobnie jak inne popularne frameworki, WordPress również został w ostatnim czasie zmuszony do ewolucji.

Biorąc pod uwagę rosnący potencjał i moc aplikacji JavaScript dla sieci, a także aplikacji desktopowych i natywnych aplikacji mobilnych, WP REST API próbuje wypełnić lukę między spuścizną rdzenia PHP WordPressa a rozwojem JavaScript. Uważam, że jest to ogromny krok dla WordPressa z dwóch powodów:

1. Istniejące witryny WP mogą korzystać z React/Vue lub innej biblioteki frontendowej, aby stworzyć lepszy interfejs użytkownika.
2. I odwrotnie, programiści stron internetowych otrzymują standardowy w branży bezgłowy CMS, który można łatwo zintegrować z wybranym przez siebie stosem.

To sytuacja korzystna dla wszystkich. W tym artykule skupimy naszą energię na zbudowaniu frontendu React dla backendu WordPress. Ale najpierw spójrzmy na WordPress REST API.

Podstawy API REST WordPress

Rozwój WP REST API rozpoczął się kilka lat temu i został początkowo zaprojektowany jako samodzielna wtyczka funkcji. WordPress v4.4 o nazwie kodowej „Clifford” wprowadził faktyczną infrastrukturę REST API do rdzenia WordPressa. Rzeczywiste punkty końcowe pojawiły się w WordPress w wersji 4.7 o nazwie kodowej „Vaughan”. Interfejs API WP umożliwia korzystanie z WordPressa jako bezgłowego CMS, który jest łatwy w użyciu, stabilny i przyjazny dla JSON.

JSON

JSON jest preferowanym formatem, jeśli zamierzasz zintegrować WordPress ze stosem JavaScript. JSON jest podobny do XML pod tym względem, że daje nam możliwość wydajnego przesyłania danych przy użyciu bardzo czytelnej składni.

JSON to w rzeczywistości ciąg znaków, który zawiera tekstową reprezentację obiektu JavaScript. Przechowuje dane w zestawie par klucz-wartość. Prosty przykład JSON posta WP może wyglądać tak –

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

Pełna odpowiedź JSON przy użyciu interfejsu API WP REST zwykle zawiera dodatkowe informacje dotyczące wpisu, takie jak metadane. Masz wszystko, czego potrzebujesz, aby stworzyć motyw front-endowy lub wtyczkę do swojej aplikacji.

Punkty końcowe

Punkty końcowe WordPress są bardzo dostępne dla publiczności. Jeśli korzystasz z najnowszej wersji WordPressa, musisz po prostu dołączyć /wp-json/wp/v2 na końcu adresu URL. Na przykład możesz uzyskać dostęp do podstawowych punktów końcowych pod adresem 127.0.0.1/wp-json/wp/v2, jeśli masz skonfigurowaną instancję WordPress na lokalnym hoście. Jeśli chcesz upiększyć dane wyjściowe, możesz użyć rozszerzenia przeglądarki JSON, które sprawi, że JSON będzie wyglądał ładnie w przeglądarce.

Dane wyświetlane na ekranie to zasadniczo zawartość oraz metainformacje w formacie JSON. To, co zrobiłeś tutaj, to zdefiniowanie trasy i poproszenie przeglądarki o pobranie danych dla Ciebie.

Co rozumiemy przez trasę? Trasa to adres URL zmapowany na konkretną metodę. Rdzeń WordPressa czyta trasę i rozumie, że każdy „/” reprezentuje określoną ścieżkę lub parametr, którym należy podążać.

Na przykład punktem końcowym może być '/wp-json/wp/v2/posts/1' , gdzie żądasz wpisu o identyfikatorze równym 1. Interfejsy API WordPress są przydatne, ponieważ są dość obszerne. Przekłada się to na możliwość pobrania dowolnych danych z Twojej witryny i przekształcenia ich w punkt końcowy. Obsługiwane są prawie wszystkie podstawowe funkcje WordPressa, a także wszystkie nadchodzące funkcje. Oto lista API WordPressa obsługiwanych w chwili pisania tego samouczka:

Twórcy motywów, a także twórcy wtyczek mogą tworzyć niestandardowe punkty końcowe dla swoich aplikacji. Jeśli chcesz sprawdzić wszystkie dostępne punkty końcowe, możesz pobrać aplikację taką jak Postman. Zapewni to GUI stworzony specjalnie do eksploracji interfejsów API. Co więcej, możesz bezpośrednio wykonywać wywołania API do aplikacji innych firm bez konieczności polegania na wtyczkach.

Weźmy przykład. Przesyłanie plików i utrzymywanie wielu wersji jest integralnym wymogiem każdej nowoczesnej aplikacji internetowej. Dotyczy to szczególnie plików multimedialnych. W WordPressie dostępnych jest wiele wtyczek, które mogą to zrobić za Ciebie; jednak może być konieczne wykonanie połączeń z serwerem WordPress, aby z nich skorzystać.

Dzięki API WP logikę obsługi multimediów można oddzielić od WordPressa. Możesz wykonywać wszystkie wywołania API innych firm bezpośrednio z frontendu, co jest świetne pod względem separacji obaw. Możesz użyć biblioteki takiej jak Cloudinary, aby manipulować obrazami i innymi plikami multimedialnymi w locie, a następnie przesłać je do chmury. Po przesłaniu adres URL obrazu może być przechowywany w backendzie WP. Opcje są nieskończone i możesz łączyć ze sobą elementy w dowolny sposób, jaki uznasz za stosowny.

Zobaczmy teraz, jak połączyć backend WordPressa z Reactem.

Pierwsze kroki z React

React to deklaratywna biblioteka front-end do budowania interfejsów użytkownika i interaktywnych aplikacji w sieci. Dzięki React możesz komponować mniejsze, niezależne fragmenty kodu wielokrotnego użytku, znane jako komponenty. Stwórzmy nasz pierwszy komponent, tworząc projekt React.

Najpopularniejszym sposobem tworzenia projektu React jest uruchomienie aplikacji create-react. CRA oferuje wygodne środowisko do nauki Reacta i jest najlepszym sposobem na rozpoczęcie tworzenia nowej, jednostronicowej aplikacji, jeśli jesteś początkującym. Konfiguruje środowisko programistyczne tak, aby można było korzystać z najnowszych funkcji JavaScript, takich jak ES6 i webpack. Co więcej, create-react-app zapewnia przyjemne wrażenia dla programistów i optymalizuje Twoją aplikację pod kątem produkcji.

Musisz mieć Node >= 8.x i npm >= 5.2 na swoim komputerze. Aby utworzyć projekt, uruchom następujące polecenia:


npx create-react-app wp-react-demo


Powyższe polecenie tworzy szablon szablonu dla naszej aplikacji React, którą nazwaliśmy wp-react-demo .


cd wp-react-demo
npm start


Jeśli wszystko pójdzie dobrze, powinno być w stanie obsłużyć nowo utworzoną aplikację na serwerze deweloperskim pod adresem http://localhost:3000/.

Jeśli chcesz zobaczyć strukturę katalogów generowaną przez create-react-app, wygląda to tak:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


Katalog publiczny zawiera wszystkie zasoby wymagane do uruchomienia aplikacji. Katalog src zawiera wszystkie pliki JavaScript, nad którymi będziemy pracować i spędzisz tam dużo czasu.

Kiedy odwiedzasz localhost:3000, ładowany jest plik index.html. Jeśli otworzysz plik public/index.html, nic tam nie ma. Ale znajdziesz tę linię gdzieś pośrodku:

<div id="root"></div>

To jest punkt wyjścia, w którym React renderuje drzewo komponentów do katalogu głównego aplikacji.

Co to znaczy? Udaj się do katalogu src i otwórz index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React próbuje znaleźć w dokumencie element o identyfikatorze „root”, a następnie wstrzykuje składnik do korzenia. W rzeczywistości komponent App jest renderowany i stąd pochodzi wirujące logo React. Możesz to sprawdzić, otwierając plik src/App.js .

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

W zasadzie tak wygląda komponent. Każdy składnik renderuje część interfejsu użytkownika. Możesz skomponować jeden komponent wewnątrz drugiego i w ten sposób otrzymasz strukturę drzewa komponentów, taką jak ta:

Jeśli zastanawiasz się, dlaczego możemy używać HTML w render(), to jest magia JSX. JSX to rozszerzenie składni języka JavaScript, które umożliwia używanie zwykłego kodu HTML w pliku JavaScript. Więcej na ten temat można przeczytać w oficjalnych dokumentach.

Zamierzam usunąć całą zawartość HTML, a następnie zastąpić ją

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';