Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Plugins para WordPress con React y la REST API

Avatar for Elio Elio
July 08, 2017

Plugins para WordPress con React y la REST API

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

Avatar for Elio

Elio

July 08, 2017
Tweet

More Decks by Elio

Other Decks in Programming

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. Librería para construir interfaces de usuario Independiente de los datos

    Basada en componentes JSX facebook.github.io/react
  4. 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 ); } );
  5. 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
  6. 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
  7. 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
  8. 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
  9. JAVASCRIPT const max = 100; const texto = do {

    if ( max > 99 ) { 'funcionando'; } else { 'no funciona'; } }; console.log( 'Miniact ' + texto ); $ yarn build
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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>; } }
  16. 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>'; } }