*recuerde ejecutar npm install react-scripts en consola para instalar todo lo necesario de manera local y la descarga no sea lenta :D (en .gitignore se incluyó /node_modules para que la descarga de github no sea lenta.)
La idea de esta WEB es programar un E-commerce en el cual el usuario elige los destinos de turimos internacional y cantidad de pasajes para luego finalizar la compra.
En el Header podemos encontrar un menu con las opciones: Home - América - Asia/OCN - Contacto
Home: Despliega en Hero y muestra todos los productos sin filtar
América: Muestra los destinos que pertenecen al continente Americano
Asia/OCN : Muestra los destinos que pertenecen al Asia/Oceania
CONTACTOS: En la Sección de el usuario puede enviarme un mail.
Footer: contiene links a todos mis plataformas.
HTML - En el cual inserté todo el contenido necesario para el proyecto.
CSS - Para darle estilos a todos los archivos *HTML.
JAVASCRIPT - Para la funcionalidad del E-commerce y ciertas animaciones que favorecen al diseño responsive.
REACT - Para la funcionalidad adaptada a la maxima velocidad de navegacion del usuario y creacion de componentes que se puedan reutilizar y reescalar.
Estas instrucciones te permitirán obtener una copia del proyecto en funcionamiento en tu máquina local para propósitos de desarrollo y pruebas.
Es necesario contar minimamente con la última versión estable de Visual Studio Code y Google Chrome. Para verificar que versión tienen instalada: Vsc -v gch -v Tener instalado el administrador de Base de Datos Postgres SQL (a futuro)
1 - Clonar repositorio
Desde la consola de comandos, ubicarse en la carpeta en la cual se clonara el repositrio y luego ejecutar el comando git clone mas la url. git clone https://github.com/jonathansansok/ecommerce-react-jonathan-sanso.git cd MI-APP npm install npm start
## Plugins
Esta tienda actualmente usa los siguientes plugins.
| Plugin | Install |
| ------ | ------ |
| React Router Dom |```install react-router-dom ```|
| firebase | ``` npm install firebase``` |
| Formik | ``` npm install formik --save``` |
| useForm | ``` npm install --save react-hooks-useform``` |
| Boostrap | ```npm install react-bootstrap bootstrap```|
| Sweet Alert 2 | ```npm install sweetalert2 ```|
| styled | ```npm i styled-components ```|
React Router es una biblioteca de enrutamiento del lado del servidor y del cliente con todas las funciones para React, una biblioteca de JavaScript para crear interfaces de usuario. React Router se ejecuta en cualquier lugar React se ejecuta; en la web, en el servidor con node.js y en React Native.
Si recién está comenzando con React en general, le recomendamos que siga la excelente guía de inicio en los documentos oficiales. Hay mucha información allí para ponerlo en marcha. React Router es compatible con React >= 16.8.
Mantendremos este tutorial rápido y directo. Al final, sabrá las API con las que trabaja día a día con React Router. Después de eso, puede profundizar en algunos de los otros documentos para obtener una comprensión más profunda.
### Boostrap ([bootstrap])
React-Bootstrap reemplaza el JavaScript de Bootstrap. Cada componente se ha creado desde cero como un verdadero componente de React, sin dependencias innecesarias como jQuery. Como una de las bibliotecas de React más antiguas, React-Bootstrap ha evolucionado y crecido junto con React, lo que la convierte en una excelente opción como base de la interfaz de usuario.
Creado teniendo en cuenta la compatibilidad, adoptamos nuestro núcleo de arranque y nos esforzamos por ser compatibles con el ecosistema de interfaz de usuario más grande del mundo. Al confiar completamente en la hoja de estilo de Bootstrap, React-Bootstrap simplemente funciona con los miles de temas de Bootstrap que ya le encantan.
El modelo de componentes de React nos da más control sobre la forma y función de cada componente. Cada componente se implementa teniendo en cuenta la accesibilidad. El resultado es un conjunto de componentes accesibles por defecto, sobre lo que es posible con Bootstrap simple.
### Sweet Alert 2 ([sweetAlert2])
Un reemplazo hermoso, con responsabilidad, personalizable y accesible (wai-aria) para las cajas emergentes de javascript con cero dependencias.
### Yup ([yup]) (a futuro se usará)
Yup, es un generador de esquemas de JavaScript para el análisis y la validación de valores. Defina un esquema, transforme un valor para que coincida, valide la forma de un valor existente o ambos. Sí, los esquemas son extremadamente expresivos y permiten modelar validaciones complejas e interdependientes o transformaciones de valores.
La API de Yup está fuertemente inspirada en Joi, pero es más sencilla y está construida con la validación del lado del cliente como su principal caso de uso. Sí, separa las funciones de análisis y validación en pasos separados. cast() transforma los datos mientras que la validación verifica que la entrada tenga la forma correcta. Cada uno se puede realizar en conjunto (como la validación de formularios HTML) o por separado (como deserializar datos confiables de las API).
### useForm ([useForm])
useForm es un generador de formularios de contacto adaptado a React que contiene varias acciones
optimizadas para su funcionalidad.
### styled ([styled])
Componente que nos permite llevar a cabo estilar desde js o jsx. especial para responsive.
Contacto: jonasans@live.com.ar