Fundamentos de React JS #

Objetivos #

• ¿Qué es React?
• create-react-app vs vite.js
• JSX
• Introducción a componentes
• Introducción a Hooks

Extensiones VSCode #

• volar
• es7 react js snippets
• material icon theme
• nu-disco theme

Recursos #

• es.reactjs.org
• beta.reactjs
• vitejs
• getting-started
• tutorial
• create-react-app
• getting-started-with-react

¿Qué es React? #

• React es una biblioteca Javascript para crear interfaces de usuario.
• React no es un framework (a diferencia de Angular o Vue, que tienen más opiniones).
• React es un proyecto de código abierto creado por Facebook.
• Está basado en componentes.

Requisitos #

• node js: es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación JavaScript.
• npm: NPM (Node Package Manager) es un gestor de paquetes desarrollado en su totalidad bajo el lenguaje JavaScript por Isaac Schlueter, a través del cual podemos obtener cualquier librería con tan solo una sencilla línea de código, lo cual nos permitirá agregar dependencias de forma simple, distribuir paquetes y administrar eficazmente tanto los módulos como el proyecto a desarrollar en general. fuente

Instalación #

• Vite.js
• CRA create react app

Vite #

• Vite web oficial: Vite se define como una herramienta de frontend que te ayudará a crear proyectos (sin atarte a ningún framework concreto) y que su desarrollo y construcción final sea lo más sencilla posible.
• Está desarrollada por Evan You, el creador de Vue.
• Actualmente, Vite soporta tanto proyectos vanilla (sin utilizar frameworks), como proyectos utilizando Vue, React, Preact o Lit-element (tanto en versión Javascript, como Typescript). Fuente
• Templates
• Comunidad DEV

npm create vite@latest

create-react-app #

• create-react-app Afortunadamente, Facebook ha creado la aplicación Create React App, un entorno que viene preconfigurado con todo lo necesario para crear una aplicación React.
• Creará un servidor de desarrollo en vivo.
• No es necesario instalar ni configurar herramientas como webpack o Babel. Están preconfigurados y ocultos para que pueda concentrarse en el código.
• Ventaja: enfocarse en el código, no en las herramientas de compilación.

npx create-react-app my-app
cd my-app
npm start

CRA vs Vite #

• Vite y CRA no son tan diferentes como podría pensar. Básicamente, hacen más o menos lo mismo, que es servir a un servidor de desarrollo local y agrupar códigos para la producción.
• La principal diferencia que notará es cómo se sirve el código en el desarrollo y qué módulos son compatibles.
• Vite no necesita agrupar la aplicación completa o transpilar los módulos y el código antes de iniciar un servidor de desarrollo; la transpilación se realiza bajo demanda, lo que la hace significativamente más rápida que CRA.
• Sigue estudiando aquí

JSX: JavaScript + XML #

• Como ha visto, hemos estado usando lo que parece HTML en nuestro código React, pero no es HTML del todo. Esto es JSX , que significa JavaScript XML.
• El uso de JSX no es obligatorio para escribir React.
• Debajo del capó, se está ejecutando createElement, lo que toma la etiqueta, las propiedades y los elementos secundarios del componente y muestra la misma información.
• JSX está más cerca de JavaScript, no de HTML, por lo que hay algunas diferencias clave a tener en cuenta al escribirlo.
  • className se usa en lugar de class para agregar clases CSS, ya que class es una palabra clave reservada en JavaScript.
  • Las propiedades y métodos en JSX son camelCase.
  • Las etiquetas de cierre automático deben terminar en una barra inclinada,
    Ej. <img />
  • Su componente tampoco puede devolver varias etiquetas JSX. Tienes que envolverlos en un padre compartido, como un envoltorio <div>...</div> vacío o: <>...</>

Las expresiones de JavaScript también se pueden incrustar dentro de JSX usando llaves, incluidas variables, funciones y propiedades.

const App = () => {
  const title = "Mi primero proyecto con React.js";
  return (
    <div className="container">
      <h1 className="text-primary">{title}</h1>
    </div>
  );
};

export default App;

