Qué es y cómo empezar con React

React es una biblioteca de JavaScript ampliamente utilizada para construir interfaces de usuario. Fue desarrollada por Facebook en 2013 y se ha convertido en una de las herramientas más populares para el desarrollo de aplicaciones web modernas.

Nos permite construir aplicaciones web de manera declarativa y basada en componentes. Esto significa que las interfaces de usuario se dividen en componentes independientes y reutilizables, cada uno de los cuales gestionan su propio estado y lógica.

React se encarga de actualizar y renderizar solo los componentes necesarios cuando cambia el estado de la aplicación. Es decir, de aplicar la reactividad (de ahí viene su nombre).

Instalación de React

Para empezar a utilizar React, primero necesitas instalar Nodejs y NPM (Node Package Manager) en tu ordenador. Si no sabes lo que son, o quieres aprender más, te dejo por aquí estos dos cursitos 👇.

Curso Nodejs

Aprende a utilizar el gestor de paquetes Nodejs

Curso NPM

Aprende a utilizar el gestor de paquetes NPM

Una vez que tengas estos instalados, puedes crear un nuevo proyecto de React usando Create React App, una herramienta oficial de React que configura un entorno de desarrollo con todo lo necesario.

Abrimos una terminal y ejecuta el siguiente comando para crear una nueva app de React, donde my-app es el nombre de la aplicación que quieras poner.

npx create-react-app my-app

Ahora vamos al directorio donde se ha creado tu aplicación,

cd my-app

Y directamente podríamos iniciar la aplicación

npm start

Tu nueva aplicación de React debería abrirse automáticamente en tu navegador en http://localhost:3000.

¡Así de fácil! Ya tienes lo básico para empezar a trabajar con React.

Cómo usar React

React se basa en componentes, y el componente más básico es el componente de función. Veamos cómo crear y usar componentes en una aplicación de React.

Crear un componente básico

Crea un archivo llamado App.js en el directorio src de tu proyecto con el siguiente contenido:

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Bienvenido a mi aplicación de React</h1>
      </header>
    </div>
  );
}

export default App;

JSX

En el ejemplo anterior, estamos utilizando JSX, una sintaxis que permite escribir HTML dentro de JavaScript. Aunque no es obligatorio usar JSX, facilita la creación de interfaces de usuario.

Renderizar componentes

React renderiza los componentes en el DOM utilizando el método ReactDOM.render(). En tu archivo src/index.js, deberías tener algo como esto:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Estado y hooks

Los componentes en React pueden tener estado (state). El estado es un objeto que representa el estado interno del componente y puede cambiar con el tiempo.

Ejemplo de uso de estado, vamos a crear un componente con estado utilizando hooks, una característica de React que permite usar estado y otras características sin escribir una clase.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic aquí
      </button>
    </div>
  );
}

export default Counter;

En este ejemplo,

• Estamos usando el hook useState para manejar el estado del componente Counter
• El estado inicial es 0 y setCount es la función que actualiza el estado.

Uso de props

Los componentes pueden recibir propiedades (props) de los componentes que los montan. Las propiedades (props) se pasan a los componentes como atributos HTML.

import React from 'react';

function Welcome(props) {
  return <h1>Hola, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

export default App;

En este ejemplo

• El componente Welcome recibe una propiedad name
• Este la usa para mostrar un mensaje de bienvenida.

Aplicando estilos a tus componentes

React ofrece varias formas de manejar los estilos (los CSS) a tus componentes. Vamos a ver algunas de ellas

1. CSS en archivos separados: La forma tradicional de escribir CSS sigue siendo válida en React. Sin embargo, puede llevar a conflictos de nombres y dificultades en el mantenimiento del código a medida que la aplicación crece.

2. Inline Styles: React permite aplicar estilos directamente a los elementos mediante la propiedad style. Aunque es conveniente para estilos rápidos y simples, puede resultar menos manejable para estilos complejos.

3. CSS Modules: Una técnica para evitar conflictos de nombres CSS al importar estilos como módulos.

import styles from './MiComponente.module.css';

function MiComponente() {
  return <div className={styles.miClase}>Contenido estilizado</div>;
}

4. Styled Components: Una biblioteca que permite escribir CSS en tus componentes usando JavaScript.

import styled from 'styled-components';

const Caja = styled.div`
  color: blue;
  font-size: 20px;
`;

function MiComponente() {
  return <Caja>Contenido estilizado</Caja>;
}

Manejo del estado global

En aplicaciones más grandes, el manejo del estado global puede ser complejo. React proporciona herramientas para gestionar este estado, como Context API y Redux.

Context API

La Context API permite pasar datos a través del árbol de componentes sin necesidad de pasar props manualmente en cada nivel.

import React, { createContext, useContext, useState } from 'react';

const MiContexto = createContext();

function Proveedor({ children }) {
  const [estado, setEstado] = useState("valor inicial");

  return (
    <MiContexto.Provider value={{ estado, setEstado }}>
      {children}
    </MiContexto.Provider>
  );
}

function ComponenteHijo() {
  const { estado, setEstado } = useContext(MiContexto);

  return (
    <div>
      <p>{estado}</p>
      <button onClick={() => setEstado("nuevo valor")}>Cambiar valor</button>
    </div>
  );
}

function App() {
  return (
    <Proveedor>
      <ComponenteHijo />
    </Proveedor>
  );
}

Redux

Redux es una biblioteca popular para el manejo del estado global. Sigue el principio de un único store global donde se guarda todo el estado de la aplicación.

Para usarlo, primero instalamos Redux y React-Redux:

npm install redux react-redux

Ya podemos empezar a usar Redux.

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Acción
const incrementar = () => ({ type: 'INCREMENTAR' });

// Reducer
const contador = (estado = 0, accion) => {
  switch (accion.type) {
    case 'INCREMENTAR':
      return estado + 1;
    default:
      return estado;
  }
};

// Store
const store = createStore(contador);

function Contador() {
  const dispatch = useDispatch();
  const contador = useSelector(state => state);

  return (
    <div>
      <p>{contador}</p>
      <button onClick={() => dispatch(incrementar())}>Incrementar</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Contador />
    </Provider>
  );
}

export default App;

Despliegue de una aplicación React

Una vez que hayas terminado de desarrollar tu aplicación, es hora de desplegarla. Puedes usar varias plataformas de despliegue como Vercel, Netlify, o GitHub Pages.

Despliegue en GitHub Pages

npm install gh-pages --save-dev

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

npm run deploy

Descarga el código

Todo el código de esta entrada está disponible para su descarga en Github.