Tutorial de ReactJS para principiantes

¿Qué es ReactJS?

Reaccionar es una interfaz de código abierto JavaBiblioteca de scripts para construir interfaces de usuario. Reaccionar Meta (antes Facebook) y una comunidad de desarrolladores y empresas mantienen esta plataforma. Se utiliza ampliamente como base para crear aplicaciones de una sola página y aplicaciones móviles. Es muy fácil de usar y permite crear componentes de interfaz de usuario reutilizables.

Antes de escribir tu primera línea de código React, es útil saber qué hace que la biblioteca sea diferente de las bibliotecas simples. JavaGuion. La siguiente sección describe sus características principales.

Características de ReactJS

JSX: JSX es una extensión de JavaScript. Si bien no es obligatorio usar JSX en React, es una de las buenas características y es fácil de usar.

Componentes: Los componentes son como puros JavaLas funciones de script facilitan la escritura del código al dividir la lógica en código independiente y reutilizable. Podemos usar componentes como funciones y como clases. Los componentes también tienen estado y props, lo que simplifica su uso. Dentro de un componente de clase, se gestionan el estado y las props.

DOM virtuales: React crea un DOM virtual, es decir, una caché de estructura de datos en memoria. Solo los cambios finales se actualizan posteriormente en el DOM del navegador, lo que mantiene una renderización rápida.

JavaExpresiones de script: Las expresiones JS se pueden usar en los archivos JSX usando llaves, por ejemplo {}.

Ventajas de ReactJS

Estas son las principales ventajas y beneficios de usar ReactJS:

• ReactJS utiliza un DOM virtual que aprovecha una caché de estructura de datos en memoria, y solo los cambios finales se actualizan en el DOM del navegador. Esto acelera la aplicación.
• Puedes crear los componentes que desees utilizando la función de componentes de React. Estos componentes se pueden reutilizar y también facilitan el mantenimiento del código.
• ReactJS es un framework de código abierto. JavaBiblioteca de scripts, por lo que es fácil empezar a usarla.
• ReactJS se hizo muy popular en poco tiempo y potencia productos como Facebook y InstagramEs utilizado por muchas compañías famosas como Apple, Netflix, etc.
• Meta se encarga del mantenimiento de la biblioteca ReactJS, por lo que está bien mantenida y actualizada.
• ReactJS se puede utilizar para desarrollar una interfaz de usuario enriquecida para aplicaciones móviles y de escritorio.
• Fácil de depurar y probar ya que la mayor parte de la codificación se realiza en JavaScript en lugar de en HTML.

Desventajas de ReactJS

Estas son las desventajas/inconvenientes de usar ReactJS:

• La mayor parte del código está escrito en JSX, es decir, HTML y CSS forman parte del mismo. JavaScript. Puede ser bastante confuso, ya que la mayoría de los demás frameworks prefieren mantenerping HTML separado de la JavaCódigo de script.
• El tamaño de archivo de ReactJS es relativamente grande.

Ahora que conoces las ventajas y desventajas, estás listo para configurar React. La forma más rápida de probarlo es directamente desde una CDN, que veremos primero; las configuraciones basadas en npm para proyectos reales se explicarán más adelante.

Usando ReactJS desde CDN

Para empezar a trabajar con React, primero necesitamos añadir ReactJS a nuestra página. Puedes empezar a usar ReactJS fácilmente con la CDN. JavaArchivos de script, como se muestra a continuación.

Vaya al sitio de documentación de React anterior para obtener los enlaces de CDN, es decir, https://legacy.reactjs.org/docs/cdn-links.htmly obtendrás los archivos necesarios que se explican en la siguiente imagen.

Para desarrolladores

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

para pinchar

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Reemplace versión con la versión de React que desees tanto para react.development.js como para react-dom.development.js. En esta página usamos la versión 16, por lo que los ejemplos a continuación se ejecutan sin cambios.

En caso de que planee utilizar los archivos CDN, asegúrese de mantener el atributo crossorigin para evitar problemas de dominio cruzado. El código ReactJS no se puede ejecutar directamente en el navegador y necesita ser transpilado usando Babel a código plano. JavaScript antes de ejecutarse en el navegador.

Aquí está el script BabelJS que se puede utilizar:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Aquí tenéis un ejemplo funcional de ReactJS utilizando archivos CDN y el script BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Salida:

