Experiences in building a pure, feature-rich WordPress theme with React

1. Plastical Sagl Corso S. Gottardo 14, cp 1512
6830 Chiasso 1
Switzerland
tel.: +41 (0) 91 9675780
info@plastical.com
plastical.com
WP 4.7 & React
A perfect marriage?
Ryan Vannin — 12.04.2017
FrontEnders Ticino @ DOS Group

2. Ryan Vannin
MSc. com., PhD Informatics drop-out, soon-to-become lawyer.
Owner at Plastical, organiser of Hack the City.
Tech and innovation passionate. Below-the-average coder. Runner.
Follow me: @ryanvannin

3. Agenda
- Ideal vs. real world
- All is not lost! WP 4.7 + React
- Basic setup
- Data fetching with Redux + Ducks
- Routing (React Router 4.0 alpha) + hacks
- Multi-language with“intl”
- Wrap-up
- Q&A

4. Ideal vs. real world

5. In an ideal world
I’m using the latest and fanciest technology available…

6. … running on great infrastructure or on customised self-
owned “metal”!

7. In a few words…
… Y’all know what?
I’m a full-stack developer, you a**holes!

8. In the real world
Crazy requirements
(Does coffee heating?… And don’t forget cats’ gifs!)
Tech constraints
(LAMP stack, wtf!)
Impossible deadlines and limited budget
(Duh, was I supposed to pay you for the website?
Visibility wasn’t enough?)

9. Let’s be honest here…
… this stuff won’t go away anytime soon!

10. All is not lost!
Wordpress 4.7 + React

11. Let’s put them together…
+

12. Wordpress 4.7
WP Rest API made it to the core in the 4.7 update of WP…
Good news:
no need to install a plug-in…
Bad news:
to fully benefit of its endpoints, you have to build your
own, custom theme!

13. Endpoints
Some examples:
…/wp-json/wp/v2/posts
…/wp-json/wp/v2/pages
…/wp-json/wp/v2/users
…/wp-json/wp/v2/events

14. React
… Seriously???

15. … Ok, not 100% true, but I had to use some cool marketing jargon
“Build a pure, beautiful and feature-rich JS
theme and never look back again to the legacy
PHP spaghetti-code Wordpress throws in”

16. Example of a complex WP theme
Posts and single pages (usual stuff)
Multi-language (requires a plug-in, e.g. WPML)
Events (+ management) via custom post types
List users and custom author pages with details
Contact form(s) with validation and file upload
Beautiful, responsive and fast theme

17. Basic setup

18. Localhost
Usual stuff to run WP locally,
i.e. MAMP (PRO) or via Terminal with LAMP stack
… And, no, Webpack Dev Server won’t do the task!

19. Folder structure
(usually in /wp-content/themes/your-theme)
…
footer.php
functions.php
header.php
index.php
package.json
webpack.config.js
…
— bin/ (for additional PHP config files)
— less/ (or sass, it’s up to you)
— src/ (our main react folder)
Yep! React stuff mixed up with PHP!!!
However, on deploy these go away

20. functions.php (1)
Let’s first configure WP to talk to React
https://github.com/plastical/react-theme/blob/master/
functions.php

