Aprende React JS Desde Cero

Aprender a desarrollar aplicaciones con React JS puede parecer abrumador al principio, pero estamos aquí para acompañarte en cada paso. Si eres una persona que viene de otros entornos de desarrollo o si estás dando tus primeros pasos en la programación frontend, esta guía te ayudará a entender desde cero cómo funciona React, para que puedas construir aplicaciones modernas, rápidas y escalables.

En los últimos años, React se ha consolidado como una de las librerías más utilizadas para crear interfaces de usuario. ¿Por qué? Porque es eficiente, flexible y permite desarrollar proyectos con una lógica clara y componentes reutilizables. En otras palabras, facilita la vida de los desarrolladores y mejora la experiencia del usuario final.

Nuestro objetivo con este artículo es que tú también puedas dominar esta herramienta. Te explicaremos desde qué es React, cómo se instala, cuáles son sus piezas clave, y cómo puedes empezar a desarrollar con confianza. Todo el contenido está organizado de forma progresiva y práctica, para que puedas ir aprendiendo sin quedarte atrás.

Así que si alguna vez te has preguntado "¿por dónde empiezo para aprender React?", este es el lugar correcto. A lo largo de esta guía, conocerás los conceptos fundamentales, entenderás cómo piensa React y practicarás con ejemplos que te prepararán para crear tus propias aplicaciones.

FOTOOOOOOOOOOOOOOOOOO

¿Qué es React JS?

React JS es una librería de JavaScript centrada en la construcción de interfaces de usuario. Fue diseñada con el objetivo de facilitar el desarrollo de aplicaciones web modernas, que requieren ser dinámicas, rápidas y con una excelente experiencia de usuario. En lugar de manipular directamente el DOM del navegador, React trabaja con un Virtual DOM, lo que permite actualizaciones más eficientes y precisas.

Una de las grandes ventajas de React es que está basada en una arquitectura de componentes reutilizables, lo que permite dividir una interfaz compleja en partes más pequeñas, independientes y reutilizables. Esta filosofía hace que el código sea más mantenible, escalable y legible.

A diferencia de otros enfoques más tradicionales, React introduce un paradigma declarativo, lo que significa que no decimos cómo hacer las cosas paso a paso, sino qué queremos que ocurra. Esto lo convierte en una excelente opción para proyectos de todos los tamaños.

Principales características de React

• Virtual DOM: Permite actualizaciones rápidas y eficientes de la interfaz sin recargar toda la página.
• Componentes reutilizables: Cada parte de la interfaz puede construirse como una unidad independiente.
• JSX (JavaScript XML): Una extensión de JavaScript que permite escribir código HTML dentro de JavaScript.
• Unidireccionalidad de datos: El flujo de datos va en una única dirección, lo que facilita el seguimiento de cambios y la depuración.
• Compatible con otras librerías: React puede integrarse fácilmente con otras herramientas del ecosistema frontend.
• Actualizaciones rápidas: El desarrollo es más ágil gracias al sistema de hot reload y herramientas como Create React App.
• Comunidad sólida: Cuenta con una comunidad global activa, documentación oficial muy completa y múltiples recursos de aprendizaje.

Configuración del entorno de desarrollo

Antes de comenzar a programar en React, es imprescindible preparar un entorno de desarrollo adecuado. Este paso nos permitirá trabajar de forma organizada, eficiente y sin errores inesperados. Aquí te mostraremos cómo configurar tu equipo para empezar desde cero con React JS.

La ventaja de React es que su entorno base es bastante accesible, pero es fundamental que sigamos ciertos pasos con precisión. Nos apoyaremos en herramientas modernas que facilitan el proceso de desarrollo y evitan configuraciones manuales complejas.

Instalación de Node.js y npm

React no se ejecuta por sí solo en el navegador; requiere de una serie de herramientas que nos ayuden a compilar, empaquetar y ejecutar el código. La principal de estas herramientas es Node.js, que viene acompañada por npm (Node Package Manager), el gestor de paquetes que nos permitirá instalar dependencias y librerías adicionales.

