13. Reconociendo carpetas en react

  

Estructura de Carpetas en React - Guía Completa

Hoy vamos a desglosar la estructura de carpetas en un proyecto React y entender para qué sirve cada archivo y directorio. ¡Vamos a organizar nuestro código como profesionales! 🚀

📁 Estructura Básica de un Proyecto React

Carpetas CRÍTICAS (No tocar)

bash
node_modules/    ⚠️  # Dependencias instaladas - NO MODIFICAR

Archivos de Configuración

bash
package.json     📋  # Dependencias y scripts del proyecto
package-lock.json 🔒 # Historial exacto de dependencias
README.md        📚  # Documentación del proyecto

Carpeta Pública

bash
public/
├── index.html   🏠  # ÚNICO HTML - Punto de entrada
└── favicon.ico  🎯  # Ícono del sitio

💡 Importante: En index.html encontramos el div con id="root" que es el contenedor donde React renderiza toda la aplicación.

Carpeta Source (Src) - ¡El Corazón del Proyecto!

bash
src/
├── index.js     ⚡  # Punto de entrada JavaScript
├── App.js       🎨  # Componente principal
├── App.css      🎭  # Estilos del componente App
└── ...          📦  # Tus componentes y archivos

🎯 Explicación Clave de Archivos

1. public/index.html

html
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div> <!-- ¡Aquí vive React! -->
  </body>
</html>

  • Único archivo HTML de la aplicación

  • React inyecta todo el contenido en el div #root

  • Contiene metadatos, título y enlaces a recursos

2. src/index.js

javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

  • Puerta de entrada de JavaScript

  • Conecta React con el DOM

  • Renderiza el componente principal

3. src/App.js

javascript
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>¡Bienvenido a React!</h1>
    </div>
  );
}

export default App;

  • Componente raíz de la aplicación

  • Contiene la estructura principal

  • Importa y organiza otros componentes

🗂️ Estructura Recomendada para Proyectos Reales

bash
src/
├── components/     # Componentes reutilizables
├── pages/         # Componentes de página completa
├── hooks/         # Custom hooks personalizados
├── contexts/      # Context API para estado global
├── services/      # Llamadas a APIs y servicios
├── utils/         # Funciones utilitarias
├── styles/        # Archivos de estilos globales
├── assets/        # Imágenes, fuentes, etc.
└── App.js         # Componente principal

🚀 Buenas Prácticas

  1. Mantén node_modules intacta - Nunca la modifiques manualmente

  2. Organiza por funcionalidad no por tipo de archivo

  3. Usa nombres descriptivos en carpetas y archivos

  4. Componentes en PascalCase - MiComponente.js

  5. Utilidades en camelCase - formatearFecha.js

⚠️ Archivos que Podemos Eliminar Al Inicio

  • src/App.test.js (si no usamos testing)

  • src/reportWebVitals.js

  • src/setupTests.js

  • src/logo.svg

🎬 Comandos Esenciales

bash
# Crear proyecto
npx create-react-app nombre-proyecto

# Iniciar servidor de desarrollo
npm start

# Construir para producción
npm run build

💡 Conclusión

Entender la estructura de carpetas en React es fundamental para:

  • Mantener el código organizado

  • Facilitar el trabajo en equipo

  • Escalar la aplicación fácilmente

  • Encontrar archivos rápidamente

Recuerda: React es una librería, no un framework, por lo que te da libertad para organizar tu proyecto como mejor te parezca. ¡Aprovecha esa flexibilidad! 

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