Plugins para WordPress con React y la REST API

Presentado en el WordCamp Buenos Aires 2017.
2017.buenosaires.wordcamp.org

Transcript

1. Plugins para WordPress con React y la REST API En un entorno basado en Yarn, Webpack, y Babel.
2. $ whoami const elioRivero = { work: Automattic: { team: jetpack, position: 'Code Wrangler' }, }, blog: 'elio.blog', twitter: '@eliorivero' };
3. “LEARN JAVASCRIPT, DEEPLY” —Matt Mullenweg, 2015
4. 2017 “APRENDÉ REACT, IAAA” GUAUGUAU GUAU GUAAAAA GUAUGUAU GUAU GUAAAAA GUAUGUAU GUAU GUAAAAA
7. CALYPSO wordpress.com - github.com/Automattic/wp-calypso
8. JETPACK jetpack.com - github.com/automattic/jetpack
9. GET.BLOG get.blog - github.com/Automattic/delphin
10. ¿QUÉ ES REACT?
12. Librería para construir interfaces de usuario Independiente de los datos Basada en componentes JSX facebook.github.io/react
13. Ejemplos github.com/eliorivero/miniact
14. PLUGINS CON REACT React Interface github.com/eliorivero/miniact
15. WordPress Plugin API REST API PLUGINS CON REACT React Interface github.com/eliorivero/miniact
16. WordPress Plugin API REST API PLUGINS CON REACT React Interface fetch() github.com/eliorivero/miniact
17. WORDPRESS $ mkdir miniact && cd miniact $ touch miniact.php <?php /** * Plugin Name: Miniact */ add_action( 'wp_footer', function() { echo '<div id="miniact"></div>'; } ); add_action( 'wp_head', function() { wp_enqueue_style( 'app', plugins_url( '/build/style.css', __FILE__ ) ); wp_enqueue_script( 'app', plugins_url( '/build/main.js', __FILE__ ), array(), false, true ); } );
18. YARN Manejador de paquetes y dependencias
19. YARN $ yarn init { "name": "miniact", "version": "1.0.0", "description": "Lista posts de WP con REST API", "repository": "https://github.com/eliorivero/miniact", "author": "Elio Rivero", "license": "GPL-2.0+", "scripts": { "build": "NODE_ENV=production webpack", "watch": "webpack --watch" } } yarnpkg.com/en/docs/install
20. WEBPACK Empaquetador de módulos
21. WEBPACK $ yarn add webpack —-dev $ touch webpack.config.js module.exports = { entry: './client/index.js', output: { path: __dirname + '/build', filename: 'main.js' } }; webpack.js.org
22. JAVASCRIPT $ mkdir client && touch client/index.js console.log( 'Miniact listo!’ ); $ yarn build
23. BABEL Transformador de ES2015 y React
24. BABEL $ yarn add babel-core babel-loader babel-preset-es2015 babel- preset-stage-0 --dev stage 0 incluye do: let x = do { 12 + 8 }; $ touch .babelrc { "presets": [ "es2015", "react", "stage-0" ] } babeljs.io
25. WEBPACK module.exports = { entry: './client/index.js', output: { path: __dirname + '/build', filename: 'main.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }] }, resolve: { extensions: ['*', '.js', '.jsx'] }, }; webpack.js.org
26. JAVASCRIPT const max = 100; const texto = do { if ( max > 99 ) { 'funcionando'; } else { 'no funciona'; } }; console.log( 'Miniact ' + texto ); $ yarn build
27. REACT Librería JavaScript para UI
28. REACT $ yarn add babel-preset-react react react-dom --dev import React from 'react'; import ReactDOM from 'react-dom'; class DaleReact extends React.Component { render() { return <div>{ this.props.app } listo en React!</div>; } } ReactDOM.render( <DaleReact app="Miniact" />, document.getElementById( 'miniact' ) ); facebook.github.io/react
29. REACT $ yarn build facebook.github.io/react ¡Enorme! ¡Sin estilo!
30. ESTILOS CON SASS Y compresión de SASS y JS
31. WEBPACK $ yarn add extract-text-webpack-plugin style-loader css- loader —dev loaders: [ … // sigue estando el de Babel y se agrega { test: /\.scss$/, loader: ExtractTextPlugin.extract( { fallback: 'style-loader', use : { loader : 'css-loader', options: { minimize: true } // minifica CSS } } ) } ] webpack.js.org
32. WEBPACK $ yarn add extract-text-webpack-plugin style-loader css- loader —dev devtool: 'production' !== NODE_ENV ? '#source-map' : false, plugins: [ new webpack.DefinePlugin( { 'process.env.NODE_ENV': JSON.stringify( NODE_ENV ) } ), new ExtractTextPlugin( 'style.css' ) ] if ( 'production' === NODE_ENV ) { webpackConfig.plugins.push( new webpack.optimize.UglifyJsPlugin() ); // minifica JS } webpack.js.org
33. SCSS Y CSS $ cd client && mkdir sass && touch sass/style.scss #miniact { text-align: center; font-family: sans-serif; } En index.js importamos los estilos import './sass/style.scss'; sass-lang.com
34. REACT $ yarn build facebook.github.io/react
35. Y ahora… ¡la WP REST API!
36. WP REST API fetch ( 'https://elio.blog/wp-json/wp/v2/posts?per_page=5' ) developer.wordpress.org/rest-api
37. WP REST API <?php /** * Plugin Name: Miniact */ add_action( 'wp_footer', function() { echo '<div id="miniact"></div>'; } ); add_action( 'wp_head', function() { wp_enqueue_script( 'app', plugins_url( '/build/main.js', __FILE__ ), array(), false, true ); wp_enqueue_style( 'app', plugins_url( '/build/style.css', __FILE__ ) ); wp_localize_script( 'app', 'Miniact', [ 'wpRestApi' => esc_url_raw( rest_url() ) ] ); } ); developer.wordpress.org/rest-api
38. REACT class DaleReact extends React.Component { constructor() { super(); this.state = { items: [] }; } componentWillMount() { fetch( `${Miniact.wpRestApi}wp/v2/posts?per_page=5` ) .then( response => response.json() ) .then( items => this.setState( { items } ) ); } render() { return <ul>{ this.state.items.map( item => <li key={ `post-${item.id}` }>{ item.title.rendered }</li> ) }</ul>; } }
39. WORDPRESS <?php /** * Plugin Name: Miniact */ add_action( 'widgets_init', function () { register_widget( 'Miniact' ); } ); class Miniact extends WP_Widget { function __construct() { parent::__construct( 'miniact', 'Miniact' ); } function widget() { wp_enqueue_script( 'app', plugins_url( '/build/main.js', __FILE__ ), array(), false, true ); wp_enqueue_style( 'app', plugins_url( '/build/ style.css', __FILE__ ) ); wp_localize_script( 'app', 'Miniact', [ 'wpRestApi' => esc_url_raw( rest_url() ) ] ); echo '<div id="miniact"></div>'; } }
40. $ yarn build
41. ¡Gracias! ¿Preguntas?