Para instalarlo correctamente:

1. Dirígete al sitio oficial de Node.js y descarga la versión recomendada para usuarios (LTS).
2. Ejecuta el instalador y sigue los pasos indicados.
3. Una vez instalado, abre la terminal y comprueba que todo está correcto con los comandos:

1node -v
2npm -v

Ambos comandos deberían mostrarte los números de versión instalados. Si todo va bien, ya tienes tu entorno base preparado para trabajar con React.

Creación de un nuevo proyecto con Create React App

La forma más rápida y profesional de comenzar con React es utilizando Create React App, una herramienta oficical que nos crea una estructura de proyecto lista para trabajar sin necesidad de configurar Webpack, Babel y otras dependencias complejas.

Para crear tu primer proyecto:

1npx create-react-app mi-primera-app

Este comando descargará y configurará todo lo necesario. A continuación:

1cd mi-primera-app
2npm start

Al ejecutar npm start, se abrirá automáticamente una pestaña en tu navegador con la aplicación en funcionamiento. A partir de ese punto, cualquier cambio que hagas en el código se verá reflejado de inmediato, gracias al sistema de auto-recarga en caliente.

Estructura de archivos en una aplicación React

Una vez generado el proyecto, encontrarás una estructura de carpetas con varios archivos. Conocer esta estructura es clave para poder moverte con soltura en tus futuros desarrollos.

La estructura básica será algo así:

1mi-primera-app/
2├── node_modules/
3├── public/
4│   └── index.html
5├── src/
6│   ├── App.css
7│   ├── App.js
8│   ├── App.test.js
9│   ├── index.css
10│   ├── index.js
11│   └── logo.svg
12├── package.json
13├── README.md

Explicamos brevemente los elementos principales:

• public/index.html: El único archivo HTML real en la app. Aquí se monta todo lo que React renderiza.
• src/: Contiene el código fuente de React. Aquí escribiremos nuestros componentes, estilos y lógica.
• App.js: Es el componente raíz del proyecto. Todo parte desde aquí.
• index.js: Es el punto de entrada que conecta React con el index.html.
• package.json: Incluye información sobre el proyecto y sus dependencias.

Esta estructura modular y bien organizada permite trabajar en proyectos pequeños y escalar sin complicaciones hacia aplicaciones mucho más grandes y complejas.

Fundamentos de React

Una vez que tenemos nuestro entorno configurado, es momento de adentrarnos en el núcleo de React. Para construir aplicaciones robustas y eficientes, debemos entender bien sus conceptos fundamentales. React se basa en ideas como los componentes, el uso de JSX, el manejo de estado y props, y el control del ciclo de vida de cada elemento de la interfaz.

En esta sección aprenderemos cómo organizar nuestras aplicaciones desde la lógica de React, dominando la creación de componentes funcionales, la transmisión de datos entre ellos y cómo gestionar los cambios que ocurren durante el ciclo de vida de una aplicación.

Componentes y JSX

Los componentes son el corazón de React. Todo lo que vemos en una interfaz construida con esta librería está compuesto por componentes, ya sean grandes o pequeños. Podemos pensar en ellos como bloques de construcción: desde un botón hasta una página completa.

Hay dos tipos principales de componentes:

• Componentes de función (los más utilizados actualmente).
• Componentes de clase (cada vez menos comunes desde la aparición de los Hooks).

Un ejemplo simple de componente funcional sería:

1function Bienvenida() {
2  return <h1>¡Hola, React!</h1>;
3}

Este fragmento de código incluye algo que parece HTML, pero no lo es. Se llama JSX (JavaScript XML) y es una extensión de JavaScript que nos permite describir la estructura visual del componente de forma clara y expresiva.

Usar JSX es opcional, pero es altamente recomendable. Nos permite combinar lógica y presentación de manera fluida, reduciendo errores y mejorando la legibilidad del código.

Props y estado (state)

