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
59
Creating a Gutenberg block
eliorivero
2
84
Hice un bloque de Gutenberg y te lo cuento
eliorivero
0
400
Taller de JavaScript
eliorivero
0
67
Testing de componentes React con Enzyme
eliorivero
0
52
Generá ingresos con tu blog en WordPress.com
eliorivero
0
230
Jetpack y la WP REST API
eliorivero
0
290
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
320
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2k
Serena MCPのすすめ
wadakatu
4
990
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
CSC305 Lecture 03
javiergs
PRO
0
240
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.1k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
820
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Context Engineering - Making Every Token Count
addyosmani
5
230
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
It's Worth the Effort
3n
187
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Cult of Friendly URLs
andyhume
79
6.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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?