![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](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-25-320.jpg)
![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](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-26-320.jpg)
![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](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-32-320.jpg)
![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](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-33-320.jpg)
![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](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-38-320.jpg)
![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>;
}
}](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-39-320.jpg)
![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>';
}
}](https://image.slidesharecdn.com/7-elio-rivero-170722232037/85/Plugins-con-React-y-la-REST-API-Elio-Rivero-WCBA-2017-40-320.jpg)
More Related Content
Plugins con React y la REST API (Elio Rivero, WCBA 2017)
- 1. WC BA 17 Elio Rivero Plugins con React y la REST API @eliorivero
- 2. Plugins para WordPress con React y la REST API En un entorno basado en Yarn, Webpack, y Babel.
- 3. $ whoami const elioRivero = { work: Automattic: { team: jetpack, position: 'Code Wrangler' }, }, blog: 'elio.blog', twitter: '@eliorivero' };
- 4. LEARN JAVASCRIPT, DEEPLY Matt Mullenweg, 2015
- 5. 2017APREND? REACT, IAAA GUAUGUAU GUAU GUAAAAA GUAUGUAU GUAU GUAAAAA GUAUGUAU GUAU GUAAAAA
- 11. ?QU? ES REACT?
- 13. Librera paraconstruir interfacesdeusuario Independiente de los datos Basada en componentes JSX facebook.github.io/react
- 16. WordPress Plugin API REST API PLUGINS CON REACT React Interface github.com/eliorivero/miniact
- 17. WordPress Plugin API REST API PLUGINS CON REACT React Interface fetch() github.com/eliorivero/miniact
- 18. 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 ); } );
- 19. YARN Manejador de paquetes y dependencias
- 20. 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
- 22. 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
- 23. JAVASCRIPT $ mkdir client && touch client/index.js console.log( 'Miniact listo! ); $ yarn build
- 24. BABEL Transformador de ES2015 y React
- 25. 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
- 26. 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
- 27. JAVASCRIPT const max = 100; const texto = do { if ( max > 99 ) { 'funcionando'; } else { 'no funciona'; } }; console.log( 'Miniact ' + texto ); $ yarn build
- 29. 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
- 31. ESTILOS CON SASS Y compresin de SASS y JS
- 32. 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
- 33. 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
- 34. 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
- 36. Y ahora ?la WP REST API!
- 37. WP REST API fetch ( 'https://elio.blog/wp-json/wp/v2/posts?per_page=5' ) developer.wordpress.org/rest-api
- 38. 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
- 39. 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>; } }
- 40. 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>'; } }
- 41. $ yarn build