En React, la comunicación entre componenetes se realiza a través de las props (abreviatura de propiedades). Estos son datos que un componente padre le para a un componente hijo para que este actúe en consecuencia. Las props son inmutables, es decir, no deben modificarse dentro del componenete hijo.

Ejemplo simple de uso de props:

1function Saludo(props) {
2  return <h2>Hola, {props.nombre}</h2>;
3}

Por otro lado, el estado (state) representa los datos internos de un componente. A diferencia de las props, el estado sí puede cambiar durante la vida útil del componente. Para trabajar con estado en componentes funcionales, usamos el hook useState:

1const [contador, setContador] = useState(0);

Cada vez que cambiamos el valor del estado con setContador, el componente se renderiza de nuevo, reflejando el cambio en la interfaz.

Ciclo de vida de los componentes

El ciclo de vida es el conjunto de fases por las que pasa un componente desde que se crea hasta que se elimina. Estas fases nos permiten ejecutar acciones en momentos clave del componente.

Las fases principales son:

1. Montaje: El componente se crea y se añade al DOM. 2. Actualización: El componente cambia porque se modificaron sus props o su estado.ç 3. Desmontaje: El componente se elimina del DOM.

En los componentes de clase, se usaban métodos como componentDidMount o componentWillUnmount. Pero hoy en día, con componentes funcionales, estas fases se controlan mediante el hook useEffect.

Ejemplo práctico:

1useEffect(() => {
2  console.log("Componente montado");
3
4  return () => {
5    console.log("Componente desmontado");
6  };
7}, []);

En este caso:

• El código se ejecuta una vez al montar el componente.
• El return dentro de useEffect se ejecuta cuando el componente se desmonta.

Con estos conceptos claros - componentes, JSX, props, estado y ciclo de vida- ya tenemos una base sólida para empezar a construir aplicaciones reales con React. En el siguiente bloque, profundizaremos en los Hooks, la herramienta moderna que potencia aún más el desarrollo con componentes funcionales.

Hooks en React

Con la evolución de React, se introdujo una funcionalidad que revolucionó la forma en que escribimos componentes: los Hooks. Antes de su llegada, muchas de las características avanzadas solo podían usarse en componentes de clase. Hoy, gracias a los Hooks, podemos escribir componentes funcionales que son más concisos, legibles y potentes.

Los Hooks permiten a los desarrolladores manejar el estado, los efectos secundarios, las referencias, el contexto y muchas otras necesidades sin escribir una sola clase. Son funciones especiales que siguen reglas específicas, y conocerlas bien es imprescindible para dominar React moderno.

Introducción a los Hooks

Un Hook es una función que comienza con la palabra use y que React expone para permitir el acceso a características del ciclo de vida y otras funcionalidades desde los componentes funcionales.

Algunas reglas clave que debemos respetar:

• Los Hooks solo pueden usarse dentro de componentes funcionales o de otros Hooks personalizados.
• Siempre deben estar en el nivel superior del componente, nunca dentro de condicionales, bucles o funciones anidadas.
• No deben llamarse de forma dinámica.

Los más utilizados y que veremos aquí son:

• useState para manejar el estado local.
• useEffect para efectos secundarios como llamadas a APIs, suscripciones o actualizaciones del DOM.

Hay muchos otros como useContext, useRef, useReducer, useMemo, pero es mejor empezar por los más esenciales.

Aprender a usar los Hooks correctamente marca la diferencia entre un código React básico y uno profesional.

useState: Manejo del estado en componentes funcionales

El Hook useState es el más utilizado. Nos permite declarar y actualizar valores dentro de nuestros componentes sin necesidad de usar clases.

Ejemplo básico:

1import { useState } from 'react';
2
3function Contador() {
4  const [contador, setContador] = useState(0);
5
6  return (
7    <div>
8      <p>Contador: {contador}</p>
9      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
10    </div>
11  );
12}

En este ejemplo:

• contador es la variable de estado actual.
• setContador es la función que usamos para actualizar ese valor.
• useState(0) indica que el valor inicial será 0.

