javascriptforwp.com/bmore @zgordonReact for Gutenberg,WordPress & Beyondw Zac Gordon
View Slide
javascriptforwp.com/bmore @zgordonHi! I’m Zaczacgordon.com
javascriptforwp.com/bmore @zgordonHow & WhyReact is Includedw WordPress
javascriptforwp.com/bmore @zgordonA bit of history..
javascriptforwp.com/bmore @zgordonGutenberg is ReactUnder the Hood
javascriptforwp.com/bmore @zgordonBuilt DecoupledWired to WordPress
@zgordonjavascriptforwp.com/bmoregutenberg-standalone.surge.sh
@zgordonjavascriptforwp.com/bmoredrupalgutenberg.org
javascriptforwp.com/bmore @zgordonGutenberg Editor is aModern React App
@zgordonjavascriptforwp.com/bmorenpmjs.com/~WordPress
@zgordonjavascriptforwp.com/bmore
javascriptforwp.com/bmore @zgordonBetter Standardsfor WordPress JavaScript
@zgordonjavascriptforwp.com/bmoregithub.com/WordPress-Coding-Standards/eslint-plugin-wordpress
javascriptforwp.com/bmore @zgordonReact in WordPress
javascriptforwp.com/bmore @zgordonThe Great WordPressReact Abstraction
@zgordon// Enqueue JS - React Dependency?wp_enqueue_script('myplugin-js',plugins_url( null, __FILE__ ) . '/js/plugin.js',[ 'jquery' ]);
@zgordon// Enqueue JS - React Dependency?wp_enqueue_script('myplugin-js',plugins_url( null, __FILE__ ) . '/js/plugin.js',[ 'react' ]);
@zgordonjavascriptforwp.com/bmoreIn WordPressReact == wp.element
@zgordonjavascriptforwp.com/bmoregithub.com/WordPress/gutenberg/tree/master/packages/element
@zgordonjavascriptforwp.com/bmoreThe Great WordPressReact Abstraction
@zgordon// Normal Reactconst el = React.createElement('h1', null, 'Welcome!');// WordPress Reactconst el = wp.element.createElement('h1', null, 'Welcome!');
@zgordon// Normal ReactDOMReactDOM.render( el, document.getElementById( 'root' ) );// WordPress ReactDOMwp.element.render( el, document.getElementById( ‘root' ) );
@zgordonjavascriptforwp.com/bmorewp.element is Available inthe DOM window object*window.wp.element
@zgordonjavascriptforwp.com/bmoregutenberg.local
@zgordon// WordPress React - Normalconst el = wp.element.createElement('h1', null, 'Welcome!');// WordPress React - Destructuredconst { createElement } = wp.element;const el = createElement('h1', null, 'Welcome!');
javascriptforwp.com/bmore @zgordonTo Use ReactOutside of Gutenberg
@zgordon// Enqueue JS - React Dependency?wp_enqueue_script('myplugin-js',plugins_url( null, __FILE__ ) . '/js/plugin.js',[ 'wp-element' ]);
javascriptforwp.com/bmore @zgordonWe Also Have JSXIn WordPress
@zgordonlabel={ __( 'Text Field', 'domain' ) }value={ textControl }onChange={ textControl =>" setAttributes( { textControl } ) }/>label={ __( 'Text Area Field', 'domain' ) }value={ textareaControl }onChange={ textareaControl =>" setAttributes( { textareaControl } ) }/>
@zgordonjavascriptforwp.com/bmoreYou will need Babelto use JSX..
@zgordonjavascriptforwp.com/bmorenpmjs.com/package/@wordpress/babel-preset-default
@zgordonjavascriptforwp.com/bmorenpmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma
javascriptforwp.com/bmore @zgordonA ReactComponent LibraryFor WordPress!
@zgordonjavascriptforwp.com/bmorewp.components
@zgordonconst {Autocomplete,Button,CheckboxControl,ColorPalette,DropZone,FormToggle,Panel,Popover,Spinner,TextControl,TextareaControl,Tooltip,} = wp.components;const CustomTooltip = () =>" (Hover for Tooltip);
javascriptforwp.com/bmore @zgordonRedux inWordPress
@zgordonjavascriptforwp.com/bmoregithub.com/WordPress/gutenberg/tree/master/packages/data#comparison-with-redux
@zgordonjavascriptforwp.com/bmoreAbility to CreateOur Own Data StoresUsing WP Redux
@zgordonjavascriptforwp.com/bmoregithub.com/WordPress/gutenberg/tree/master/packages/core-data
@zgordonjavascriptforwp.com/bmoreUse Data APIInstead Of Your OwnWP REST API Calls *
@zgordonconst {withSelect,withDispatch,} = wp.data;
@zgordonconst { withSelect } = wp.data;function MyAuthorsListBase( { authors } ) {return ({ authors.map( ( author ) =>" ({ author.name }) ) });}const MyAuthorsList = withSelect( ( select ) =>" ( {authors: select( 'core' ).getAuthors(),} ) )( MyAuthorsListBase );
@zgordonconst { withSelect } = wp.data;function MyPostsListBase( { posts } ) {return ({ posts.map( ( post ) =>" ({ post.title.rendered }) ) });}const MyPostList = withSelect( ( select ) =>" ( {posts: select( 'core' ).getEntityRecords( 'postType', 'post', { per_page: 5 } )} ) )( MyPostsListBase );
@zgordonedit: withSelect( select =>" {return {posts: select( 'core' ).getEntityRecords( 'postType', 'post', { per_page: 5 } )};} )( ( { posts } ) =>" {return ({ posts.map( post =>" {return { post.title.rendered };}) });} )
@zgordonjavascriptforwp.com/bmorenpmjs.com/package/@wordpress/api-fetch
javascriptforwp.com/bmore @zgordonReact in WPImmediate Futurevs. Next Few Years
javascriptforwp.com/bmore @zgordonGutenberg“Block” Editor
javascriptforwp.com/bmore @zgordonGutenberg“Block” Editor, Widgets,Customizer, Themes,Plugins, Decoupled
javascriptforwp.com/bmore @zgordonDo I Needto LearnAll of This?
javascriptforwp.com/bmore @zgordon20% OFF Gutenberg Coursejavascriptforwp.com/bmoreQ&A
zgordon
claudioed
oracle4engineer
pyama86
bonotake
odasho
nozomiito
bkuhlmann
opeonikute
murahigeas
ahrkrak
ama_ch
eiki
ammeep
danielanewman
marktimemedia
afnizarnur
jponch
vanstee
geoffreycrofte
davidbonilla
soudai
sachag
jasonvnalue
jakevdp