{"id":2745,"date":"2019-05-24T10:21:33","date_gmt":"2019-05-24T08:21:33","guid":{"rendered":"https:\/\/2019-developers.sevilla.wordcamp.org\/?post_type=wcb_session&#038;p=2745"},"modified":"2019-10-23T21:26:08","modified_gmt":"2019-10-23T19:26:08","slug":"crea-una-spa-con-woocommerce-y-react-js","status":"publish","type":"wcb_session","link":"https:\/\/sevilla.wordcamp.org\/2019-developers\/session\/crea-una-spa-con-woocommerce-y-react-js\/","title":{"rendered":"Crea una SPA con WooCommerce y React.js"},"content":{"rendered":"\n<p>WooCommerce es una herramienta poderosa y altamente personalizable \u00bfpero que pasar\u00eda si la combin\u00e1semos con tecnolog\u00eda de punta del lado del frontend como React? Obtendr\u00edamos el rendimiento que una SPA (Single Page Application) sin tener que desarrollar un complejo backend de ecommerce desde cero.<\/p>\n\n\n\n<p>Pudi\u00e9semos aprevechar muchas de las funcionalidades de WooCommerce (y muchas de sus extensiones) pero con una experiencia de usuario mejorada y altamente escalable; pudiendo incluso dar el salto a una Progressive Web App m\u00e1s adelante, de esas que tanto le gustan a Google. \u00a1El potencial es tremendo!<\/p>\n\n\n\n<p>Una estructura del taller:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create React App.<\/li><li>Consumiendo la API de WooCommerce con Axios.<\/li><li>Creando rutas con react-router.<\/li><li>Creando las vistas: Productos, producto, checkout, gracias.<\/li><li>Agregando estilos.<\/li><li>Creando el componente Carrito.<\/li><li>Manejando el estado global con Context Api de React.<\/li><li>Creando pedidos.<\/li><\/ol>\n\n\n\n<p>Nota: Por razones de tiempo y practicidad, el taller se realizar\u00eda con create-react-app en lugar de Next.JS, dejando de lado cosas como Server Side Rendering o autenticaci\u00f3n de usuarios, porque a pesar de pertenecer a funcionalidades que se esperan en una aplicaci\u00f3n real, no son esenciales para demostrar la combinaci\u00f3n React-WooCommerce, que es lo que se quiere lograr con este taller.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"525\" height=\"296\" src=\"https:\/\/www.youtube.com\/embed\/g0K5kkmz_SA?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=es-ES&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n\n\n<ul class=\"wordcamp-block wordcamp-post-list has-layout-list wordcamp-speakers\"><li class=\"wordcamp-post-list__post wordcamp-clearfix\">\n<div class=\"wordcamp-speaker wordcamp-speakers__post slug-isaias-subero\">\n\t<h3 class=\"wordcamp-block__item-title wordcamp-speakers__title\"><a href=\"https:\/\/sevilla.wordcamp.org\/2019-developers\/speaker\/isaias-subero\/\">Isa\u00edas Subero<\/a><\/h3>\n\t\t\t<div class=\"wordcamp-image__avatar-container align-none\">\n\t\t\t<a href=\"https:\/\/sevilla.wordcamp.org\/2019-developers\/speaker\/isaias-subero\/\" class=\"wordcamp-image__avatar-link\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/41518ae18fcb7d1aca41430cb6800cc8cb411db1d60f052160be7bfcb870d360?s=150&amp;d=mm&amp;r=g\" alt=\"Avatar de Isa\u00edas Subero\" \/>\t\t\t<\/a>\n\t\t<\/div>\n\t\n\t\t\t<div class=\"wordcamp-block__item-content wordcamp-speakers__content is-full\"><p>Isa\u00edas es Licenciado en Administraci\u00f3n, desarrollador web especializado en WordPress, WooCommerce y NodeJS. Tambi\u00e9n es co-organizador de la Meetup de WordPress Oviedo.<\/p>\n<p>Ayuda a empresas de diferentes pa\u00edses a tener una presencia efectiva en Internet. Compartir es la mejor manera de reforzar el conocimiento adquirido.<\/p>\n<\/div>\t\n\t<\/div>\n\n<\/li><\/ul>\n\n\n<h2 class=\"wp-block-heading\">Aperitivo formativo<\/h2>\n\n\n\n<p>Durante las pr\u00f3ximas semanas vamos a ir publicando material complementario (v\u00eddeos, cursos, tutoriales, etc) para que puedas sacarle todo el partido a esta sesi\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/openwebinars.net\/cursos\/react\/\" rel=\"nofollow\">https:\/\/openwebinars.net\/cursos\/react\/<\/a><\/li><li><a href=\"https:\/\/openwebinars.net\/cursos\/javascript-wordpress\/\" rel=\"nofollow\">https:\/\/openwebinars.net\/cursos\/javascript-wordpress\/<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Enlace a la presentaci\u00f3n y v\u00eddeo en WordPress.tv<\/h4>\n","protected":false},"excerpt":{"rendered":"<p>WooCommerce es una herramienta poderosa y altamente personalizable \u00bfpero que pasar\u00eda si la combin\u00e1semos con tecnolog\u00eda de punta del lado del frontend como React? Obtendr\u00edamos el rendimiento que una SPA (Single Page Application) sin tener que desarrollar un complejo backend de ecommerce desde cero. Pudi\u00e9semos aprevechar muchas de las funcionalidades de WooCommerce (y muchas de &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sevilla.wordcamp.org\/2019-developers\/session\/crea-una-spa-con-woocommerce-y-react-js\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abCrea una SPA con WooCommerce y React.js\u00bb<\/span><\/a><\/p>\n","protected":false},"author":13350789,"featured_media":5642,"template":"","meta":{"jetpack_post_was_ever_published":false,"_wcpt_session_time":1570208400,"_wcpt_session_duration":3000,"_wcpt_session_type":"session","_wcpt_session_slides":"https:\/\/2019-developers.sevilla.wordcamp.org\/files\/2019\/10\/Advanced-19_00-Isa%C3%ADas-Subero-Crea-una-SPA-con-WooCommerce-y-React.pdf","_wcpt_session_video":"https:\/\/wordpress.tv\/2019\/10\/18\/isaias-subero-crea-una-spa-con-woocommerce-y-react-js\/","_wcpt_speaker_id":[3284],"footnotes":""},"session_track":[1269857],"session_category":[10024,34220],"class_list":["post-2745","wcb_session","type-wcb_session","status-publish","has-post-thumbnail","hentry","wcb_track-aula-advanced","wcb_session_category-advanced","wcb_session_category-taller"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/papmcC-Ih","session_date_time":{"date":"4 de octubre de 2019","time":"19:00"},"session_speakers":[{"id":"3284","slug":"isaias-subero","name":"Isa\u00edas Subero","link":"https:\/\/sevilla.wordcamp.org\/2019-developers\/speaker\/isaias-subero\/"}],"session_cats_rendered":"Avanzado \/ Advanced, Taller \/ Workshop","_links":{"self":[{"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/sessions\/2745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":10,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/sessions\/2745\/revisions"}],"predecessor-version":[{"id":5705,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/sessions\/2745\/revisions\/5705"}],"speakers":[{"embeddable":true,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/speakers\/3284"}],"author":[{"embeddable":true,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wporg\/v1\/users\/musician1989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/media\/5642"}],"wp:attachment":[{"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/media?parent=2745"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/session_track?post=2745"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/sevilla.wordcamp.org\/2019-developers\/wp-json\/wp\/v2\/session_category?post=2745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}