Cada vez que llamamos a setContador, React vuelve a renderizar el componente con el nuevo valor. Esto es lo que permite que la interfaz reaccione automáticamente a los cambios en los datos.

useEffect: Efectos secundarios en componentes

El Hook useEffect nos permite ejecutar efectos secundarios en nuestros componentes, es decir, operaciones que no forman parte del renderizado puro, como:

• Llamadas a APIs externas.
• Subscripciones a eventos.
• Modificaciones del DOM.
• Limpiezas antes de desmontar el componente.

Ejemplo simple:

1import { useEffect, useState } from 'react';
2
3function Reloj() {
4  const [hora, setHora] = useState(new Date());
5
6  useEffect(() => {
7    const intervalo = setInterval(() => {
8      setHora(new Date());
9    }, 1000);
10
11    // Limpieza del intervalo al desmontar el componente
12    return () => clearInterval(intervalo);
13  }, []);
14
15  return <p>Hora actual: {hora.toLocaleTimeString()}</p>;
16}

En este caso:

• El efecto se ejecuta una vez, al montar el componente, gracias al array vacío [] como segundo argumento.
• Se establece un intervalo que actualiza la hora cada segundo.
• En el return se incluye la función de limpieza para evitar fugas de memoria cuando el componente se desmonte.
• Con useState y useEffect ya podemos manejar datos dinámicos y responder a aventos externos dentro de nuestros componentes. Estos dos Hooks son la base del desarrollo moderno en React, y dominarlos nos permite empezar a construir aplicaciones funcionales y reactivas de inmediato.

Manejo de eventos en React

Uno de los pilares de cualquier aplicación interactiva es la capacidad de responder a acciones del usuario: clics, escritura en formularios, desplazamientos, envío de datos, etc. React nos ofrece un sistema muy intuitivo para gestionar estos eventos de forma clara, segura y compatible con todo tipo de navegadores modernos.

A diferencia del modelo tradicional de JavaScript, donde se usan funciones como addEventListener, React utiliza una sintaxis declarativa basada en atributos similares a HTML, pero escritos en camelCase. Esto significa que los eventos como onclick o onchange se transforman en onClick y onChange dentro del mundo de React.

Ejemplo básico de manejo de eventos

1function Boton() {
2  const manejarClick = () => {
3    alert("¡Has hecho clic!");
4  };
5
6  return <button onClick={manejarClick}>Haz clic aquí</button>;
7}

En este ejemplo:

• Se declara una función manejarClick que se ejecuta cuando el botón recibe un clic.
• El atributo onClick se encarga de vincular el evento con la función.
• Todo sucede de manera limpia, sin necesidad de acceder directamente al DOM.

Eventos más comunes en React

A continuación, presentamos algunos de los eventos más utilizados en desarrollo con React:

• onClick: para clics en botones, enlaces u otro elementos.
• onChange: para detectar cambios en inputs, selectores y áreas de texto.
• onSubmit: pra gestionar el envío de formularios.
• onMouseEnter y onMouseLeave: para interacciones con el cursor.
• onKeyDown y onKeyUp: para capturar pulsaciones de teclas.

Todos estos eventos nos permiten construir interfaces dinámicas, accesibles y orientadas al usuario.

Paso de argumentos a eventos

En muchas ocasiones, necesitaremos que la función manejadora reciba datos personalizados. En esos casos, usamos funciones flecha:

1function ListaDeTareas({ tareas }) {
2  const eliminarTarea = (id) => {
3    console.log(`Eliminar tarea con ID: ${id}`);
4  };
5
6  return (
7    <ul>
8      {tareas.map((tarea) => (
9        <li key={tarea.id}>
10          {tarea.texto}
11          <button onClick={() => eliminarTarea(tarea.id)}>Eliminar</button>
12        </li>
13      ))}
14    </ul>
15  );
16}

Gracias a esta técnica, podemos pasar parámetros sin que la función se ejecute al renderizar el componente.

Precvención del comportamiento por defecto