const App = () => {
  const title = "Mi primero proyecto con React.js";
  const classColors = {
    primary: "text-primary",
    info: "text-info",
  };
  return (
    <div className="container">
      <h1 className={classColors.primary}>{title}</h1>
      <p className={classColors.info}>Lorem ipsum dolor sit.</p>
    </div>
  );
};

export default App;

Componentes #

• Las aplicaciones React están hechas de componentes .
• Un componente es una parte de la IU (interfaz de usuario) que tiene su propia lógica y apariencia.
• Un componente puede ser tan pequeño como un botón o tan grande como una página entera.
• Los componentes de React son funciones de JavaScript:

const MyButton = () => {
  return <button>i'am a button</button>;
};

const App = () => {
  const title = "Mi primero proyecto con React.js";
  return (
    <div className="container">
      <h1 className="text-primary">{title}</h1>
      <MyButton />
    </div>
  );
};

export default App;

Renderizado condicional #

• condicional: En React, puedes crear distintos componentes que encapsulan el comportamiento que necesitas. Entonces, puedes renderizar solamente algunos de ellos, dependiendo del estado de tu aplicación.

const MyButton = () => {
  return <button>i'am a button</button>;
};

const UserMessage = () => {
  return <h2>Bienvenido usuario</h2>;
};

const App = () => {
  const title = "Mi primero proyecto con React.js";
  const user = true;
  return (
    <div className="container">
      <h1 className="text-primary">{title}</h1>
      <MyButton />
      {user ? <UserMessage /> : "Offline"}
    </div>
  );
};

export default App;

{
  user && <UserMessage />;
}

Listas y keys #

• listas

const App = () => {
  const fruts = ["🍐", "🍌", "🍎"];
  return (
    <div className="container">
      <ul>
        {fruts.map((frut, index) => {
          return <li key={index}>{frut}</li>;
        })}
      </ul>
    </div>
  );
};

export default App;

props #

• Se utiliza para enviar información al componente anidado.
• La información que transmites de esta manera se llama props.

const ItemFrut = (props) => {
  return <li>{props.frut}</li>;
};

const App = () => {
  const fruts = ["🍐", "🍌", "🍎"];
  return (
    <div className="container">
      <ul>
        {fruts.map((frut, index) => {
          return (
            <ItemFrut
              key={index}
              frut={frut}
            />
          );
        })}
      </ul>
    </div>
  );
};

export default App;

Con PropsTypes podemos validar los props que recibe un componente:

import PropTypes from "prop-types";

const ItemFrut = (props) => {
  return <li>{props.frut}</li>;
};

ItemFrut.propTypes = {
  frut: PropTypes.string.isRequired,
};

EsLint #

• ESLint es una herramienta de linting para JavaScript. El linting es un proceso mediante el cual se analiza el código fuente de un programa en busca de posibles errores, problemas de estilo o prácticas desaconsejadas.
• ESLint permite detectar errores comunes en el código, como variables no utilizadas, funciones no definidas, declaraciones duplicadas, entre otros.

.eslintrc.cjs #

El archivo .eslintrc.cjs es un archivo de configuración de ESLint en formato CommonJS (CJS).

env #

La propiedad node: true en la sección env de un archivo de configuración de ESLint indica que el código que está siendo analizado por ESLint se ejecutará en un entorno de Node.js. Esto le permite a ESLint reconocer y aplicar las reglas y configuraciones específicas de Node.js durante el proceso de linting.

env: { browser: true, es2020: true, node: true },

react/props-types off #

module.exports = {
  // ...otras configuraciones...

  rules: {
    // ...otras reglas...
    "react/prop-types": "off", // Desactivar validación de PropTypes
  },
};

PropTypes #

• En React, PropTypes es una característica que permite especificar el tipo de las props (propiedades) que se pasan a los componentes.
• PropTypes proporciona una forma de documentar y validar las props que se esperan en un componente, lo que ayuda a evitar errores y facilita el desarrollo y mantenimiento del código.

Tipos comunes de PropTypes:

