17. Creando nuestra app.

 Tutorial 17: Creando nuestra app

🛠️ Paso 1: Preparar nuestro entorno

Lo primero que vamos a hacer es abrir nuestra terminal o línea de comandos. Verificamos en qué directorio nos encontramos:

bash

# Verificar directorio actual

pwd

# En Windows puedes usar:

# cd

📁 Paso 2: Posicionarnos en el directorio deseado

Vamos a movernos al directorio donde queremos crear nuestro proyecto. En mi caso, será el Escritorio:

bash

# Moverse al escritorio

cd ~/Desktop

# En Windows:

# cd Desktop

⚡ Paso 3: Crear la aplicación React

Utilizaremos Create React App para generar nuestra aplicación base:

# Crear nueva aplicación React

npx create-react-app rick-morty-app

Nota: Si prefieres otro nombre, puedes cambiarlo. Yo usaré rick-morty-app para ser consistentes con el proyecto.


⏳ Esperando la instalación

El comando anterior:

  • Descargará todos los paquetes necesarios de React

  • Creará la estructura de carpetas base

  • Configurará Webpack, Babel y otras herramientas

Esto puede tomar algunos minutos dependiendo de:

  • Tu conexión a Internet

  • La velocidad de tu computadora

  • Paquetes previamente descargados

Mientras esperas, puedes ver el progreso en la terminal.

✅ Paso 4: Verificar la instalación

Una vez completada la instalación, verás un mensaje similar a:

text

Success! Created rick-morty-app at /Users/tu-usuario/Desktop/rick-morty-app


Inside that directory, you can run several commands:


  npm start

    Starts the development server.


  npm run build

    Bundles the app into static files for production.


  npm test

    Starts the test runner.


We suggest that you begin by typing:


  cd rick-morty-app

  npm start


Happy hacking!

📂 Paso 5: Acceder a nuestra aplicación

Ahora vamos a entrar en el directorio de nuestro proyecto:

bash

# Entrar al directorio del proyecto

cd rick-morty-app

🔧 Paso 6: Abrir en Visual Studio Code

Vamos a abrir nuestro proyecto en el editor de código (en mi caso, VS Code):

bash

# Abrir en VS Code

code .

Alternativas si no tienes configurado code .:

  • Abrir VS Code manualmente y usar "Open Folder"

  • Arrastrar la carpeta del proyecto a VS Code

⚙️ Paso 7: Personalizar scripts (Opcional pero recomendado)

Yo personalmente prefiero modificar el script de inicio. Vamos al archivo package.json:

json

// Antes:

"scripts": {

  "start": "react-scripts start",

  "build": "react-scripts build",

  "test": "react-scripts test",

  "eject": "react-scripts eject"

}


// Después:

"scripts": {

  "dev": "react-scripts start",

  "build": "react-scripts build",

  "test": "react-scripts test",

  "eject": "react-scripts eject"

}

¿Por qué este cambio?

  • Es una convención común en el desarrollo web

  • dev claramente indica que es para desarrollo

  • Si añades más scripts posteriormente, será más organizado

🚀 Paso 8: Ejecutar nuestra aplicación

Ahora vamos a abrir la terminal integrada en VS Code o usar nuestra terminal externa:

bash

# Ejecutar la aplicación

npm run dev

# O si no cambiaste el script:

# npm start

Lo que sucederá:

  1. React compilará tu aplicación

  2. Se iniciará un servidor de desarrollo local

  3. Se abrirá automáticamente tu navegador en http://localhost:3000

  4. Verás la página por defecto de Create React App

🌐 Paso 9: Verificar que todo funciona

Abre tu navegador y ve a:

text

http://localhost:3000

Deberías ver la página de inicio de React con el logo girando.

📝 Paso 10: Estructura inicial del proyecto

Dentro de VS Code, verás esta estructura:

text

rick-morty-app/

├── node_modules/      # Dependencias instaladas

├── public/           # Archivos públicos

│   ├── index.html    # HTML principal

│   └── ...

├── src/              # Código fuente

│   ├── App.js        # Componente principal

│   ├── App.css       # Estilos del App

│   ├── index.js      # Punto de entrada

│   ├── index.css     # Estilos globales

│   └── ...

├── package.json      # Configuración del proyecto

├── package-lock.json # Versiones exactas de dependencias

└── README.md         # Documentación

🎯 Resumen de lo que hicimos:

  1. ✅ Abrimos la terminal

  2. ✅ Nos posicionamos en el directorio deseado

  3. ✅ Creamos la app con npx create-react-app

  4. ✅ Accedimos al directorio del proyecto

  5. ✅ Abrimos en VS Code con code .

  6. ✅ Modificamos el script de inicio (opcional)

  7. ✅ Ejecutamos con npm run dev

  8. ✅ Verificamos en localhost:3000

🔄 Comandos útiles para recordar:

bash

# Crear nueva app

npx create-react-app nombre-app


# Entrar al directorio

cd nombre-app


# Abrir en VS Code

code .


# Ejecutar en desarrollo

npm run dev  # o npm start


# Detener el servidor

Ctrl + C (en la terminal)

⚠️ Posibles problemas y soluciones:

Problema 1: npx no funciona

bash

# Alternativa con npm

npm init react-app nombre-app

Problema 2: Puerto 3000 ocupado

bash

# En Windows/Mac/Linux busca qué usa el puerto:

# Windows:

netstat -ano | findstr :3000


# Mac/Linux:

lsof -i :3000

Problema 3: No se abre automáticamente el navegador

  • Ve manualmente a http://localhost:3000

  • O usa npm run dev -- --open

🎉 ¡Felicidades!

Ya tienes tu aplicación React configurada y ejecutándose. En el próximo tutorial comenzaremos a limpiar y preparar los archivos base para nuestro proyecto Rick & Morty.

¿Te apareció la página de React por defecto? ¡Perfecto! Estás listo para continuar. 🚀

¿Tuviste algún problema durante la instalación? Compártelo en los comentarios para ayudarte

Comentarios

Publicar un comentario

Entradas más populares de este blog

9.3-Tutorial de Componentes React con Props -SSS

  Tutorial Sencillo de Componentes React con Props Ejemplo 1: Componente Saludo (simple) Componente Padre: App.js jsx function App () {    return (      < div >        < Saludo nombre = "Ana" edad ={ 25 } />        < Saludo nombre = "Carlos" edad ={ 30 } />      </ div >    ); } Componente Hijo: Saludo.js jsx function Saludo ( props ) {    return (      < div style ={{       border : '1px solid gray' ,       padding : '10px' ,       margin : '10px' ,       borderRadius : '5px'      }}>        < h3 > Hola { props . nombre }</ h3 >        < p > Tienes { props . edad } años ...
Leer más

9.6-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida En Componentes de Clase: javascript class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    }    // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    }    // 3. RENDER (montaje/act...
Leer más

9-Componentes en React-estado

Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } ******************************************** // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Co...
Leer más