En eventos como formularios, es habitual querer evitar que la página se recargue. Para ello usamos el método preventDefault():

1function Formulario() {
2  const manejarEnvio = (e) => {
3    e.preventDefault();
4    console.log("Formulario enviado");
5  };
6
7  return (
8    <form onSubmit={manejarEnvio}>
9      <input type="text" placeholder="Tu nombre" />
10      <button type="submit">Enviar</button>
11    </form>
12  );
13}

Este enfoque nos da el control total sobre el comportamiento de la aplicación sin depender del navegador.

En resumen, React nos proporciona un sistema de eventos consistente, expresivo y muy similar al HTML tradicional, pero con todas las ventajas del desarrollo moderno. Al aprender a manejar eventos con soltura, podemos responder a cualquier interacción del usuario y construir experiencias interactivas de alto nivel.

Beneficios de usar React.JS

React JS ofrece numerosas ventajas que lo convierten en una opción preferida para el desarrollo de aplicaciones web modernas. Uno de los principales beneficios es su rendimiento óptimo. Gracias al uso del Virtual DOM, React minimiza las operaciones costosas en el DOM real, lo que se traduce en una carga y actualización de la interfaz de usuario más rápidas.

Otra ventaja significativa de React es su modularidad. Al permitir a los desarrolladores crear componentes independientes que pueden reutilizarse en toda la aplicación, React facilita el mantenimiento y la escalabilidad de los proyectos. Esto no solo ahorra tiempo y recursos, sino que también mejora la coherencia del código y reduce la probabilidad de errores.

React también es altamente versátil, ya que puede ser utilizado tanto en el desarrollo de aplicaciones web como móviles (a través de React Native), lo que permite a los desarrolladores mantener una base de código uniforme para múltiples plataformas. Además, React se integra bien con otras bibliotecas y frameworks, lo que proporciona flexibilidad para adoptar las mejores prácticas y herramientas adicionales según sea necesario.

ReactJS VS Otros Frameworks

Comparado con otros frameworks populares como Angular y Vue, React tiene varias características distintivas. A diferencia de Angular, que es un framework completo, React es una biblioteca específicamente centrada en la vista, lo que le otorga una curva de aprendizaje más suave y una mayor flexibilidad para integrarse con diferentes arquitecturas sin imponer restricciones en la estructura del proyecto.

En comparación con Vue, que también utiliza un enfoque basado en componentes, React tiene una comunidad más grande y un ecosistema más desarrollado, lo que se traduce en una mayor disponibilidad de recursos de aprendizaje, librerías y herramientas de desarrollo. Vue, por otro lado, es a menudo elogiado por su simplicidad y menor tamaño de sintaxis, lo que puede ser beneficioso para proyectos más pequeños o para equipos con menos experiencia en JavaScript.

¿Cómo crear un proyecto React? Tutorial desde cero

Paso 1. Descargar Node.js

Para facilitar la creación de un proyecto, su estructura de carpetas, hacer uso de librerías externas y el despliegue local de la aplicación usaremos npm. Para hacer uso de ello tenemos que tener descargado e instalado Node.js en nuestro equipo.

Puedes descargarlo en la web oficial de Node.

Si quieres profundizar más en este lenguaje tienes a tu disposición nuestro curso online de Node.js

Paso 2. Instalar create-react-app

Gracias a create-react-app podremos, con un simple comando, crear nuestra primera aplicación con React JS. Para instalar este paquete, usaremos npm y lo instalaremos de forma global usando el parametro -g.

Deberás abrir la consola de comandos (cmd en Windows, Terminal en Mac) y escribir lo siguiente:

1npm install -g create-react-app

Este paso suele ser algo largo, pero sabremos identificar cuando ha terminado de instalar con facilidad.

Paso 3. Crear proyecto React con create-react-app

Con la consola de comandos y haciendo uso del comando cd nos colocaremos en la carpeta donde queremos que se almacene nuestro proyecto de React JS. Por ejemplo, vamos a crearlo dentro de la carpeta react que se encontrará en el Escritorio: cd C:\Users\nombreUsuario\Desktop\react. Donde nombreusuario es el nombre tu usuario y react la carpeta que debes haber creado previamente en el escritorio.

