crea una spa con woocommerce y react js · 2019. 10. 14. · crea una spa con woocommerce y react...
TRANSCRIPT
![Page 1: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/1.jpg)
Crea una SPA con WooCommerce y React JS
Isaías Subero
![Page 2: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/2.jpg)
Ventajas de una SPA
• Rápida y responsiva.
• Mejor experiencia de usuario.
• Evitamos peticiones innecesarias de assets.
• Mejor aprovechamiento de los recursos.
• Ahorro en costos de servidor.
• Potencialidades de PWA.
• El usuario no necesita instalar una app.
![Page 3: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/3.jpg)
¿Qué estaremos construyendo?
![Page 4: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/4.jpg)
¿Qué estaremos construyendo?
• Vista de productos.
• Vista de detalle de productos.
• Agregar productos al carrito.
• Eliminar productos del carrito.
• Recalcular automáticamente subtotal del carrito.
• Comunicarnos con la API de WooCommerce para acceder a la data de los productos y crear pedidos (orders).
• Aprendiendo rutas.
• React Context para manejar el estado global de la aplicación.
• CSS Modules.
• ¡Sin recargar la página! ☺
![Page 5: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/5.jpg)
¿Qué estaremos usando?
ReactLibrería Javascript para crear interfaces de usuario.
React RouterColección de componentesde navegación.
AxiosCliente de peticiones HTTP.
WooCommercePlugin de WordPress para crear tiendas online.
Create React AppUtilidad para crear un ambiente de desarrollo de React.
CRA
![Page 6: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/6.jpg)
Estructura de Ficheros de CRA
![Page 7: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/7.jpg)
Generando las credenciales de la API REST de WooCommerce
![Page 8: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/8.jpg)
Generando las credenciales de la API REST de WooCommerce
![Page 9: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/9.jpg)
Rutas con React Router
![Page 10: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/10.jpg)
Componente: Productoshttps://github.com/isubero/react-store/blob/master/src/components/Products/Products.jsx
![Page 11: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/11.jpg)
Componente: Productohttps://github.com/isubero/react-store/blob/master/src/components/Product/Product.jsx
![Page 12: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/12.jpg)
Componente: Checkout
Este componente es demasiado largo como para mostrarlo en capturas de pantallas.
Está disponible en https://github.com/isubero/react-store/blob/master/src/components/Checkout/Checkout.jsx para mostrarlo en detalle durante la presentación.
![Page 13: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/13.jpg)
React Context API
Con React context podemos acceder a datos sin tener que pasarlos explícitamente en cada componente vía props.
No es necesariamente un reemplazo a Redux, pero podría llegar a serlo.
![Page 14: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/14.jpg)
¿Cómo funciona React Context?
• Creamos un contexto con React.createContext()
• createContext() nos devuelve dos componentes, un Provider y un Consumer.
• Le pasamos el valor que queremos que esté disponible a nivel global en la aplicación a nuestro Provider.
• Utilizamos el Consumer para acceder a esos datos.
• cartContext.js disponible en https://github.com/isubero/react-store/blob/master/src/cartContext.js
![Page 15: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/15.jpg)
Creando nuestro primer Contexto
• Este componente es muy largo para ponerlo en capturas de pantalla.
• Está disponible en https://github.com/isubero/react-store/blob/master/src/cartContext.js para mostrarlo en detalle durante la presentación.
![Page 16: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/16.jpg)
La seguridad lo primero…
Esto no es seguro. Usar solo durante el desarrollo.
![Page 17: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/17.jpg)
Add to cart
Podemos definir no solo valores, sino métodos como parte del estado global.
Podemos definir el método addToCart() dentro del contexto y hacerlo accesible desde cualquier parte de la app.
Podemos usarlo luego en Product.jspara agregar productos al carrito (nuestro contexto global).
![Page 18: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/18.jpg)
Accediendo al contexto: Product.js
Declaramos el contexto a usar en el componente
Utilizamos el método definido en el contexto.
Importamos el contexto
![Page 19: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/19.jpg)
Accediendo al contexto: Cart.js
![Page 20: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/20.jpg)
Creando pedidos: Checkout.js
Atención al método formatLineItems()Compone los productos y sus cantidades para ser enviados en el formato esperado por la API de WooCommerce.
Atención al método handleSubmit()Compone los datos de formulario en el formato esperado por la API de WooCommerce.
https://github.com/isubero/react-store/blob/master/src/components/Checkout/Checkout.jsx
![Page 21: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/21.jpg)
![Page 22: Crea una SPA con WooCommerce y React JS · 2019. 10. 14. · Crea una SPA con WooCommerce y React JS Isaías Subero. Ventajas de una SPA •Rápida y responsiva. •Mejor experiencia](https://reader036.vdocumento.com/reader036/viewer/2022062510/6124c78d9bf8533449685e4f/html5/thumbnails/22.jpg)
Nuestro pedido creado exitosamente