https://github.com/kenkyoo/react-quotes
React Quotes es una aplicación sencilla desarrollada con React que muestra citas célebres junto con detalles adicionales como el autor, la categoría, el año, el país y el idioma original. Está diseñada para explorar citas de forma interactiva y dinámica.
https://github.com/kenkyoo/react-quotes
bootstrap javascript react sass typescript vite
Last synced: 3 months ago
JSON representation
React Quotes es una aplicación sencilla desarrollada con React que muestra citas célebres junto con detalles adicionales como el autor, la categoría, el año, el país y el idioma original. Está diseñada para explorar citas de forma interactiva y dinámica.
- Host: GitHub
- URL: https://github.com/kenkyoo/react-quotes
- Owner: Kenkyoo
- Created: 2024-12-06T07:58:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-06T08:20:46.000Z (over 1 year ago)
- Last Synced: 2025-04-01T09:07:28.956Z (over 1 year ago)
- Topics: bootstrap, javascript, react, sass, typescript, vite
- Language: CSS
- Homepage: https://react-quotes-two.vercel.app
- Size: 85.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Quotes
React Quotes es una aplicación sencilla desarrollada con React que muestra citas célebres junto con detalles adicionales como el autor, la categoría, el año, el país y el idioma original. Está diseñada para explorar citas de forma interactiva y dinámica.
## Características
- **Explora citas**: Navega entre citas con un botón "Siguiente".
- **Detalles adicionales**: Muestra/oculta detalles adicionales de cada cita.
- **Diseño responsivo**: Estilizado con Bootstrap para adaptarse a diferentes dispositivos.
## Tecnologías utilizadas
- **React**: Framework principal para la interfaz de usuario.
- **Bootstrap**: Framework de CSS para estilos.
- **Vite**: Herramienta de desarrollo para una construcción rápida y eficiente.
- **Sass**: Preprocesador de CSS para estilos personalizados.
## Instalación
1. Clona este repositorio:
```bash
git clone https://github.com/Kenkyoo/react-quotes.git
Navega al directorio del proyecto:
cd react-quotes
Instala las dependencias:
npm install
Scripts disponibles
En el directorio del proyecto, puedes ejecutar los siguientes comandos:
npm run dev: Inicia el servidor de desarrollo.
npm run build: Genera una versión de producción.
npm run preview: Previsualiza la versión de producción.
npm run lint: Analiza el código con ESLint.
npm run watch:sass: Observa y compila los cambios en los archivos Sass.
Cómo usar
Inicia el servidor de desarrollo:
npm run dev
Abre la aplicación en tu navegador en http://localhost:5173.
Estructura de la aplicación
src/data.jsx: Contiene un array con las citas y sus detalles.
src/App.jsx: Componente principal que maneja la lógica y la presentación de la aplicación.
Ejemplo de datos en data.jsx
export const frasesArray = [
{
frase: "El conocimiento es poder.",
autor: "Francis Bacon",
fuente: "Meditationes Sacrae",
categoria: "Filosofía",
año: 1597,
pais: "Inglaterra",
idiomaOriginal: "Latín"
},
// Más citas aquí...
];
Dependencias principales
React y ReactDOM: ^18.3.1
Bootstrap: ^5.3.3
Sass: ^1.78.0
Contribuciones
¡Las contribuciones son bienvenidas! Siéntete libre de abrir un issue o enviar un pull request.
Licencia: Este proyecto está bajo la Licencia MIT.