En el mundo del desarrollo web en rápida evolución, React sigue siendo una piedra angular para crear interfaces de usuario dinámicas y eficaces. Ya sea que sea un desarrollador experimentado o esté comenzando, comprender los conceptos centrales de React es esencial para aprovechar todo su potencial. En este artículo, exploraremos los principios fundamentales de React, desde su estado de biblioteca hasta el poder de los ganchos, y le brindaremos una base clara para mejorar sus habilidades de React. ¡Vamos a sumergirnos! ?

1. ¿React es un marco o una biblioteca?

React es una biblioteca de JavaScript, no un marco. A diferencia de los marcos, que proporcionan un conjunto completo de herramientas y aplican una forma particular de crear aplicaciones, React se centra en un aspecto específico: la representación de la interfaz de usuario. Esto hace que React sea muy flexible y popular, ya que sigue la filosofía Unix de hacer una cosa y hacerlo bien.

2. DOM virtual

El DOM significa Modelo de Objetos de Documento en palabras simples que representan la interfaz de usuario de una aplicación. Cada vez que cambiamos la interfaz de usuario, el DOM se actualiza para representar ese cambio. El DOM se representa como una estructura de datos de árbol. Cuando cambiamos la interfaz de usuario, el DOM se vuelve a representar y actualiza sus elementos secundarios. La nueva representación de la interfaz de usuario hace que la aplicación sea lenta.

Para esta solución utilizamos DOM virtual. El DOM virtual es sólo una representación virtual del DOM. Cuando cambia el estado de la aplicación, el DOM virtual se actualiza en lugar del DOM real.

El DOM virtual cada vez crea un árbol y los elementos se representan como un nodo. Si alguno de los elementos cambia, se crea un nuevo árbol DOM virtual. Luego, el nuevo árbol se compara o “diferencia” con el árbol anterior.

En esta imagen, los círculos rojos representan los nodos que han cambiado. Estos nodos representan los elementos de la interfaz de usuario que cambian de estado. Luego comparó el árbol anterior y el árbol modificado actual. El árbol actualizado luego se actualiza por lotes al DOM real. Esto hace que React se destaque como una biblioteca JavaScript de alto rendimiento.

En resumen:

1. Se actualiza todo el DOM virtual.
2. El DOM virtual se compara con su aspecto antes de actualizarlo. React descubre qué objetos han cambiado.
3. Los objetos modificados, y solo los objetos modificados, se actualizan en el DOM real.
4. Los cambios en el DOM real hacen que la pantalla cambie.

3. JSX

JSX (JavaScript XML) te permite escribir código similar a HTML en React. Convierte etiquetas HTML en elementos React usando la función React.createElement (componente, accesorios,… niños).

Por ejemplo:
Código JSX:

  Hello, Good Morning!

Este ejemplo se compila en:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

Nota: Los componentes definidos por el usuario deben comenzar con una letra mayúscula. Las etiquetas en minúsculas se tratan como elementos HTML.

4. Accesorios en JSX

Los accesorios se pueden especificar de varias maneras en JSX:

Expresiones de JavaScript como accesorios:

Aquí, props.sum se evalúa como 6.

Literales de cadena:

Ambos ejemplos anteriores son equivalentes.

Accesorios predeterminados en “Verdadero”
Si no pasamos un valor para un accesorio, el valor predeterminado es verdadero.

Por ejemplo,

Ambos ejemplos anteriores son equivalentes.

5. Componentes de clase

Los componentes en React se pueden definir como clases o funciones. Aquí se explica cómo definir un componente de clase:

class Greetings extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

6. El ciclo de vida de los componentes

Los componentes tienen métodos de ciclo de vida que puedes anular para ejecutar código en etapas específicas:

Montaje: Cuando se crea un componente y se inserta en el DOM.

• constructor()
• prestar()
• componenteDidMount()

Actualización: Cuando cambian los accesorios o el estado.

• prestar()
• componentDidUpdate()

Desmontaje: Cuando se elimina un componente del DOM.

• componenteWillUnmount()

7. Propiedades de clase

defaultProps te permite definir valores predeterminados para los accesorios:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

Si no se proporciona props.color, el valor predeterminado es 'gris'.

8. Tipos de accesorios

Podemos usar tipos de accesorios para verificar los tipos de propiedades pasadas de los componentes. Da errores cuando no coinciden.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

Esto advertirá sobre la falta de coincidencia de tipos para id.

9. Optimización del rendimiento

React está diseñado para el rendimiento, pero puedes optimizarlo aún más:

Usando la compilación de producción:

npm run build

Esto crea una compilación de producción con optimizaciones.

Minimizar el código fuente: Tenga cuidado con los cambios en el código fuente de React.

División de código: Agrupe el código JavaScript en fragmentos para cargarlo según sea necesario.

10. Ganchos de reacción

Los ganchos son funciones que le permiten usar el estado y otras características de React en los componentes de la función. Los dos ganchos más populares son:

useState: Agrega estado a los componentes de la función.

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: Gestiona los efectos secundarios en los componentes funcionales.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

React ha evolucionado continuamente para satisfacer las demandas del desarrollo web moderno, y dominar sus conceptos básicos es crucial para crear aplicaciones eficientes y escalables. Desde comprender cómo React se diferencia como biblioteca hasta aprovechar el poder de los enlaces para componentes funcionales, estos fundamentos lo encaminarán hacia el dominio de React.

A medida que continúas explorando e implementando React en tus proyectos, recuerda que mantenerte actualizado con las últimas prácticas y características te mantendrá a la vanguardia en el panorama tecnológico en constante cambio. Si este artículo te resultó valioso, ¡no olvides darle me gusta y compartirlo con otros desarrolladores deseosos de profundizar sus conocimientos de React!

¡Gracias por leer y feliz codificación! ?