1 of 28

@alapapa

@jblz

https://jeff.blog/wordcamp-asheville-2017/

Easing Into React

​

On your existing WordPress

​

Jeff Bowen

Automattic

2 of 28

Topics

  • What is React and why might you want to use it?
  • How to get started on a project quickly
  • Some ways to use it on your WordPress site
  • A few things to consider

3 of 28

​

No JavaScript frameworks were created during the writing of this talk

4 of 28

What is React?

A JavaScript library

for building user interfaces

5 of 28

What makes React compelling

Declarative

Concentrate on what you want your application to look like instead of how to make it so.

Declarative views make your code more predictable and easier to debug.

Component-Based

Lets you split the UI into independent, reusable pieces, and think about each piece in isolation.

Composing components is intuitive and powerful.

Versatile

Library -- not a framework.

“Isomorphic” -- render on a node server as well as in the browser.

Useful in Native (read: “mobile”) app dev.

6 of 28

Change Tabs!

7 of 28

React is….”reactive”

Props (properties)

  • Passed into components from entry point & parent components
  • Declaratively describe component’s behavior
  • Immutable-ish
  • Sane defaults via defaultProperties

State

  • Derived from props & interactivity
  • Components maintain their own
  • Mutate (async) with:�this.setState( { key: ‘value’ } )
  • Sane defaults via�constructor(props)

By default, components re-render on changes to their:

8 of 28

Composition

Combining simple functional components to build more complicated ones.

Like the usual composition of functions in mathematics, the result of each function is passed as the argument of the next, and the result of the last one is the result of the whole.

<ParentComponent>

<ChildComponent prop1=”value1”>

<GrandchildComponent prop2=”value2” />

</ChildComponent>

</ParentComponent>

​

9 of 28

JSX

  • A preprocessor step that adds XML syntax to JavaScript
  • Syntactic sugar for the React.createElement(component, props, ...children) function.
  • Optional, but it’s a lot more friendly.
  • Can use lots of HTML tags & attributes, with some exceptions (see: https://facebook.github.io/react/docs/dom-elements.html)

10 of 28

Free and Open Source

11 of 28

<Code />

12 of 28

13 of 28

14 of 28

Getting Started

  • node & npm
  • create-react-app
  • …
  • profit!

15 of 28

Node

npm

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Usage ranges from a full-fledged web / network server to just running some one-off script.

The package manager for JavaScript and the world’s largest software registry.

“Almost half a million” packages

​

Together, they’re kind of a “Swiss Army Knife” for all things JavaScript

Used for a tremendous amount of tooling (web dev & otherwise)

16 of 28

Install node (& npm)

  • https://nodejs.org/en/download/
    • “LTS” version is good for most cases -- start there
    • Choose a suitable installer or binary -- Mac, Windows, Linux...
  • Step-by-step instructions here: https://docs.npmjs.com/getting-started/installing-node
  • PROTIP: Once you have node & npm installed, tools like n & nvm are useful to update & configure which version you use

17 of 28

create-react-app

  • https://github.com/facebookincubator/create-react-app
  • Easy peasy!
    • npm install -g create-react-app
    • cd ~/your/development/directory
    • create-react-app hello-world
    • cd hello-world
    • npm start -> http://localhost:3000/
  • Get your your idea off the ground instead of worrying about tooling
  • Lots of great stuff “out of the box”
    • webpack
    • Babel
    • Autoprefixer, eslint, jest, & more

18 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

19 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

20 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

21 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

22 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

// Something like…

​

add_action(

'admin_bar_menu',

function( $ab_menu ) {

$ab_menu->add_node( [

‘id’ => ‘custom_name,

] );

},

999

);

23 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

> npm run build

24 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

> mv build/static/js/main.0b89d4f5.js� $PLUGIN_DIR/js/appname.js

​

-- OR --

​

> sftp build/static/js/main.0b89d4f5.js�$YOUR_HOST:$PLUGIN_DIR/js/appname.js

​

25 of 28

Integrating with your WordPress

  • Drop an element anywhere HTML can go
    • Widget
    • Post / Page content
    • Page template
    • Custom output markup, etc. etc.
  • Build your scripts for production use
  • Upload & enqueue your scripts

// As per usual

​

add_action( 'wp', function() {

$should_enqueue =

is_active_sidebar( $sidebar_name );

​

if ( $should_enqueue ) {

wp_enqueue_script( $script_slug,

plugins_url( 'js/appname.js',

__FILE__ ),

[], $version, $in_footer = true );

}

} );

26 of 28

Demo time!

27 of 28

Consider

  • If you’re using more than one app, think about “eject”ing out of the create-react-app build experience so you can build a single app artifact (instead of bundling multiple copies of underlying libs, etc.
  • The bigger the app, the hairier state management becomes.
  • Consider instead:
    • Other view libraries with similar rationales (e.g. https://vuejs.org/)
    • Full-fledged frameworks (Angular, Ember, Knockout, Meteor, etc., etc., etc….)

28 of 28

@alapapa

@jblz

https://jeff.blog/wordcamp-asheville-2017/

Questions or comments?

Jeff Bowen

Automattic

https://automattic.com/work-with-us/