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
280
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
51
Creating a Gutenberg block
eliorivero
2
81
Hice un bloque de Gutenberg y te lo cuento
eliorivero
0
390
Taller de JavaScript
eliorivero
0
48
Testing de componentes React con Enzyme
eliorivero
0
42
Generá ingresos con tu blog en WordPress.com
eliorivero
0
220
Jetpack y la WP REST API
eliorivero
0
280
Meetup WordPress Córdoba - Abril 2016
eliorivero
0
220
Lo nuevo en WordPress 4.3 - Meetup WordPress Córdoba
eliorivero
0
12k
Other Decks in Programming
See All in Programming
GitHub Copilotのススメ
marcy731
1
210
Elm Form Validation
bkuhlmann
0
510
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
"config" ってなんだ? / What is "config"?
okashoi
0
240
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
Try creating your own orderedmap
kazamori
0
140
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
290
見た目から始める生産性向上
ikumatadokoro
8
1.1k
Let's learn code review
riofujimon
2
560
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
300
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
26
5.8k
KATA
mclloyd
16
12k
It's Worth the Effort
3n
180
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Designing Experiences People Love
moore
136
23k
A better future with KSS
kneath
231
16k
The Cult of Friendly URLs
andyhume
74
5.7k
How to name files
jennybc
65
93k
Ruby is Unlike a Banana
tanoku
96
10k
Adopting Sorbet at Scale
ufuk
69
8.6k
Optimizing for Happiness
mojombo
370
69k
The Invisible Side of Design
smashingmag
294
49k
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?