• number: Valida que la prop sea un número.
• bool: Valida que la prop sea un valor booleano (true o false).
• array: Valida que la prop sea un array.
• object: Valida que la prop sea un objeto.
• symbol: Valida que la prop sea un símbolo.
• node: Valida que la prop pueda ser cualquier cosa que se pueda renderizar en React (elemento React, cadena de texto, número, fragmento, etc.).
• element: Valida que la prop sea un único elemento React (es decir, no un fragmento ni una cadena de texto).
• instanceOf(Constructor): Valida que la prop sea una instancia de una clase específica.
• oneOf([val1, val2, ...]): Valida que la prop sea uno de los valores proporcionados en un array.
• oneOfType([type1, type2, ...]): Valida que la prop cumpla con al menos uno de los tipos de datos especificados en un array.
• arrayOf(type): Valida que la prop sea un array que contenga elementos del tipo especificado.
• objectOf(type): Valida que la prop sea un objeto cuyos valores sean del tipo especificado.

Ejemplo:

import PropTypes from "prop-types";

const MyButton = ({ text, handleClick }) => {
  return <button onClick={handleClick}>{text}</button>;
};

MyButton.propTypes = {
  text: PropTypes.string.isRequired,
  handleClick: PropTypes.func.isRequired,
};

const App = () => {
  const handleClick = () => {
    console.log("clicked");
  };

  return (
    <div>
      <MyButton
        text="text"
        handleClick={handleClick}
      ></MyButton>
    </div>
  );
};
export default App;

Práctica props #

• Intenta hacer lo mismo pero con el componente UserMessage
• Puedes utilizar la desestructuración de JS. más info aquí

Opción #01:

const UserMessage = ({ user }) => {
  if (user) return <h2>Bienvenido</h2>;

  return <h2>Offline</h2>;
};

Opción #02:

export default ({ user }) => <h2>{user ? "Bienvenido" : "offline"}</h2>;

Manejando eventos #

• eventos
• Los eventos de React se nombran usando camelCase, en vez de minúsculas.
• Con JSX pasas una función como el manejador del evento, en vez de un string.

const MyButton = () => {
  const handleClick = () => {
    console.log("me diste click");
  };

  return <button onClick={handleClick}>i'am a button</button>;
};

Con parámetros:

const MyButton = () => {
  const handleClick = (name) => {
    console.log("me diste click: ", name);
  };

  return <button onClick={() => handleClick("🍎")}>i'am a button</button>;
};

Componentes (modularizar) #

• components
• Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

components/MyButton.jsx

const MyButton = () => {
  const handleClick = (name) => {
    console.log("me diste click: ", name);
  };

  return <button onClick={() => handleClick("🍎")}>i'am a button</button>;
};

export default MyButton;

App.jsx

import MyButton from "./components/MyButton";
const App = () => {
  return (
    <div className="container">
      <h1 className="text-primary">{title}</h1>
      <MyButton />
    </div>
  );
};

export default App;

Práctica components #

• Intenta llevar todo a componentes modularizados.
• ./components/MyButton.jsx
• ./components/UserMessage.jsx
• ./components/fruts/ListFruts.jsx
• ./components/fruts/ItemFrut.jsx

import MyButton from "./components/MyButton";
import UserMessage from "./components/UserMessage";
import ListFruts from "./components/fruts/ListFruts";

const App = () => {
  const title = "Mi primero proyecto con React.js";
  const user = false;

  return (
    <div className="container">
      <h1 className="text-primary">{title}</h1>
      <MyButton />
      <UserMessage user={user} />
      <ListFruts />
    </div>
  );
};

export default App;

import MyButton from "./components/MyButton";
import UserMessage from "./components/UserMessage";
import ListFruts from "./components/fruts/ListFruts";
import React from "react";

const App = () => {
  const title = "Mi primero proyecto con React.js";
  const user = false;

  return (
    <React.Fragment>
      <h1 className="text-primary">{title}</h1>
      <MyButton />
      <UserMessage user={user} />
      <ListFruts />
    </React.Fragment>
  );
};

export default App;

import MyButton from "./components/MyButton";
import UserMessage from "./components/UserMessage";
import ListFruts from "./components/fruts/ListFruts";

