Nuestro primer proyecto React

Para crear una aplicación hoy en día no es suficiente con una librería como React. Se necesitan también de múltiples recursos y herramientas que nos permitan extender las capacidades de React. Estas herramientas generalmente vienen en forma de dependencias es por eso que es muy importante crear un proyecto utilizando algún gestor de dependencias. Eso es lo que nos brinda el CLI de React. Crear todo un entorno de trabajo para que sea fácil utilizar React y las múltiples dependencias que luego necesitemos en nuestro proyecto.

En este tutorial aprenderemos a construir un proyecto con React utilizando el CLI para crear el entorno inicial que le brindará la capacidad de escalar nuestro proyecto utilizando más herramientas independientes de las que nos ofrece React.

Índice

1. Creando un proyecto usando el CLI
2. Primeros pasos con React
3. Creando nuestro primer componente
4. Logrando la reactividad en React
5. Trabajando con Formularios
6. Instalando librerías externas en React
7. A deployar
8. Tu turno
9. El código

1. Creando un proyecto usando el CLI

Lo que necesitamos para comenzar a crear nuestro primer proyecto en React es instalar la herramienta create-reat-app que nos ayudará a crear un proyecto de React. Para eso tenemos que tener instalado Nodejs. Si ya tenemos instalado Nodejs solo bastaría con ejecutar el siguiente comando en la terminal para instalar create-reat-app.

npm i -g create-react-app

Ahora que ya tenemos instalado esta herramienta podemos usarla para crear nuestro primer proyecto React. Para eso ejecutamos el siguiente comando en nuestra terminal.

create-react-app nombre_proyecto

Luego de terminado este proceso se crearán muchos archivos y carpetas de los cuales iremos comprendiendo su valor conforme vamos aprendiendo más de este fabuloso framework.

Una vez creado nuestro proyecto de React podemos correrlo en el navegador usando el siguiente comando.

npm run start

2. Primeros pasos con React

El primer archivo que revisaremos es src/App.js que pertenece a nuestro primer componente, que se crea por defecto al crear nuestro proyecto de React. Este componente también será nuestro componente principal donde colocaremos los demás componentes para nuestra aplicación.

En el siguiente código explicamos un poco que es lo que sucede en este archivo.

// Importando React
import React from "react";
// Importando el logo de React
import logo from "./logo.svg";
// Importando una hoja de estilos css para nuestro componente
import "./App.css";

// Función que maneja la lógica de nuestro componente
function App() {
  //Retorna la estructura HTML del primer componente que aparece en pantalla
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

// Exporta la función para que pueda ser usada por otros archivos js
export default App;

Si lo único que queremos es que muestre un hola mundo limpiamos el código HTML que tenemos y dentro de un <div> colocamos el el Hola mundo que queremos. Recuerda colocar siempre todo dentro de un <div> que lo agrupe.

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div>
      <h2>Hola mundo</h2>
    </div>
  );
}

export default App;

Ahora que hicimos estos cambios hay archivos y código que no necesitamos. Primero que todo está el archivo App.css que no usamos ya que solo mostramos un Hola mundo. Así que podemos eliminarlo. Así que también eliminamos la importación de App.css y también la importación y el archivo .svgdel logo que no lo usamos.

Por otro lado el archivo index.css es donde irán los estilos generales para toda nuestra aplicación. Así que vamos a darle un color a nuestro Hola Mundo.

h2 {
  color: red;
}

Otra archivo que en estos momentos es un tanto inútil es App.test.js ya que por ahora no nos preocuparemos de hacer tests automatizados. Por este motivo también eliminamos el archivo setupTests.js.

Ahora revisemos un poco el archivo index.js. Este archivo es el que comienza la ejecución de nuestra aplicación web. En la parte final del archivo tenemos algunos comentarios que nos indican que serviceWorker.unregister() sirve para que la aplicación pueda trabajar de manera offline. Este método no lo usaremos por el momento así que podemos eliminar esta lineal de nuestro código así como su importación respectiva. Solo quedándonos con el siguiente código que pasamos a explicar a continuación.

// Importación de librerias y archivos necesarios para nuestra aplicación web

// Es necesario porque estamos usando JSX dentro del render
import React from "react";
// Nos permite colocar un elemento en el DOM
import ReactDOM from "react-dom";
// Importa los estilos generales
import "./index.css";
// Nos permite usar el componente App
import App from "./App";

