Aprende React JS en solo 10 minutos: Tutorial para Principiantes desde Cero

React es una de las bibliotecas de JavaScript más populares para la creación de interfaces de usuario interactivas. En este tutorial, aprenderemos los conceptos básicos de React en 10 minutos, desde cero, para principiantes.

Paso 1: Configuración del entorno

Lo primero que debemos hacer es configurar nuestro entorno de desarrollo. Para esto, necesitaremos tener Node.js instalado en nuestro sistema. Puedes descargar Node.js desde su sitio web oficial.

Una vez instalado Node.js, podemos instalar Create React App, una herramienta que nos permitirá crear fácilmente una aplicación de React. Para instalar Create React App, abrimos una terminal y corremos el siguiente comando:

npx create-react-app my-app

Esto creará una nueva aplicación de React en una carpeta llamada my-app. Para entrar a la carpeta de nuestra aplicación, podemos correr el siguiente comando:

cd my-app

Finalmente, para correr nuestra aplicación de React, utilizamos el comando:

npm start

Esto iniciará un servidor local que nos mostrará nuestra aplicación en un navegador.

Paso 2: Crear un componente

En React, todo se construye a través de componentes. Un componente es una pieza de la interfaz de usuario que puede contener HTML, CSS y JavaScript. Para crear un componente en React, lo hacemos a través de una función o una clase.

Por ejemplo, podemos crear un componente funcional de la siguiente manera:

function Saludo() {
  return <h1>Hola, mundo!</h1>;
}

Este componente simplemente renderiza un elemento <h1> con el texto "Hola, mundo!". Para usar este componente en nuestra aplicación, simplemente lo importamos y lo renderizamos en nuestro componente principal.

import React from 'react';

function App() {
  return <Saludo />;
}

export default App;

Paso 3: Props

Los props son atributos que podemos pasar a un componente para configurar su comportamiento. Por ejemplo, si queremos hacer que nuestro componente Saludo acepte un nombre como prop, podemos hacerlo de la siguiente manera:

function Saludo(props) {
  return <h1>Hola, {props.nombre}!</h1>;
}

Para pasar el nombre a nuestro componente Saludo, simplemente lo incluimos como un atributo al renderizar el componente en nuestro componente principal.

<Saludo nombre="Juan" />

Paso 4: State

El state es un objeto que contiene datos que pueden cambiar a lo largo del tiempo. Para agregar state a un componente, utilizamos la función useState de React. Por ejemplo, podemos crear un componente que cuente la cantidad de veces que se hace click en un botón.

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

En este ejemplo, usamos useState para inicializar nuestro state contador en 0. Luego, renderizamos el valor del contador y un botón que incrementa el contador en 1 cada vez que se hace click.

Paso 5: Componentes con estado y efectos

Para trabajar con componentes que tengan estado y efectos secundarios, utilizamos las funciones useState y useEffect de React. Por ejemplo, podemos crear un componente que haga una llamada a una API y muestre los resultados.

import React, { useState, useEffect } from 'react';

function ListaUsuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsuarios(data));
  }, []);

  return (
    <ul>
      {usuarios.map(usuario => (
        <li key={usuario.id}>{usuario.name}</li>
      ))}
    </ul>
  );
}

En este ejemplo, usamos useState para inicializar nuestro estado usuarios como un array vacío. Luego, usamos useEffect para hacer una llamada a la API de JSONPlaceholder y actualizar el estado usuarios con los resultados.

Conclusión

En este tutorial, hemos aprendido los conceptos básicos de React en 10 minutos, desde cero, para principiantes. Hemos visto cómo configurar nuestro entorno de desarrollo, crear componentes, trabajar con props, state, y efectos, y crear componentes que hagan llamadas a una API. ¡Espero que este tutorial te haya sido útil y que te haya ayudado a comenzar con React! ¡Buena suerte en tu camino de aprendizaje!