Una vez que ya estamos colocados en la carpeta que queremos, simplemente usaremos create-react-app para crear el proyecto, que llamaremos, por ejemplo, prueba-react.

1create-react-app prueba-react

La creación puede que lleve un rato, pero sabremos que ha acabado cuando salga un mensaje de éxito y nos indique que el proyecto ya está disponible en el directorio donde nos situábamos. También nos indicará los siguientes dos pasos a seguir si queremos desplegarlo en local (se explicará más adelante en este tutorial)

Cuando haya terminado de ejecutar, podremos entrar en la carpeta react y apreciar que se ha creado una nueva carpeta llamada prueba-react. Dentro encontraremos el proyecto distribuido en una serie de carpetas y ficheros.

Descubre la formación a tu medida

Rellena el formulario para obtener más información sobre los cursos.

Nombre *

Apellido *

Email corporativo *

Tamaño de la empresa *

Tamaño de la empresa *

Número de teléfono *

Términos y condiciones *

Acepto los términos y condiciones

Solicitar información

Paso 4. Comprender la Estructura del Proyecto creado

Es importante conocer la estructura del proyecto, dado que será la base de nuestra aplicación. Por defecto, create-react-app crea la siguiente estructura:

Vamos a analizar el contenido de los distintos elementos generados:

• Carpeta node_modules

Aquí se guardan todas las dependencias ppm del proyecto que vayamos necesitando. Create-react-app ya nos habrá instalado unas cuantas por defecto.

• Carpeta public

Esta es la raíz del proyecto y aquí estará el archivo principal: index.html y el favicon: icono que aparecerá en la pestaña del navegador cuando despleguemos la aplicación. Habrá una etiqueta 

 dentro de index.html con un id "root" que nos indica dónde se va a introducir el componente principal (App.js) de nuestra aplicación.

• Carpeta src

En esta carpeta, es donde están los componentes y sus estilos, a parte de otros ficheros js que necesitemos. Por defecto, el componente principal de todo proyecto React JS se llama App.js. También habrá un index.js que se encarga de introducir el componente App en el

de index.html que hemos mencionado en el punto anterior.

Encontramos a la misma altura, las hojas de estilo: App.css e index.css; una imagen (svg) del logo de React JS; un archivo para realizar tests sobre el componente App y un archivo javascript llamado registerServiceWorker.js.

• Archivo readme.md

Se trata de un fichero de informacion sobre el proyecto.

• Archivo package.json

Aquí encontramos las dependencias de npm que hayamos instalado en el proyecto, tanto para desarrollo como para producción.

• Archivo .gitignore

Documento donde se definen aquellos archivos a ignorar en git.

Paso 5. Desplegar el proyecto y visualizarlo en el navegador

El proyecto a estas alturas es perfectamente desplegable. Obviamente, es el proyecto por defecto que nos ha ofrecido create-react-app.

Para poder desplegar el proyecto en nuestro entorno local (localhost) usaremos un comando npm que nos abrirá el navegador que tengamos predeterminado y en una pestaña nueva nos mostrara la interfaz de usuario definida. Tenemos que estar en la carpeta del proyecto, por lo que haremos cd para entrar en pruebaReact y desde ahí podremos hacer:

1npm start

Una vez ejecutado, nos debe salir un mensaje de éxito como el siguiente:

y si entramos en http:// localhost:3000/ podremos ver lo siguiente:

Creación de un Componente y Hola Mundo

Como hemos comentado mas arriba, la base de React JS son los componentes. Es por ello que es imprescindible comprender como crear uno y como renderizarlo en nuestro proyecto.

Cuando desarrollamos componentes de React JS, debemos tratar de individualizarlos lo máximo posible para que podamos usarlos en otros proyectos, ya sean existentes o nuevos.