En el próximo capítulo analizaremos los detalles del código; veamos cómo funciona con archivos CDN. No es recomendable usar el script de Babel directamente, y quienes se inicien en ReactJS solo deberían usarlo para aprender la plataforma. En producción, tendrás que instalar React usando el paquete npm.

Usando paquetes NPM

Asegúrese de tener Node.js instalado. Si no está instalado, siga este tutorial para Node.js (https://www.guru99.com/node-js-tutorial.html) instalación.

Una vez que tenga Node.js instalado, cree una carpeta reaccionarproj/.

Para comenzar con la configuración del proyecto, ejecute el comando npm init.

Así es como se verá la estructura de carpetas:

reactproj\
package.json

Ahora instalaremos los paquetes que necesitamos.

Aquí está la lista de paquetes para ReactJS. Fijamos React a la versión 16 para que el ReactDOM.render Los ejemplos de esta página funcionan exactamente como se muestra:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Abra el símbolo del sistema y ejecute los comandos anteriores dentro de la carpeta reactproj/.

Crea una carpeta src / donde irá todo el código JS. Todo el código para el proyecto ReactJS estará disponible en la carpeta src/. Crea un archivo index.js e importa react y react-dom, como se muestra a continuación.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Hemos escrito el código básico para ReactJS. Explicaremos los detalles en el próximo capítulo. Queremos mostrar Hola, desde GuruTutoriales de 99y lo mismo se le da al elemento DOM con id “root”. Se toma del archivo index.html, que es el archivo de inicio, como se muestra a continuación.

Crea una carpeta llamada public/ y añade dentro el archivo index.html como se muestra a continuación.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

El paquete react-scripts se encargará de compilar el código e iniciar el servidor para mostrar el archivo HTML, es decir, index.html. Debes agregar el comando en package.json que se encargará de usar react-scripts para compilar el código e iniciar el servidor, como se muestra a continuación:

 "scripts": {
    "start": "react-scripts start"
  }

Después de instalar todos los paquetes y agregar el comando anterior, el paquete.json final es el siguiente:

Paquete.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Para comenzar a probar ReactJS, ejecute el comando:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Se abrirá el navegador con el URL http://localhost:3000/ como se muestra a continuación:

public / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Vamos a utilizar el mismo proceso para ejecutar el JavaLos archivos de script también aparecerán en los próximos capítulos. Añade todos tus archivos .js y .jsx a la carpeta src/. La estructura de archivos será la siguiente:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Cómo crear la configuración de su primer proyecto React

En este tutorial de ReactJS encontrarás una guía paso a paso para comenzar con tu primera aplicación React.

Paso 1) Importe los paquetes de reacción.
1. Para comenzar con ReactJS, primero debemos importar los paquetes de reacción de la siguiente manera.

import React from 'react';
import ReactDOM from 'react-dom';

2. Guarda el archivo como index.js en la carpeta src/.

Paso 2) Escribe algo sencillo Code.
Escribiremos un código simple en este tutorial React JS, en el que mostraremos el mensaje “Hola, desde Guru¡99 tutoriales!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.renderizar agregará el Etiqueta al elemento con ID raíz. Este es el archivo HTML que tenemos:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Paso 3) Compila el Code.

A continuación, en este tutorial de React.js, debemos compilar el código para obtener el resultado en el navegador.

Aquí está la estructura de carpetas:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Hemos agregado los comandos para compilar el archivo final en package.json de la siguiente manera:

"scripts": {
    "start": "react-scripts start"
  },

Para compilar el archivo final, ejecute el siguiente comando:

npm run start

Cuando ejecute el comando anterior, compilará los archivos y le notificará si hay algún error. Si todo parece correcto, abrirá el navegador y ejecutará la página en http://localhost:3000/

Comando: npm ejecutar inicio:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Paso 4) Verifique la salida.
El URL http://localhost:3000 Se abrirá en el navegador una vez que se compile el código, como se muestra a continuación:

Cómo configurar React con Vite (Enfoque moderno)

La configuración de react-scripts anterior proviene de Create React App (CRA), que fue el estándar de inicio durante años. El equipo de React dejó de usar oficialmente Create React App en febrero de 2025, por lo que los nuevos proyectos deberían usar una herramienta de compilación moderna en su lugar. La opción más popular hoy en día es tornillo, que arranca más rápido y produce compilaciones más pequeñas.

Aquí te mostramos cómo crear un nuevo proyecto de React con Vite:

Paso 1) Ejecuta el comando de andamiaje en tu terminal:

npm create vite@latest my-react-app -- --template react

Paso 2) Acceda a la carpeta e instale las dependencias:

cd my-react-app
npm install

Paso 3) Inicie el servidor de desarrollo:

npm run dev

Vite sirve la aplicación en http://localhost:5173/ Por defecto, se recarga instantáneamente al guardar un archivo.

Principales diferencias con respecto a la configuración anterior de esta página:

• El archivo de entrada es src/main.jsx en lugar de src/index.js.
• Instala la última versión de React, que utiliza crearRaíz en lugar de ReactDOM.render.
• El archivo index.html se encuentra en la raíz del proyecto, no en public/.
• Las compilaciones se producen con npm run build en una carpeta dist/.

Para necesidades de pila completa como enrutamiento y renderizado del servidor, el equipo de React también recomienda frameworks como Next.jsTodo lo que aprendas en los capítulos siguientes (JSX, componentes, estado y propiedades) se aplica sin cambios en un proyecto de Vite o Next.js.

¿Qué es JSX?

JSX es una extensión de JavaScript. Es un script de plantilla donde tendrá el poder de usar HTML y JavaEscriban el guion juntos.

A continuación se muestra un ejemplo sencillo de un código JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

¿Por qué necesitamos JSX en React?

Para una interfaz de usuario, necesitamos HTML, y cada elemento del DOM tendrá eventos que gestionar, cambios de estado, etc.

En el caso de React, nos permite hacer uso de HTML y JavaEl script se encuentra en el mismo archivo y gestiona los cambios de estado en el DOM de manera eficiente.

Expresiones en JSX

A continuación se muestra un ejemplo sencillo de cómo utilizar expresiones en JSX.

En ejemplos anteriores de ReactJS, habíamos escrito algo como esto:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Ahora vamos a cambiar el código anterior para agregar expresiones. Las expresiones se usan dentro de llaves {} y se expanden durante el tiempo de ejecución. Las expresiones en React son lo mismo que JavaExpresiones de script.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Probemos ahora lo mismo en el navegador.

Como se puede observar en la captura de pantalla anterior, la expresión {display} no se reemplaza. React no sabe qué hacer cuando se utiliza una expresión dentro de un archivo .js.

Ahora agreguemos cambios y creemos un archivo .jsx, como se muestra a continuación:

prueba.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Hemos añadido el código necesario y utilizaremos el archivo test.jsx en index.js. Queremos que h1etiqueta variable que se utilizará dentro de index.js, por lo que se exporta la misma como se muestra arriba en test.jsx.

Aquí está el código modificado en index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Para usar test.jsx en index.js, primero debemos importarlo como se muestra a continuación:

import h1tag from './test.jsx';

Podemos usar h1tag ahora en ReactDOM.render como se muestra a continuación:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Aquí está el resultado cuando verificamos lo mismo en el navegador:

¿Qué son los componentes en ReactJS?

Los componentes son como puros JavaFunciones de script que facilitan la escritura del código al dividir la lógica en código independiente y reutilizable.

Componentes como funciones

prueba.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Hemos creado una función llamada Hola que devuelve una etiqueta h1, como se muestra arriba. El nombre de la función actúa como un elemento, como se muestra a continuación:

const Hello_comp = <Hello />;
export default Hello_comp;

El componente Hola se utiliza como una etiqueta HTML, es decir, , asignado al Hola_comp variable, y la misma se exporta usando export.

Ahora vamos a usar este componente en el archivo index.js como se muestra a continuación:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Aquí está el resultado en el navegador:

Clase como componente

Aquí hay un ejemplo de ReactJS que usa una clase como componente.

prueba.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Podemos usar el componente Hello en el archivo index.js de la siguiente manera:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

El componente Hello se utiliza como una etiqueta HTML, es decir, .

Aquí está el resultado del mismo.

Componentes de clase frente a componentes de función y hooks

Ahora que has visto ambas formas de escribir un componente, ¿cuál deberías usar? Esta página enseña sobre componentes de clase porque explicitan los conceptos de estado y ciclo de vida, lo cual es valioso para principiantes y aún se encuentra en bases de código antiguas. Sin embargo, desde que React 16.8 introdujo los Hooks, los componentes de función también pueden contener estado, y son el estilo recomendado para todo el código nuevo.

