36. 2 Dando estilos

 

Tutorial 36.2: Dando estilos a nuestro proyecto

Importancia del archivo package.json

Es importante fijarnos siempre en el archivo package.json de cualquier proyecto. Este archivo nos da información crucial sobre cómo fue creado el proyecto y cómo debemos manejarlo.

Identificando el empaquetador

En nuestro proyecto 01-peliculas, si miramos el package.json, veremos:

json

{

  "name": "01-peliculas",

  "private": true,

  "version": "0.0.0",

  "type": "module",

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "preview": "vite preview"

  },

  "dependencies": {

    "react": "^18.2.0",

    "react-dom": "^18.2.0"

  },

  "devDependencies": {

    "@types/react": "^18.0.27",

    "@types/react-dom": "^18.0.10",

    "@vitejs/plugin-react": "^3.1.0",

    "vite": "^4.1.0"

  }

}

Lo más importante aquí es que dice que se ha creado con Vite (fíjate en los scripts que usan vite).

Ejecutando el proyecto con diferentes gestores

Con Yarn (el que usamos)

bash

yarn dev

Con npm (alternativa)

bash

npm run dev

Diferencia: Con npm necesitas agregar run antes del nombre del script.

Probemos ambas formas:

  1. Detenemos el servidor actual: Ctrl + C (dos veces para asegurar)

  2. Ejecutamos con npm:

  3. bash

  4. npm run dev
    Hace exactamente lo mismo que yarn dev, solo que con una palabra extra (run).

¿Por qué es importante identificar el empaquetador?

Porque diferentes empaquetadores tienen diferentes configuraciones:

  • Create React App: En el package.json verás "react-scripts start"

  • Vite: En el package.json verás "vite"

Ventaja de Vite: Es mucho más rápido, especialmente útil si eres impaciente (como yo) o si tu computadora no tiene los mejores recursos.

Estructura del proyecto Vite

Vamos a explorar la estructura que nos creó Vite:

text

01-peliculas/

├── public/

│   └── vite.svg

├── src/

│   ├── assets/

│   │   └── react.svg

│   ├── App.css

│   ├── App.jsx

│   ├── index.css

│   └── main.jsx

├── index.html

├── package.json

└── vite.config.js

Diferencias con Create React App:

  1. El archivo index.html está fuera de public/ - Vite lo maneja de forma diferente para mayor velocidad

  2. Proyecto más limpio - Viene con menos archivos y comentarios innecesarios

  3. Extensión .jsx obligatoria - Vite te obliga a usar la extensión correcta para archivos JSX

Modificando nuestra aplicación

Paso 1: Limpiar el archivo App.jsx

Vamos a src/App.jsx y eliminamos todo el contenido por defecto:

jsx

function App() {

  return (

    <div className="App">

      {/* Vamos a agregar nuestro contenido aquí */}

    </div>

  );

}


export default App;

Paso 2: Agregar un header con título

jsx

function App() {

  return (

    <div className="App">

      <header>

        <h1 className="title">Películas 🎬</h1>

      </header>

    </div>

  );

}

Aplicando estilos

Paso 3: Limpiar y organizar los archivos CSS

src/index.css - Estilos globales:

css

/* Importar fuente de Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* Reset de estilos */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


/* Estilos del body */

body {

  font-family: 'Poppins', sans-serif;

  background-color: #1a1a2e;

  color: #ffffff;

  line-height: 1.6;

}

src/App.css - Estilos específicos del componente:

css

/* Estilos para el título */

.title {

  text-align: center;

  font-size: 3rem;

  margin: 2rem 0;

  color: #ffd700; /* Color dorado tipo React */

  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);

}


/* Estilos para el header */

header {

  padding: 1rem;

  background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);

  border-bottom: 3px solid #ffd700;

}

Paso 4: Importar Google Fonts

Para usar la fuente Poppins, puedes:

  1. Ir a fonts.google.com

  2. Buscar "Poppins"

  3. Seleccionar los pesos que necesites (300, 400, 500, 600, 700)

  4. Copiar el link del @import

O simplemente usar:

css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

Jerarquía de estilos en React

Es importante entender cómo funcionan los estilos en React:

  1. Estilos globales (index.css): Afectan a toda la aplicación

  2. Estilos de componente (App.css): Afectan solo al componente específico

  3. Estilos en línea: Usando el atributo style en los elementos

Ejemplo de especificidad:

jsx

// En App.jsx

<h1 className="title" style={{ fontStyle: 'italic' }}>

  Películas 🎬

</h1>

El orden de aplicación sería:

  1. index.css establece color blanco para todos los textos

  2. App.css cambia el color a dorado para .title

  3. El estilo en línea agrega cursiva

Resultado final

Después de aplicar todos estos cambios, tendrás una aplicación con:

  • Un fondo oscuro elegante

  • Un header con gradiente azul

  • Un título dorado centrado con sombra

  • Fuente Poppins en toda la aplicación

  • Reset de márgenes y paddings para consistencia

Próximos pasos

En el siguiente tutorial aprenderemos a:

  1. Crear componentes reutilizables

  2. Organizar mejor nuestros archivos CSS

  3. Usar CSS Modules para evitar conflictos de estilos

  4. Implementar un sistema de diseño coherente

Consejo: Siempre mantén tu código CSS organizado y comentado, especialmente cuando trabajes en proyectos grandes.

¡Perfecto! Ahora tienes una base sólida para empezar a construir tu aplicación de películas con estilos profesionales

Comentarios

Publicar un comentario

Entradas más populares de este blog

11. Creando un proyecto react con create-react-app

    ¡Vamos a crearnos ahora nuestros proyectos de realidad! Vamos a ver dos formas. La primera va a ser con el clásico  Create React App , que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación. Esta es la forma que también  React nos recomienda  para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta. Paso a paso: Creamos una carpeta raíz  para almacenar todos nuestros proyectos. Yo la llamé "React intensivo". Abrimos  Visual Studio Code  (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola. Una vez dentro de la carpeta, abrimos una  nueva terminal  en VS Code. Según la documentación de React, el comando es: bash npx create-react-app < nombre-...
Leer más

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más