javascriptdenoobapro@gmail.com

eCommerce Full Responsive con React js

Programamos un eCommerce full responsive con React en directo .

¿Qué vas a aprender en este Vídeo?

  • Construir un E-COMMERCE con react
  • Hacer que la web sea «RESPONSIVE» en diferentes dispositivos
  • React router para crear rutas a los subdominios
  • Aplicar estilos con material-ui
  • Autenticación con Firebase de email y password … y muchos más conceptos.

Aquí os dejamos las marcas de tiempo para que podáis volver a ver aquellas partes del proyecto que queráis trabajar:

  • 00:00 Inicio
  • 00:52 Presentación resultado final
  • 05:10 Inicializar plantilla react
  • 05:49 Comenzamos el proyecto npm start o yarn start
  • 06:48 Explicamos el esquema de la estructura del ecommerce
  • 12:05 Limpiar la plantilla de Reactjs
  • 15:38 Material UI – elegimos diseño de una CARD y copiamos/pegamos el código para modificarlo posteriormente
  • 19:15 Instalamos los paquetes necesarios de Material UI
  • 20:23 Analizamos el código del Card para comprender sus partes
  • 23:00 Empezamos a personalizar el código del CARD
  • 31:27 Cómo añadir valoración con estrellitas – código
  • 37:48 Librería Accounting npm o cómo formatear un número en un precio con el símbolo de la moneda que queramos
  • 40:50 Cómo implementar un navbar con Material UI
  • 44:50 Personalizar el navbar para que nuestro eCommerce tenga un diseño único
  • 1:08:38 Cómo programamos una página web responsive con GRID de Material UI creando breakpoints para diferentes tamaños de pantalla.
  • 1:23:48 Personalizamos cada producto – creamos un archivo que contenga un array con los productos que mostraremos en nuestro APP
  • 1:37:42 Checkout page – Incluyendo CARDS modificadas para poder borrar productos del carrito de la compra de nuestro eCommerce y haciendo que el carrito sume el precio de los productos y lo recalcule con cada cambio
  • 2:04:52 Trabajamos en el TOTAL dándole funcionalidad.
  • 2:17:20 Explicación de la estructura del eCommerce, CONTEXT API, reducer.js y Stateprovider.js para crear el carrito y vaya añadiendo los productos que seleccionemos.
  • 2:33:40 Intstalamos React Router DOM y lo uitlizamos para crear una serie de rutas que permitirán que se pueda navegar por la pagina web
  • 2:43:44 Damos funcionalidad al botón del icono «carrito de cada card» para que al clickarlo añada el producto al carro
  • 2:56:15 Damos funcionalidad al botón frl icono «papelera» para al clickarlo elimine el producto del carrito
  • 3:02:03 Cómo eliminar un producto duplicado del carrito sin que se borren todas las unidades de ese producto
  • 3:07:43 Cómo actualizamos los items, modificando el número de productos y la suma de los precios de los diferentes productos
  • 3:16:52 Añadimos autenticación creando un proyecto en Firebase
  • 4:14:18 Implementar formulario de pago – elegimos una plantilla en Material UI y la integramos en nuestra página web
  • 4:23:30 ¿Cómo hacer el deploy en Netlify muy rápido? Creamos carpeta Build, que es una carpeta que contiene todos los archivos necesarios para publicar el sitio web.

Añade la Pasarela de Pago a tu eCommerce

En este segundo vídeo aprenderás a:

  • Incluir en el ecommerce una pasarela de pago (stripe payment) con REACT
  • Utilizar UseForm para optimizar los formularios

Descárgate el código de este proyecto

En nuestra tienda online tenemos a la venta los archivos con el código completo de los proyectos de REACT JS.

 

Otros tutoriales de REACTJS que te interesan