Aspecto	Componente de clase	Componente funcional con ganchos
Estado	this.state y this.setState()	gancho useState()
Ciclo de Vida	componenteDidMount, componenteDidUpdate, componenteWillUnmount	El hook useEffect() cubre los tres
Sintaxis	Más código estándar (constructor, enlace, esto)	Más corto, no esta palabra clave
Estado	Compatible, estilo heredado	Recomendado para código nuevo

Aquí está el ejemplo de estado de esta página reescrito con el hook useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Ambas versiones generan el mismo resultado. Aprende la sintaxis de clases que se utiliza en los capítulos siguientes y luego practica la conversión de cada ejemplo a Hooks.

¿Qué es un estado en ReactJS?

Un estado es un JavaObjeto de script, similar a las props, que contiene datos para ser utilizados con el renderizado de ReactJS. Los datos de estado son un objeto privado y se utilizan dentro de los componentes dentro de una clase.

Ejemplo de Estado

Aquí tienes un ejemplo práctico de cómo usar el estado dentro de una clase.

prueba.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Esto es lo que obtenemos cuando lo probamos en el navegador:

¿Qué son los accesorios en ReactJS?

Las props son propiedades que se utilizan dentro de un componente. Actúan como objetos o variables globales que se pueden usar dentro del componente.

Accesorios para el componente funcional

A continuación se muestra un ejemplo de cómo pasar accesorios a un componente de función.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Como se muestra arriba, hemos añadido el MSG atribuir a la componente. Se puede acceder al mismo como accesorios dentro de la función Hello, que es un objeto que tendrá el MSG detalles del atributo, y el mismo se utiliza como expresión.

El componente se utiliza en index.js de la siguiente manera:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Aquí está el resultado en el navegador:

Accesorios para el componente de clase

Para acceder a las propiedades de una clase, podemos hacerlo de la siguiente manera:

prueba.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

El MSG El atributo se pasa al componente en index.js de la siguiente manera:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Este es el resultado en el navegador:

También verifique: Tutorial de AngularJS para principiantes: aprenda AngularJS paso a paso

Ciclo de vida de un componente

Una vez explicados los componentes, el estado y las props, el siguiente paso es comprender cuándo React llama a los métodos de tu componente. El ciclo de vida de un componente se divide en las etapas de inicialización, montaje, actualización y desmontaje.

Aquí encontrará una explicación detallada de cada etapa.

Un componente en ReactJS tiene las siguientes etapas:

Inicialización: Esta es la primera etapa del ciclo de vida del componente.

Aquí tendrá los accesorios predeterminados y el estado en el nivel inicial.

MontajeEn esta fase, el componente se renderiza dentro del DOM. Tenemos acceso a los siguientes métodos en el estado de montaje:

• render(): Este método está disponible para todos los componentes creados. Devuelve el nodo HTML.
• componentDidMount(): Esta función se llama inmediatamente después de que el componente se agrega al DOM.

ActualizarEn este estado, el usuario interactúa con el DOM y este se actualiza. Por ejemplo, al introducir algo en el cuadro de texto, las propiedades del estado se actualizan.

A continuación se detallan los métodos disponibles en el estado de actualización:

• shouldComponentUpdate(): se llama antes de volver a renderizar; permite decidir si el componente debe actualizarse. Si devuelve true, el componente se vuelve a renderizar.
• componentDidUpdate(): se llama después de que se actualiza el componente.

Desmontaje: Este estado se produce cuando el componente ya no es necesario o se retira.

A continuación se describe el método disponible en el estado desmontado:

• componentWillUnmount(): se llama justo antes de que el componente sea eliminado o destruido.

Ejemplo práctico de métodos de ciclo de vida

Aquí se muestra un ejemplo práctico que ilustra los métodos que se llaman en cada etapa.

Ejemplo: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Cuando compruebes el resultado en el navegador:

En la consola del navegador aparece lo siguiente:

Cuando el usuario ingresa en el cuadro de texto:

En la consola se muestran los siguientes mensajes:

Ahora que ya sabes cuándo se renderiza y se actualiza un componente, apliquemos el estado y los eventos a un caso práctico: gestionar la entrada de datos del usuario a través de formularios.

Trabajar con formularios

En ReactJS, los elementos de entrada HTML como , , y <select /> tienen su propio estado y necesitan ser actualizados cuando el usuario interactúa, utilizando el método setState().

