Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Plugins para WordPress con React y la REST API
Search
Elio
July 08, 2017
Programming
0
290
Plugins para WordPress con React y la REST API
Presentado en el WordCamp Buenos Aires 2017.
2017.buenosaires.wordcamp.org
Elio
July 08, 2017
Tweet
Share
More Decks by Elio
See All by Elio
Creating a Gutenberg block - WCEU 2019
eliorivero
0
57
Creating a Gutenberg block
eliorivero
2
83
Hice un bloque de Gutenberg y te lo cuento
eliorivero
0
400
Taller de JavaScript
eliorivero
0
65
Testing de componentes React con Enzyme
eliorivero
0
49
Generá ingresos con tu blog en WordPress.com
eliorivero
0
230
Jetpack y la WP REST API
eliorivero
0
280
Meetup WordPress Córdoba - Abril 2016
eliorivero
0
230
Lo nuevo en WordPress 4.3 - Meetup WordPress Córdoba
eliorivero
0
12k
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
550
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
ふつうの技術スタックでアート作品を作ってみる
akira888
0
160
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
570
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Testing 201, or: Great Expectations
jmmastey
42
7.5k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Done Done
chrislema
184
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Invisible Side of Design
smashingmag
300
51k
Transcript
Plugins para WordPress con React y la REST API En
un entorno basado en Yarn, Webpack, y Babel.
$ whoami const elioRivero = { work: Automattic: { team:
jetpack, position: 'Code Wrangler' }, }, blog: 'elio.blog', twitter: '@eliorivero' };
“LEARN JAVASCRIPT, DEEPLY” —Matt Mullenweg, 2015
2017 “APRENDÉ REACT, IAAA” GUAUGUAU GUAU GUAAAAA GUAUGUAU GUAU GUAAAAA
GUAUGUAU GUAU GUAAAAA
None
None
CALYPSO wordpress.com - github.com/Automattic/wp-calypso
JETPACK jetpack.com - github.com/automattic/jetpack
GET.BLOG get.blog - github.com/Automattic/delphin
¿QUÉ ES REACT?
None
Librería para construir interfaces de usuario Independiente de los datos
Basada en componentes JSX facebook.github.io/react
Ejemplos github.com/eliorivero/miniact
PLUGINS CON REACT React Interface github.com/eliorivero/miniact
WordPress Plugin API REST API PLUGINS CON REACT React Interface
github.com/eliorivero/miniact
WordPress Plugin API REST API PLUGINS CON REACT React Interface
fetch() github.com/eliorivero/miniact
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 ); } );
YARN Manejador de paquetes y dependencias
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
WEBPACK Empaquetador de módulos
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
JAVASCRIPT $ mkdir client && touch client/index.js console.log( 'Miniact listo!’
); $ yarn build
BABEL Transformador de ES2015 y React
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
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
JAVASCRIPT const max = 100; const texto = do {
if ( max > 99 ) { 'funcionando'; } else { 'no funciona'; } }; console.log( 'Miniact ' + texto ); $ yarn build
REACT Librería JavaScript para UI
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
REACT $ yarn build facebook.github.io/react ¡Enorme! ¡Sin estilo!
ESTILOS CON SASS Y compresión de SASS y JS
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
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
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
REACT $ yarn build facebook.github.io/react
Y ahora… ¡la WP REST API!
WP REST API fetch ( 'https://elio.blog/wp-json/wp/v2/posts?per_page=5' ) developer.wordpress.org/rest-api
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
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>; } }
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>'; } }
$ yarn build
¡Gracias! ¿Preguntas?