WordPress: React WayHow to merge WordPress with React for building modern content websites

About Me

GitHub https://github.com/shtrihstr

Blog

Email

https://www.strikha.com

alex@strikha.com

PlanCurrent situation in WEB

Single page application

React JSUse case: Blog on WordPress

Best practices

Examples of features

Current situation in WEBApplication Content

Single Page Application

Classic WEB

Classic WEB

Classic WEB

Classic WEB

Single Page App

Single Page App

Architecture

Data Logic Interface

Backend Frontend

Architecture

Data Interface

Backend Frontend

LogicLogic

API

ReactJSFast and Convenient

Fast Rendering

Fast Rendering

Fast Rendering

Fast Rendering

Components

Button

Components

Button

Form

Components

Button

Form

Comments

Components

<Button /> <Form /> <Comments />

Render Render RenderMake RequestsAccess to Store

Components

JSHTML CSS

JSX

Use Case: Blog

Code Example

Live Demo

https://github.com/shtrihstr/wp-react-example

https://wp-react-example.strikha.com/

JavaScript LibsRendering Routing

StoreRequests

JavaScript LibsRendering:

Routing:

Store:

Requests:

ReactJS

React Router

Redux

Any Ajax lib

Store

Store

Store

Store

Component

Store

Store

Component

Store

API

Ajax

Redux Thunk

Component

Store

API

Thunk

WordPress REST API

REST API Plugin

Simple REST API

http://v2.wp-api.org/

https://github.com/shtrihstr/simple-rest-api

React + WordPress Tricks

Routing

WordPress /2016/01/02/hello-world

Routing

WordPress /2016/01/02/hello-world

React App /blog/post/1

Routing

React App

WordPress /2016/01/02/hello-world

/2016/01/02/hello-world

React App /blog/post/1

Content

ApplicationContent Site

~ 80% is a Content

the_content();

the_content();[ { node: 'h3', text: 'Hello World!', }, { node: 'img', attr: { src: 'img.png' } }[

Response Time

GET /home Ajax

Preset Store

window._initialState = { posts: [ <?= json_encode( $post ) ?> ] }

/2016/01/02/hello-world

Server Side Rendering

Server Side Rendering

WordPress ClientHTML

Server Side Rendering

WordPress ClientHTML

NodeJS/V8

HTMLJSON

Server Side Rendering

NodeJS locally

PHP V8js

AWS Lambda

https://nodejs.org

https://github.com/phpv8/v8js

https://aws.amazon.com/lambda/details/

Features

Data Reuse

Data Reuse

Data Reuse< 200ms

Data Reuse~ 3ms

Data Preloading

Read More

Load Next

Responsive

Header

Article Aside

Header

Article

Aside

Responsive

Header

Article Aside

Header

Article

Aside

Slider

Minuses

No possibility to use most of plugins

Time consuming

Pluses

Fast

Better user experience

Questions?