const App = () => {
  const title = "Mi primero proyecto con React.js";
  const user = false;

  return (
    <>
      <h1 className="text-primary">{title}</h1>
      <MyButton />
      <UserMessage user={user} />
      <ListFruts />
    </>
  );
};

export default App;

Estado #

• El estado le permite a los componentes de React cambiar su salida a lo largo del tiempo en respuesta a acciones del usuario, respuestas de red y cualquier otra cosa.
• state
• Para hacer cambios vamos a utilizar un hook.

Hooks #

¿Qué pasa si hago esto? import CounterExample from "./components/CounterExample";

export default () => {
  let counter = 0;

  const handleClickIncrement = () => {
    counter++;
    console.log(counter);
  };

  return <button onClick={handleClickIncrement}>Counter: {counter}</button>;
};

• Nada le indica a React que tenemos que volver a renderizar para pintar nuevamente button.
• Necesitamos un Hook que modifique el estado. (ahora con hooks es más fácil)

useState #

• useState

import { useState } from "react";

export default () => {
  const [counter, setCounter] = useState(0);

  const handleClickIncrement = () => {
    setCounter(counter + 1);
    //setCounter((prevCounter) => prevCounter + 1);
  };

  return <button onClick={handleClickIncrement}>Counter: {counter}</button>;
};

¿Qué hace la llamada a useState? #

• Declara una “variable de estado”.
• useState es una nueva forma de usar exactamente las mismas funciones que this.state nos da en una clase.
• Normalmente, las variables “desaparecen” cuando se sale de la función, pero las variables de estado son conservadas por React.

¿Qué pasamos a useState como argumento? #

• El único argumento para el Hook useState() es el estado inicial.

¿Qué devuelve useState? #

• Devuelve una pareja de valores (array): el estado actual y una función que lo actualiza.

Resumen: #

• Declaramos una variable de estado llamada contador y le asignamos a 0.
• React recordará su valor actual entre re-renderizados, y devolverá el valor más reciente a nuestra función.
• Si se quiere actualizar el valor de contador actual, podemos llamar a setContador.
• Cuando el usuario hace click, llamamos a setContador con un nuevo valor. React actualizará entonces el componente Contador pasándole el nuevo valor de contador.
• Nota los corchetes son intaxis de Javascript, se llama “desestructuración de arrays”.

Práctica #

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const handleClickDecrement = () => {
    setCount(count - 1);
  };

  const handleClickIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div className="container mt-5 text-center">
      <div className="row justify-content-center">
        <div className="col-5">
          <h1>Counter {count}</h1>
          <div className="d-grid gap-2">
            <button
              className="btn btn-outline-danger"
              onClick={handleClickDecrement}
              disabled={count === 0 && true}
            >
              Decrement
            </button>
            <button
              className="btn btn-outline-primary"
              onClick={handleClickIncrement}
            >
              Increment
            </button>
            <button
              className="btn btn-outline-dark"
              onClick={() => setCount(0)}
            >
              Reset
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

Opción #01 ActionButton:

const ActionButton = ({ count = 0, color = "secondary", action }) => {
  return (
    <button
      className={`btn btn-outline-${color}`}
      onClick={action}
    >
      Decrement {count}
    </button>
  );
};

export default ActionButton;

<ActionButton
  count={count}
  color="danger"
  action={handleClickDecrement}
/>

Opción #02 ActionButton:

const ActionButton = ({ count = 0, ...props }) => {
  return <button {...props}>Decrement {count}</button>;
};

export default ActionButton;

<ActionButton
  count={count}
  className="btn btn-outline-danger"
  onClick={handleClickDecrement}
  disabled={count === 0 && true}
/>

React.StrictMode #

• Quizás notaste el modo estricto en React, esto nos ayuda a detectar posibles errores en modo desarrollo.
  • Verificar que los componentes internos estén siguiendo algunas de las prácticas recomendadas y le avise si no está en la consola.
  • Verificar que los métodos en desuso no se estén usando y, si se usan, el modo estricto le avisará en la consola.
  • Ayudarle a prevenir algunos efectos secundarios mediante la identificación de riesgos potenciales.
• StrictMode React 18

Siguiente Clase #

• ¿Cómo utilizar state con objetos o arrays?