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

10-Tutorial de useEffect en React: Gu铆a para Principiantes

  Tutorial de useEffect en React: Gu铆a para Principiantes (Perfecto para tu blog – Ejemplos claros y pr谩cticos) ¿Quieres manejar efectos secundarios en tus componentes de React, como llamadas a APIs, suscripciones o manipulaci贸n del DOM?  useEffect  es el hook esencial para eso. En este tutorial, te explico paso a paso c贸mo usarlo con ejemplos f谩ciles de entender. 馃敼 ¿Qu茅 es useEffect? useEffect  es un hook de React que te permite ejecutar c贸digo  despu茅s de que el componente se renderiza  (o cuando ciertas dependencias cambian). Es ideal para: Llamadas a APIs. Suscripciones a eventos (ej:  scroll ,  resize ). Manipular el DOM directamente. Limpiar recursos (ej: timeouts, intervalos). 馃洜️ Sintaxis B谩sica jsx import { useEffect } from 'react' ; function MiComponente ( ) { useEffect ( ( ) => { // C贸digo que se ejecuta despu茅s del render console . log ( "El componente se renderiz贸" ) ; // Funci贸n de limpieza (opcional) re...
Leer m谩s

5.4--34. Nuestro primer Componente en React JS

Nuestro Primer Componente en React JS https://codesandbox.io/p/sandbox/h8rt93 ¡Ya tenemos nuestra aplicaci贸n de React levantada y abierta en nuestro editor de c贸digo! 馃帀 Ahora vamos a crear nuestro  primer componente  y aprenderemos c贸mo estructurarlo correctamente, nombrarlo y a帽adirlo a nuestra aplicaci贸n. Estructura de un Componente 1. Ubicaci贸n del Componente Todo componente debe ir en la carpeta  src . Es una buena pr谩ctica crear una subcarpeta llamada  components  dentro de  src  para organizar mejor nuestros componentes. 2. Nombre del Componente ¡Siempre debe empezar con may煤scula! ✅  HolaMundo.js ❌  holaMundo.js  (incorrecto) 3. Estructura B谩sica Un componente en React consta de tres partes principales: a) Importaciones jsx import React from 'react' ; Aqu铆 importamos librer铆as, estilos, im谩genes u otros componentes. b) Funci贸n del Componente jsx function HolaMundo ( ) { return ( < div > < h1 > Hola...
Leer m谩s

6.4-5-5-Componentes y Comunicaci贸n

   Gu铆a Completa de Componentes en React: Padres, Hijos y Comunicaci贸n 馃寪 Componentes Padres e Hijos En React, los componentes se organizan en una jerarqu铆a donde: Componentes padres  contienen y gestionan otros componentes Componentes hijos  son renderizados dentro de padres jsx Copy Download // Componente Padre function Parent ( ) { return ( < div > < h1 > Yo soy el padre </ h1 > < Child /> { /* Componente Hijo */ } </ div > ) ; } // Componente Hijo function Child ( ) { return < p > Yo soy el hijo </ p > ; } 馃攧 Comunicaci贸n entre Componentes 1. De Padre a Hijo (Props) La forma m谩s com煤n: el padre pasa datos al hijo mediante props. jsx Copy Download function Parent ( ) { const [ message ] = useState ( "Hola desde el padre" ) ; return ( < div > < Child message = { message } /> </ div > ) ; } function Child ( { message } ...
Leer m谩s