En este capítulo, veremos cómo trabajar con formularios en ReactJS.

Aquí hay un ejemplo de trabajo:

formulario.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Para los campos de entrada, necesitamos mantener el estado, por lo que React proporciona un método especial llamado establecerestado, que ayuda a mantener el estado siempre que haya un cambio. En una aplicación real, también se llama event.preventDefault() dentro de formSubmit para evitar que el navegador recargue la página al enviar el formulario.

Hemos utilizado los eventos onChange y onClick en el cuadro de texto y el botón de envío. Cuando el usuario escribe en el cuadro de texto, se llama al evento onChange y se actualiza el campo de nombre dentro del objeto de estado, como se muestra a continuación:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

La salida en el navegador es la siguiente:

Paso 1) Introduce tu nombre en el cuadro de texto:

Paso 2) Haz clic en el botón de enviar:

Trabajar con eventos en ReactJS

Los formularios son solo una fuente de interacción del usuario. Trabajar con eventos en ReactJS es igual que como lo habrías hecho en JavaScript. Puedes usar todos los controladores de eventos que se usan en JavaScript. El método setState() se utiliza para actualizar el estado cuando el usuario interactúa con cualquier elemento HTML.

Aquí tenéis un ejemplo práctico de cómo usar eventos en ReactJS.

eventos.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Para los campos de entrada, necesitamos mantener el estado, por lo que React proporciona la establecerestado método, que ayuda a mantener el estado cada vez que hay un cambio.

Hemos utilizado los eventos onChange y onClick en el cuadro de texto y el botón. Cuando el usuario escribe dentro del cuadro de texto, el onChange Se activa el evento y se actualiza el campo de nombre dentro del objeto de estado, como se muestra a continuación:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Aquí está el resultado en el navegador:

Cuando un usuario introduce el nombre:

Cuando el usuario hace clic en el botón Haga clic aquí:

Trabajar con CSS en línea en ReactJS

Una vez que tus componentes gestionan datos y eventos, el último paso es aplicarles estilos. Analizaremos un ejemplo práctico para comprender el CSS en línea en ReactJS.

agregarestilo.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

He añadido el estilo color: 'red' a la etiqueta h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

La salida en el navegador es la siguiente:

Puedes crear un objeto con el estilo que desees para el elemento y usar una expresión para agregarle ese estilo, como se muestra en el ejemplo anterior.

Trabajar con CSS externo en ReactJS

Vamos a crear un archivo CSS externo. Para ello, crea una carpeta llamada css/ y añade dentro el archivo style.css.

style.css

.h1tag {
color:red;
}

Agregue style.css a su archivo index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Ahora agreguemos la clase a la etiqueta h1 en el archivo .jsx.

agregarestilo.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Al atributo className se le proporcionan los detalles de la clase. Tenga en cuenta que JSX utiliza nombre de la clase en lugar del atributo de clase HTML, porque la clase es una palabra clave reservada en JavaGuion. Ahora vamos a probarlo en el navegador.

Esto es lo que se ve al inspeccionar la etiqueta h1 en el navegador:

Puedes ver que la clase="h1tag" se ha añadido correctamente a la etiqueta h1.

Por qué ReactDOM.render fue reemplazado por createRoot

Cada ejemplo de esta página monta la aplicación con ReactDOM.render, lo cual es correcto para React 16 y 17, las versiones a las que se dirige este curso. React 18, lanzado en marzo de 2022, reemplazó ese punto de entrada con la API createRoot, y React 19 eliminó ReactDOM.render por completo. La razón es la concurrencia: createRoot permite a React preparar varias versiones de la interfaz de usuario al mismo tiempo, interrumpir el renderizado de baja prioridad y mantener la aplicación en funcionamiento.ping y animaciones fluidas. Funciones como el procesamiento automático por lotes, useTransition y la transmisión basada en Suspense dependen de ello.

El equivalente moderno del archivo index.js utilizado en toda esta página tiene este aspecto:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Todo lo demás que aprendiste aquí (componentes, JSX, estado, props y eventos) funciona de la misma manera después de este cambio de una sola línea en el punto de entrada. Las diferencias de versión como esta aparecen a menudo en Preguntas de entrevista sobre React JSPor lo tanto, conviene comprender ambas API.

Preguntas Frecuentes

También verifique: Las 70 preguntas y respuestas principales de la entrevista de React (actualizado)