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
56
Creating a Gutenberg block
eliorivero
2
83
Hice un bloque de Gutenberg y te lo cuento
eliorivero
0
400
Taller de JavaScript
eliorivero
0
61
Testing de componentes React con Enzyme
eliorivero
0
48
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
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
260
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
130
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
420
Beyond ORM
77web
8
1.1k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
670
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
500
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
250
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
150
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Code Reviewing Like a Champion
maltzj
521
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Embracing the Ebb and Flow
colly
84
4.5k
Why Our Code Smells
bkeepers
PRO
335
57k
Designing for Performance
lara
604
68k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Unsuck your backbone
ammeep
669
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
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?