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
EMこそClaude Codeでコード調査しよう
shibayu36
0
220
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
310
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
440
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
技術的負債の正体を知って向き合う
irof
0
200
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
A better future with KSS
kneath
239
18k
Docker and Python
trallard
46
3.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Unsuck your backbone
ammeep
671
58k
What's in a price? How to price your products and services
michaelherold
246
12k
Documentation Writing (for coders)
carmenintech
75
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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?