// Mediante el método render pitamos en el DOM
ReactDOM.render(
  // Esta etiqueta es opcional pero ayuda a evitar problemas en nuestra aplicación.
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Por último, usamos el Virtual DOM para renderizar nuestro componente principal <App /> en el archivo public/index.html.

3. Creando nuestro primer componente

Para crear nuestro primer componente en React crearemos una carpeta src/components donde colocaremos cada uno de nuestro componentes. Cada componente en React es un archivo .jsx. Así que dentro de esa carpeta crearemos el archivo Parrafo.jsx.

// Importamos React a nuestro componente necesario para usar JSX
import React from "react";

// Creamos la funcion que controlará nuestro componente
function Parrafo() {
  return (
    <div>
      <h5>Este es el componente Párrafo</h5>
    </div>
  );
}

// Exponemos la función que controla nuestro componente.
export default Parrafo;

Ahora colocaremos nuestro componente en nuestra aplicación. Para esto nos dirigimos al archivo App.js donde colocaremos de nuestro componente usando etiquetas HTML con el nombre de nuestro componente <Parrafo></Parrafo> de la siguiente forma.

import React from "react";
import Parrafo from "./components/Parrafo";

function App() {
  return (
    <div>
      <h2>Hola mundo</h2>
      <Parrafo></Parrafo>
    </div>
  );
}

export default App;

Listo!! ya tenemos nuestro primer componente funcionando en React.

Pero la magia de React aún no se muestra. Entonces ahora usemos un poquito de lo que nos puede ofrecer React y rendericemos una variable desde código JavaScript directamente en un componente.

Pues bien, para colocar variables dentro de nuestros componentes podemos declararlo en la clase del componente y luego llamarlos en el HTML usando {} como en el siguiente ejemplo.

const Parrafo = () => {
  const name = "AndyGeek";
  const url = "https://miro.medium.com/max/256/1*gGh9I9ju9w4lXhmWoG2fXA.png";
  return (
    <div>
      <h3>Este es el componente Parrafo de {name}</h3>
      <img src={url} alt="react" />
    </div>
  );
};

Y también puedes crear eventos de la misma forma que se ejecuten al hacer click en algún botón de HTML. Veamos aquí un ejemplo de como crear un evento y ejecutarlo mediante un click.

const Parrafo = () => {
  const miEvento = () => {
    console.log("Hiciste click");
  };
  return (
    <div>
      <button onClick={miEvento}>Botón</button>
    </div>
  );
};

Pero si en onClick la función es llamadas con paréntesis como onClick={evento()} este se llamará al cargar la web, ya que lo que necesita el onClick es una referencia de la función más no la llamada a la función. Si mandamos una función con paréntesis, al momento de que el compilador analice nuestro código JSX, para transpilarlo a JavaScript, este ejecutará la función.

Por esta razón si tenemos que usar paréntesis, por ejemplo para enviar algún parámetro, debemos hacerlo de la siguiente forma.

const Parrafo = () => {
  const miEvento = (parametro) => {
    console.log(`Hola soy ${parametro}`);
  };
  return (
    <div>
      <button onClick={() => miEvento("AndyGeek")}>Botón</button>
    </div>
  );
};

Para crear un Fragment en React solo basta con algunos cambios que pasamos a explicar en el siguiente código.

// Primero necesitamos agregar la libreria Fragment
import React, { Fragment } from "react";

const Parrafo = () => {
  // Devemos englobar todo en una etiqueta Fragment
  return (
    <Fragment>
      <h3>Este es el primer elemento de un fragment</h3>
      <p>Este es un texto random que acabo de crear.</p>
      <h3>Este es el último elemento de este fragment</h3>
    </Fragment>
  );
};
export default Parrafo;

Pero tu de seguro te harás la pregunta. Oye pero al igual que un componente estamos devolviendo solo una etiqueta HTML en este caso un <Fragment>. Pues si pero la diferencia esta en la estructura HTML que tenemos como resultado. Cuando no usamos Fragments todo nuestro HTML va dentro de un <div>. Pero si usamos Fragment, React prescinde de ese div y renderiza los elementos de manera directa en la web.

4. Logrando la reactividad en React

Ahora si queremos cambiar una variable en React tenemos que hacer uso de Hooks. Pero qué es un Hook, en palabras simples los Hooks son una nueva API de la librería de React que nos permite tener estado, y otras características de React, que explicaremos más adelante.

Uno de estos Hooks es el useState que nos permitirá manipular una variable. Pero para hacer eso lo primero que tenemos que hacer es importarlo de la siguiente manera.

import React, { useState } from "react";

Luego dentro de la función del componente debemos declarar nuestra variable dentro de la siguiente expresión.

const [texto, setTexto] = useState("Mi texto es bonito");

Donde por medio de un arreglo declaramos la variable texto y la función que lo podrá modificar setTexto. Además usando la función useState le damos un valor por defecto a nuestra variable.

Luego solo faltaría declarar una función que se ejecute mediante el evento click y este a su vez ejecute a la función setTexto() ,que modifica la variable.

const eventoClick = () => {
  setTexto("XD XD");
};

Ahora si lo que queremos es modificar una lista tendríamos que usar el siguiente código.

const esatdoInicial = [1, 2, 3, 4, 5];
const [lista, setLista] = useState(estadoInicial);

Ahora si queremos hacer un recorrido dentro de JSX de una lista como esta tenemos que usar la función map dentro de { } como en el siguiente ejemplo.

<div>
  <h2>Lista</h2>
  {lista.map((item, index) => (
    <h4 key={index}>{item}</h4>
  ))}
</div>

Aquí es necesario recordar que la función map puede recibir una función con una sola variable, cada valor del arreglo pero también puede recibir una segunda variable opcional que es la variable donde se almacenará el índice. Este índice debe ser ir en el atributo key de nuestra etiqueta HTML, ya que para React es muy importante tener una etiqueta key dentro de una lista.

Dentro de un setLista podemos utilizar el operador de propagación para agregar la lista de los valores actuales y luego agregar el elemento que queremos ingresar, de tal forma que obtendremos una nueva lista con los valores anteriores y el nuevo que ingresamos.

const [lista, setLista] = useState(estadoInicial);

const agregarElemento = () => {
  setLista([...lista, "Nuevo"]);
};

5. Trabajando con Formularios

Lo que deseamos al trabajar con formularios es capturar los datos de los inputs de manera rápida. Para esto React tiene el atributo de etiqueta HTML llamado onChange. Este atributo nos permite ejecutar una función que tiene como parámetro el evento que está sucediendo en la etiqueta. Utilizando este evento e podemos obtener el elemento que lo desencadeno, para esto usamos el método target y una vez obtenido el elemento usamos value para obtener su valor.

<input onChange={(e) => setNombre(e.target.value)} />

También podemos crear la función flecha de manera separada para solo llamarlo en el atributo onChange. Esto nos permitiría colocar más código dentro de la función que desencadena el evento.

Además también lo podemos hacer utilizando una función convencional de la siguiente forma.

function guardarDatos(e) {
  // Código que previene que el navegador se recargue
  e.preventDefault();

  e.target.reset();
}

return (
  // Utilizando onSubmit capturamos específicamente el evento submit
  <form onSubmit={guardarDatos}>
    <input />
    <button type="submit">Aceptar</button>
  </form>
);

También podemos usar el atributo value = {variable}, pero esto solo será posible si la etiqueta HTML también tiene el atributo onChange. El value nos puede servir para traer un valor desde el JavaScript al atributo value de la etiqueta HTML.

<input
  type="text"
  value={inp}
  onChange={(e) => {
    cambiar(e.target.value);
  }}
/>

modoEdicion ? (
  <button type="submit">Editar</button>
) : (
  <button type="submit">Agregar</button>
);

6. Instalando librerías externas en React

Bootstrap

Una librería muy utilizada para dar estilos a nuestros proyectos web es Bootstrap. Podemos agregar Bootstrap a nuestro proyecto para que este tenga una buena presentación. La forma más sencilla de agregar Bootstrap a un proyecto en React es agregando el CDN de estilos en el archivo public/index.html.

ShortId

Otra libreria bastante frecuente si estamos comenzando en React y queremos realizar un Crud de datos es ShortId que nos permite crear código aleatorio para nuestros datos. Para instalar en nuestro proyecto React debemos ejecutar el siguiente comando.

npm i shortid

El modo de uso en la documentación es la siguiente.

const shortid = require("shortid");

console.log(shortid.generate());

Pero si nosotros queremos utilizarlo usando el import hacemos lo siguiente.

import shortid from "shortid";

7. A deployar

Si quieres construir tu proyecto para deployarlo en algún servidor desde la terminal debes usar el siguiente comando que te creará una carpeta llamada public que contendrá tu proyecto listo para deployarse en algún servicio como Netlify.

npm run build

8. Tu turno

Usando estos conceptos que acabamos de conocer de Angular te animo a realizar el siguiente proyecto. Un CRUD bastante simple pero usando todos los conceptos aprendidos de React. Puedes probar la aplicación ya construida en Netlify-crud-simple-react.

Cuando quieras puedes ver el código del proyecto terminado. Pero ándale inténtalo tu mismo!!

9. El código

El código del proyecto está en el siguiente repositorio. github.com/andygeek/crud-simple-react