1-INSTALAR REACT

Guía Completa para Instalar y Configurar React

🔍 ¿Qué es React?

React es una biblioteca JavaScript para construir interfaces de usuario interactivas y componentes reutilizables. Es ideal para desarrollar aplicaciones de página única (SPA).

📋 Requisitos Previos

1. Instalar Node.js y npm

React requiere Node.js (que incluye npm). Verifica tus versiones:

bash
Copy
Download
node -v  # Debe ser v16.14.0 o superior
npm -v   # Debe ser v8.3.0 o superior
npx -v   # Verifica que tienes npx

Si no los tienes:

  • Descarga Node.js desde nodejs.org

  • O instala con tu gestor de paquetes:

    bash
    Copy
    Download
    # Para Ubuntu/Debian
sudo apt install nodejs npm

2. Actualiza tus herramientas

bash
Copy
Download
npm install -g npm@latest
npm install -g npx

🛠️ Crear un Proyecto React

Opción 1: Con Create-React-App (CRA)

bash
Copy
Download
npx create-react-app mi-app
cd mi-app
npm start

Recomendación: Desinstala CRA global si lo tenías para evitar conflictos:

bash
Copy
Download
npm uninstall -g create-react-app

Opción 2: Con Vite (Más rápido y moderno)

bash
Copy
Download
npm create vite@latest mi-app --template react
cd mi-app
npm install
npm run dev

🏗️ Estructura Básica de un Componente

jsx
Copy
Download
import React from 'react';

function MiComponente() {
  return <h1>¡Hola React!</h1>;
}

export default MiComponente;

🖥️ Renderizado en React 18

jsx
Copy
Download
import ReactDOM from 'react-dom/client';

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

🔄 Actualizar a React 18

  1. Instala las últimas versiones:

bash
Copy
Download
npm i react@latest react-dom@latest

  1. Actualiza el punto de entrada (index.js):

diff
Copy
Download
- import ReactDOM from 'react-dom';
- ReactDOM.render(<App />, document.getElementById('root'));

+ import ReactDOM from 'react-dom/client';
+ const root = ReactDOM.createRoot(document.getElementById('root'));
+ root.render(<App />);

🎨 Modificar tu Aplicación

El archivo principal está en src/App.js. Ejemplo simplificado:

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

export default App;

🌐 Iniciar el Servidor de Desarrollo

bash
Copy
Download
npm start  # Para Create-React-App
npm run dev  # Para Vite

Abre tu navegador en http://localhost:3000

📂 Estructura Recomendada de Archivos

Copy
Download
mi-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   ├── App.js
│   ├── index.js
│   └── styles/
├── package.json
└── README.md

💡 Consejos Esenciales

  1. Hot Reloading: Los cambios se ven al guardar (sin refrescar)

  2. Extensiones útiles:

    • ES7+ React Snippets (VS Code)

    • React Developer Tools (para navegador)

  3. Dependencias comunes:

    bash
    Copy
    Download
    npm install react-router-dom axios

🚀 Siguientes Pasos



 

Comentarios

Publicar un comentario

Entradas más populares de este blog

6.5-4-Qué son las Props

Qué son las Props Son datos que se pasan de un  componente padre  a un  componente hijo . Las props son  inmutables  (el hijo no puede modificarlas directamente) y pueden ser de cualquier tipo: Strings, números, booleanos Arrays, objetos Funciones (para comunicación hijo → padre) Elementos React, componentes, etc. Permiten la comunicación entre componentes(Padre al hijo). Pueden ser de cualquier tipo: strings, números, arrays, objetos, funciones, etc. Ejemplo Básico jsx-cadena-entero // En el componente padre (App.js) function App ( ) { const userName = "Agustín Navarro" ; const age = 26 ; return ( < Saludar nombre = { userName } edad = { age } /> ) ; } // En el componente hijo (Saludar.js) function Saludar ( props ) { return ( < div > < h1 > Hola { props . nombre } </ h1 > < p > Edad: { props . edad } años </ p > </ div > ) ; } 🔹  ...
Leer más

6.8-23-pasando funciones a nuestro componente

Imagen
Pasando Funciones como Props en React Introducción Clara y Motivadora En React, los componentes no solo pueden recibir datos a través de props, ¡también pueden recibir funciones! Esto nos permite: ✅ Crear componentes interactivos (como botones que ejecutan acciones) ✅ Comunicar componentes hijos con padres ✅ Construir aplicaciones más dinámicas y reactivas 1. Pasando Funciones Básicas Ejemplo Simple: Botón con Alerta jsx-Funciones Básicas Copy Download // Componente Padre (App.js) function App ( ) { const saludar = ( ) => { alert ( "¡Hola desde el componente padre!" ) ; } ; return < BotonSaludar onClick = { saludar } /> ; } // Componente Hijo (BotonSaludar.js) function BotonSaludar ( props ) { return ( < button onClick = { props . onClick } > Saludar </ button > ) ; } 🔹  Key Points : La función se define en el padre y se pasa como prop ( onClick ) El hijo ejecuta la función cuando ocurre un evento ...
Leer más

6.12-0-3- Spread Operator

 Spread Operator en Props de React El  spread operator  ( ... ) es una herramienta poderosa en React que nos permite pasar múltiples  props  de manera más eficiente y limpia. ¡Veamos un ejemplo práctico! 🔹 ¿Cómo funciona? En lugar de pasar cada  prop  manualmente, podemos expandir un objeto directamente en las props del componente. Ejemplo sencillo: jsx-operator-objeto  // Definimos un objeto con las props const usuario = { nombre : "Ana" , edad : 25 , pais : "España" } ; // Pasamos todas las props de una vez usando ... function TarjetaUsuario ( props ) { return ( < div > < h2 > Nombre: { props . nombre } </ h2 > < p > Edad: { props . edad } </ p > < p > País: { props . pais } </ p > </ div > ) ; } // Uso del componente function App ( ) { return < TarjetaUsuario { ... usuario } /> ; } 🔹 Beneficios: ✅  Evita repetir ...
Leer más