Slide 1

Slide 1 text

javascriptforwp.com/omaha @zgordon React for Gutenberg, WordPress & Beyond w Zac Gordon

Slide 2

Slide 2 text

javascriptforwp.com/omaha @zgordon Zac Gordon zacgordon.com

Slide 3

Slide 3 text

javascriptforwp.com/omaha @zgordon React is a User Interface Library

Slide 4

Slide 4 text

@zgordon javascriptforwp.com/omaha React is JavaScript, but end result may not be JavaScript

Slide 5

Slide 5 text

@zgordon javascriptforwp.com/omaha React companion libraries: ReactDOM, ReactDOMServer React Native, React 360

Slide 6

Slide 6 text

@zgordon javascriptforwp.com/omaha React often leverages build tools to do this

Slide 7

Slide 7 text

javascriptforwp.com/omaha @zgordon Why React for WordPress?

Slide 8

Slide 8 text

@zgordon javascriptforwp.com/omaha Matt Mullenweg 2015 "Learn JavaScript Deeply”

Slide 9

Slide 9 text

@zgordon javascriptforwp.com/omaha Automattic’s Calypso: JS driven WP.com admin

Slide 10

Slide 10 text

@zgordon javascriptforwp.com/omaha Automattic’s team started building Gutenberg in React

Slide 11

Slide 11 text

@zgordon javascriptforwp.com/omaha There was no compelling reason to stop using React

Slide 12

Slide 12 text

@zgordon javascriptforwp.com/omaha Decided to create an abstraction layer for React

Slide 13

Slide 13 text

javascriptforwp.com/omaha @zgordon React in WordPress

Slide 14

Slide 14 text

@zgordon javascriptforwp.com/omaha Import React & ReactDOM and export wp.element

Slide 15

Slide 15 text

@zgordon javascriptforwp.com/omaha wp.element is saved in the global scope

Slide 16

Slide 16 text

@zgordon javascriptforwp.com/omaha Destructure, don’t import

Slide 17

Slide 17 text

@zgordon javascriptforwp.com/omaha Getting React // Pure React import React from “react”; import ReactDOM from “react-dom”; // WordPress React const { createElement, render } = wp.element;

Slide 18

Slide 18 text

@zgordon javascriptforwp.com/omaha React is only enqueued on Gutenberg Editor admin pages

Slide 19

Slide 19 text

@zgordon javascriptforwp.com/omaha Including React on the Frontend add_action( ‘wp_enqueue_scripts', 'my_enqueue_js' ); function my_enqueue_js() { wp_enqueue_script( 'needsreact', get_template_directory_uri() . '/js/needs-react.js', [ 'wp-element' ] ); }

Slide 20

Slide 20 text

javascriptforwp.com/omaha @zgordon JSX in WordPress

Slide 21

Slide 21 text

@zgordon javascriptforwp.com/omaha JSX lets you write HTML in your JavaScript

Slide 22

Slide 22 text

@zgordon javascriptforwp.com/omaha Non-JSX vs. JSX // Non JSX React.createElement("p", { className: "featured" }, "Hello"); // JSX

Hello

Slide 23

Slide 23 text

@zgordon javascriptforwp.com/omaha Non-JSX vs. JSX // Non JSX React.createElement( "h1", { className: "welcome" }, React.createElement( "a", { className: "link" , href: “https://reactjs.org/“}, "Welcome!") ); // JSX

Welcome!

Slide 24

Slide 24 text

@zgordon javascriptforwp.com/omaha JSX requires transpiling

Slide 25

Slide 25 text

@zgordon javascriptforwp.com/omaha To transpile JSX we use Babel

Slide 26

Slide 26 text

@zgordon javascriptforwp.com/omaha Oh yeah, you also need NPM & webpack

Slide 27

Slide 27 text

javascriptforwp.com/omaha @zgordon Redux in WordPress

Slide 28

Slide 28 text

@zgordon javascriptforwp.com/omaha Redux helps JS apps manage state

Slide 29

Slide 29 text

@zgordon javascriptforwp.com/omaha With Redux you can get data & subscribe to changes

Slide 30

Slide 30 text

@zgordon javascriptforwp.com/omaha Like React, Redux is abstracted in WordPress

Slide 31

Slide 31 text

@zgordon javascriptforwp.com/omaha The data module is built upon and shares many of the same core principles of Redux, but shouldn’t be mistaken as merely Redux for WordPress, as it includes a few of its own distinguishing characteristics. wordpress.org/gutenberg/handbook/packages/packages-data/