21. functions.php (2)
function plastical_scripts() {
$bundleDir = ($isWithinTemplate) ? get_template_directory_uri() : ‘/
assets';
wp_enqueue_style('plastical-style', $bundleDir . ‘/build/bundle.css');
wp_enqueue_script(PLASTICAL_VENDOR, $bundleDir . '/build/
vendor.bundle.js', array('jquery'), PLASTICAL_VERSION, true);
wp_enqueue_script(PLASTICAL_APP, $bundleDir . '/build/bundle.js',
array('jquery'), PLASTICAL_VERSION, true);
…
}

22. index.php
<?php get_header(); ?>
<div id="root"></div>
<?php get_footer(); ?>
No sidebar.php?
No, unless you want to turn it into a nightmare…

23. package.json
Usual stuff
{
….
“intl”: “ˆ1.2.5”
…
"react-intl": "^2.1.5",
"react-intl-redux": "^0.2.0",
…
“react-router”: “4.0.0-alpha.6”
…
"wordpress-query-comments": "^1.1.0",
"wordpress-query-custom-posts-events": "^0.2.0",
"wordpress-query-menu": "^1.1.0",
"wordpress-query-page": "^1.1.0",
"wordpress-query-page-children": "^0.1.4",
"wordpress-query-posts": "^1.1.1",
"wordpress-query-term": "^1.1.0",
"wordpress-query-users": "^0.2.0"
}
+
Ducks!!!
Back to this stuff later

24. Our app structure
(/src)
— components/
— data/
— i18n/
index.js (app entry point)
reducer.js
— routing/
structure.js
— utils/
More about this folder later…

25. webpack.config.js (v 2.0)
Again, usual stuff…
module.exports = {
entry: {
assets: './src/index.js',
vendor: ['react','react-dom','react-router','redux']
},
output: {
path: path.join(__dirname, '../../../assets/build'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
data: path.join(__dirname, 'src/data'),
components: path.join(__dirname, 'src/components'),
utils: path.resolve(__dirname, 'src/utils'),
},
modules: ['node_modules', ‘src']
},
….
Remember? all the stuff goes under /assets/…
+

26. Data fetching with Redux + Ducks

27. Redux
Redux will hold the application state in its store,
including data fetched from the WP Rest API endpoints
https://github.com/plastical/react-theme/blob/master/
src/store.js
PS.: nothing fancy here…

28. Ducks???
“Ducks” are redux modules containing single-purpose
constants, actions and reducers.
https://github.com/plastical/react-theme/blob/master/
src/reducer.js
Ex.: https://github.com/plastical/wordpress-query-
users

29. Fetching and data persistence

30. Routing (React Router 4.0 alpha) + hacks

31. React Router 4.0 alpha
Component based, but unstable (e.g., Match vs. Route)
Not working with “react-router-redux”, had to build my
own sync…
Huge mess with “intl", “react-intl” and “react-redux-intl”…
https://github.com/plastical/react-theme/blob/master/
src/routing/index.js
PS.: version > 4.0 beta? Need contributions!

32. Routing? Welcome some ugly hacks…
index.js
https://github.com/plastical/react-theme/blob/master/
src/index.js
structure.js
https://github.com/plastical/react-theme/blob/master/
src/structure.js
External URLs + click capture… jQuery!!!

33. Multi-language with“intl”

34. Intl
Needs i18n
https://github.com/plastical/react-theme/tree/master/
src/i18n
Import in component as decorator:
import { injectIntl } from 'react-intl';
…
{
…
<h1>
{props.intl.formatMessage({ id: 'home.latest_news' })}
</h1>
…
}
export default injectIntl(
connect((state, ownProps) => { … })(Home)
);
Translations as messages:
…
{
…
‘home.latest_news’: ‘Latest news’,
…
}

35. WP multi language with React?
Needs WPML (or a similar plug-in)
To fully recognise new locale a browser reload is needed
(onClick)
Translation strings are hardcoded, thus wasn’t easier an
other solution (e.g. inject directly from PHP)?

36. Wrap-up

37. Some cool stuff…
WP 4.7 + React: excellent combination to build an almost
pure JS theme
Blazing fast (once your bundles are in cache)
Using endpoints opens up endless possibilities with a few
specialised components, e.g. search and contact

38. Some less cool stuff… (1)
You HAVE to know both JS and PHP in order to benefit of
both words
You have to configure WP to use the WP Rest APIs,
otherwise it doesn’t work as expected (e.g. menus!!!)
Overcomplicated, over bloated
Simple out-of-the-box features do not work without
tweaks (ex. active state on navigation)

39. Some less cool stuff… (2)
Multi language is just a nightmare, as well as routing
(you need to manipulate the DOM — not the virtual, but
the real — to detect clicks or onEnters…)
You are stuck with a LAMP stack, unless you fetch data
from outside…
In production, simplest changes (e.g., string translations
or add/modify a className) require “npm run build”,
while in PHP just edit the .php file

40. Some less cool stuff… (3)
Bundle size ~1MB!!!
(ok, can cache it and gzip it, but what’s the point?)

41. The result
Site in production:
http://dev.agire.ch
Source code:
https://github.com/plastical/react-theme

42. Q&As

43. Plastical Sagl Corso S. Gottardo 14, cp 1512
6830 Chiasso 1
Switzerland
tel.: +41 (0) 91 9675780
info@plastical.com
plastical.com
Thanks
@ryanvannin / ryan@plastical.com