En esta ocasión vamos a crear un componente llamado (Saludo.js) - en React, los componentes deben comenzar con mayúscula - que renderizará el famoso mensaje de Hola Mundo.

Crearemos Saludo.js a la misma altura de carpetas que App.js para simplificar, dejaremos el header con el logo de React y únicamente cambiaremos el cuerpo de App.js añadiendo una etiqueta  que será nuestro nuevo componente.

• Saludo.js

Haciendo uso de ES6, definiremos Saludo.js como una clase que va a heredar todo aquello que tiene un componente React (Component).

El método render de la clase Saludo, básicamente devuelve un JSX con un título cuyo contenido es Hola Mundo. También tenemos definido un constructor donde se define el estado del componente y donde podremos acceder y definir las propiedades y comportamiento del componente.

Para poder hacer uso de este componente en App.js y renderizarlo, debemos exportarlo (export default) con un nombre. En este caso Saludo.

1import React, { Component } from 'react';
2 
3class Saludo extends Component {
4  render() {
5    return (
6      <h1>
7        Hola Mundo!
8      </h1>
9    );
10  }
11}
12 
13export default Saludo;

• App.js

El componente principal de todo proyecto que use React JS es App.js y es el encargado de contener todos los componentes necesarios para la aplicación, ya sean propios o externos. En nuestro caso, App.js sera el encargado de renderizar un componente Saludo para que así podamos ver por pantalla "Hola Mundo".

Para poder hacer uso de la etiqueta debemos importarlo al comienzo del fichero. Debes editar el archivo para que quede de la siguiente manera:

1import React, { Component } from 'react';
2import Saludo from './Saludo'
3import logo from './logo.svg';
4import './App.css';
5 
6class App extends Component {
7  render() {
8    return (
9      <div className="App">
10        <header className="App-header">
11          <img src={logo} className="App-logo" alt="logo" />
12          <h1 className="App-title">Welcome to React</h1>
13        </header>
14        <Saludo />
15      </div>
16    );
17  }
18}
19 
20export default App;

• index.js

En este archivo se define cómo incrustar nuestro componente principal (App), que contendrá en su interior el componente Saludo que hemos creado un poco mas arriba. Haciendo uso de la clase ReactDOM, podremos renderizar App en nuestro unico fichero html: index.html.

Concretamente renderizará App en el elemento HTML que contenga el id "root".

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import registerServiceWorker from './registerServiceWorker';
6 
7ReactDOM.render(<App />, document.getElementById('root'));
8registerServiceWorker();

• index.html

Este es el HTML de nuestro proyecto que contendrá el componente App y éste a su vez, contendrá el nuevo componente Saludo. Puedes apreciar el elemento donde se va a introducir, ya que dispone del id root.

¡Felicidades! Has conseguido crear tu primera aplicación de React

Como habrás podido apreciar, los cambios que vayas haciendo en cualquiera de los archivos o carpetas, se ven rápidamente reflejados en el navegador sin la necesidad de re-desplegar manualmente. Una vez hemos realizado nuestro componente Saludo y lo hemos introducido en el componente App.

¡Ya tienes un Hola Mundo creado usando componentes de React JS!

Aprender React con el Mejor Curso

En este tutorial, has aprendido los fundamentos y cómo usar React JS y has dado tus primeros pasos en la creación de una aplicación con esta biblioteca. Has configurado tu entorno de desarrollo, creado componentes, utilizado JSX y renderizado tu aplicación. ¡Felicidades por llegar hasta aquí!

En nuestro curso de React JS, te sumergirás en los conceptos avanzados de React y aprenderás a construir aplicaciones web sofisticadas y de alto rendimiento. Desde el enrutamiento hasta el manejo del estado global, explorarás técnicas y mejores prácticas para llevar tus habilidades de desarrollo de React al siguiente nivel.

Recuerda que seguir practicando y construyendo proyectos reales te ayudará a consolidar tus conocimientos y crecer como desarrollador de React. ¡Sigue explorando las posibilidades infinitas de React JS y disfruta de la experiencia de construir aplicaciones web increíbles!