WordPress + React
How to add React to your WordPress theme or Plugin
Amit Rathi
@amitrathik
Introduction
● I am a full-stack mobile
developer
● Have been working with
WordPress for about 4-5 years
● Spent the past 3 years working
at agencies
● Currently, I freelance & run my
own business
Objective
● Outline the different approaches for adding React to a WordPress theme or
plugin
● These approaches can be applied to add Angular, Vue or any other modern JS
library.
Motivation
● Needed to add dynamic functionality to a couple client projects -- in admin
dashboard and front-end
● Wanted to learn a modern JS framework to build UI elements
● Chose React due to overall popularity and demand in the job market
● Automattic announced Calypso at WordCamp US 2016, an admin experience
build entirely in JavaScript using Node and React.
Adding React to a Project
● CDN
● Create-React-App
● Custom
Brainless vs Headless CMS
Brainless CMS
● Using WP to serve front-end,
including the react library
● Using wp_enqueue_scripts to
add React library to all pages,
selected pages, or admin only
● Good for adding smaller pieces
of dynamic functionality to the
site
Headless CMS
● No WP front-end
● A separate JavaScript
application can be hosted in
the same directory or different
directly
● Allows for a completely
decoupled architecture
● Useful for building SPAs
Brainless WP + React
Headless CMS
Using CDN
Using Create-React-App
● Requires Node
Brainless WP + React Demo
Questions? Comments?
@amitrathik

WordPress + react

  • 1.
    WordPress + React Howto add React to your WordPress theme or Plugin Amit Rathi @amitrathik
  • 2.
    Introduction ● I ama full-stack mobile developer ● Have been working with WordPress for about 4-5 years ● Spent the past 3 years working at agencies ● Currently, I freelance & run my own business
  • 3.
    Objective ● Outline thedifferent approaches for adding React to a WordPress theme or plugin ● These approaches can be applied to add Angular, Vue or any other modern JS library.
  • 4.
    Motivation ● Needed toadd dynamic functionality to a couple client projects -- in admin dashboard and front-end ● Wanted to learn a modern JS framework to build UI elements ● Chose React due to overall popularity and demand in the job market ● Automattic announced Calypso at WordCamp US 2016, an admin experience build entirely in JavaScript using Node and React.
  • 5.
    Adding React toa Project ● CDN ● Create-React-App ● Custom
  • 6.
    Brainless vs HeadlessCMS Brainless CMS ● Using WP to serve front-end, including the react library ● Using wp_enqueue_scripts to add React library to all pages, selected pages, or admin only ● Good for adding smaller pieces of dynamic functionality to the site Headless CMS ● No WP front-end ● A separate JavaScript application can be hosted in the same directory or different directly ● Allows for a completely decoupled architecture ● Useful for building SPAs
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
    Brainless WP +React Demo
  • 12.