Skip to content

sierraCode397/E-Commerce

Repository files navigation

E-Commerce Web App

Este proyecto es una página web de E-Commerce construida con React y utilizando tres diferentes hooks:

- useState
- useEffect
- useContext

La aplicación consume una API para poder integrar imagenes y sus respectivos datos como el precio y una descripcion .

Con React Router DOM permitio unir diferentes componentes, contenedores y paginas en una misma APP


Utiliza las siguientes dependencias:

  • @babel/core: Compilador de JavaScript utilizado para transpilar código JS moderno a una versión compatible con navegadores antiguos.

  • @babel/plugin-transform-runtime: Plugin de Babel que permite utilizar las funciones de ayuda de babel-runtime sin tener que importarlas manualmente en cada archivo.

  • @babel/preset-env: Conjunto de plugins de Babel que permite compilar código JavaScript moderno a una versión compatible con la mayoría de los navegadores.

  • @babel/preset-react: Plugin de Babel que permite compilar código JSX a código JavaScript puro.

  • axios: Librería para realizar peticiones HTTP a una API.

  • babel-loader: Loader de Webpack utilizado para transpilar el código JS a una versión compatible con la mayoría de los navegadores.

  • html-loader: Loader de Webpack utilizado para cargar archivos HTML en el proyecto.

  • html-webpack-plugin: Plugin de Webpack utilizado para generar un archivo HTML que incluye automáticamente los archivos generados por Webpack.

  • react: Biblioteca de JavaScript utilizada para construir interfaces de usuario.

  • react-dom: Biblioteca de JavaScript utilizada para manipular el árbol de elementos del DOM en una aplicación React.

  • react-router-dom: Biblioteca de JavaScript utilizada para la navegación entre páginas en una aplicación React.

  • webpack: Herramienta de empaquetado de módulos para JavaScript.

  • webpack-cli: Interfaz de línea de comandos para Webpack.

  • webpack-dev-server: Servidor de desarrollo de Webpack utilizado para servir la aplicación durante el desarrollo.


Dev-dependencias

  • css-loader: Loader de Webpack utilizado para cargar y compilar archivos CSS en el proyecto.

  • mini-css-extract-plugin: Plugin de Webpack utilizado para extraer archivos CSS en un archivo separado durante la compilación.

  • sass: Preprocesador de CSS utilizado para escribir estilos de una manera más eficiente y mantenible.

  • sass-loader: Loader de Webpack utilizado para cargar y compilar archivos SASS en el proyecto.

  • style-loader: Loader de Webpack utilizado para cargar estilos CSS en la aplicación.


Hooks utilizados

  • useState: Hook utilizado para gestionar el estado de la aplicación y permitir la actualización del DOM en función de los cambios en dicho estado.

  • useEffect: Hook utilizado para realizar operaciones secundarias, como la recuperación de datos de una API, y actualizar el estado de la aplicación en consecuencia.

  • useContext: Hook utilizado para acceder a datos globales almacenados en un contexto compartido por todos los componentes de la aplicación.


Uso

  • Clona el repositorio en tu máquina local.
  • Instala las dependencias con npm.
  • Configura tu archivo de webpack para que tu servidor local pueda acceder a los diferentes tipos de archivo
  • Ejecuta la aplicación con npm run start.
  • Accede a la aplicación en http://localhost:8080/.

Créditos

Este proyecto fue desarrollado por [Isaac Luisjuan] en [Tue Feb 7 20:47:14 2023].

About

Tienda E-Commerce construida en React y consumiendo una API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages