Introducción a React y análisis de casos.

¿Qué es Reaccionar?

React es una biblioteca de JavaScript para crear interfaces de usuario, desarrollada por Facebook. React es muy bien recibido por sus ideas basadas en componentes, sus potentes capacidades de optimización del rendimiento y su estructura gramatical clara y concisa.

Conceptos básicos de React

Los conceptos básicos de React incluyen componentes, estado (State) y propiedades (Props). Los componentes son los componentes básicos de las aplicaciones React, que se utilizan para crear elementos de interfaz de usuario reutilizables. El estado son datos dentro de un componente que pueden cambiar según la interacción del usuario u otros eventos, lo que desencadena una nueva representación del componente. Las propiedades son una forma de pasar datos de los componentes principales a los componentes secundarios.

Ejemplo de reacción: una aplicación de contador simple

El siguiente ejemplo demuestra cómo crear una aplicación de contador simple usando React.

Primero, creamos un componente llamado Contador. El código del componente es el siguiente:

import React, {
    
     useState } from 'react';

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

  return (
    <div>
      <h2>计数器：{
    
    count}</h2>
      <button onClick={
    
    () => setCount(count + 1)}>增加</button>
      <button onClick={
    
    () => setCount(count - 1)}>减少</button>
    </div>
  );
}

export default Counter;

Para mostrar este componente de contador en la página, debemos agregarlo al componente raíz. El siguiente es el contenido del archivo App.js

import React from 'react';
import Counter from './Counter';

function App() {
    
    
  return (
    <div>
      <h1>React 示例：计数器应用</h1>
      <Counter />
    </div>
  );
}

export default App;

Ejemplo de explicación

En este ejemplo, primero importamos useState Hook de la biblioteca React. useState se utiliza para crear estado en componentes funcionales. A continuación, definimos un componente funcional llamado Counter. Dentro del componente, usamos useState para crear una variable de estado llamada count y una función llamada setCount para actualizar el valor de count.

En el valor de retorno del componente, creamos un div que contiene el título y dos botones usando la sintaxis JSX. El título muestra el valor de conteo actual y los botones se utilizan para aumentar y disminuir el valor de conteo, respectivamente. Cuando se hace clic en el botón, llamamos a la función setCount para incrementar o disminuir el conteo en uno.

Finalmente, exportamos el componente Contador para usarlo en otro lugar. En el archivo App.js, importamos el componente Counter y lo agregamos al componente raíz de la aplicación.

Esta simple aplicación de contador demuestra conceptos básicos de React como componentes, estado y manejo de eventos. Al aprender y practicar estos conceptos, puede comenzar a crear aplicaciones React más complejas.

Métodos de ciclo de vida y ganchos en React

En React, a veces necesitamos realizar acciones específicas en diferentes etapas de un componente. Para lograr esto, React proporciona métodos de ciclo de vida y Hooks.

En los componentes de clase, los métodos de ciclo de vida comunes son:

componentDidMount(): el método que se ejecuta después de montar el componente.
componentDidUpdate(): el método que se ejecuta después de actualizar el componente.
componenteWillUnmount(): el método ejecutado antes de que se desmonte el componente.
En los componentes de función, podemos usar Hooks (como useEffect) para lograr funciones similares. useEffect puede realizar acciones específicas cuando los componentes se montan, actualizan y desmontan. Aquí hay un ejemplo simple que muestra cómo usar

En este ejemplo, creamos un componente funcional llamado Temporizador que muestra la cantidad de segundos que han pasado desde que se cargó la página. Usamos useState para crear una variable de estado llamada segundos y una función llamada setSeconds para actualizar el valor de segundos.

También usamos useEffect Hook, que crea un temporizador cuando se monta el componente, actualizando el valor de segundos cada 1000 milisegundos (1 segundo). Al mismo tiempo, cuando se descarga el componente, la función de retorno de useEffect borrará el temporizador para evitar pérdidas de memoria.

Para usar este componente Timer en la aplicación, podemos agregarlo al componente raíz. El siguiente es el contenido del archivo App.js actualizado:

import React from 'react';
import Counter from './Counter';
import Timer from './Timer';

function App() {
    
    
  return (
    <div>
      <h1>React 示例</h1>
      <Counter />
      <Timer />
    </div>
  );
}

export default App;

Al agregar el componente Temporizador al archivo App.js, ahora podemos mostrar tanto la aplicación de contador como el temporizador en la página.

Este ejemplo muestra el uso básico de los métodos de ciclo de vida de React y Hooks. Dominar estos conceptos lo ayuda a administrar el comportamiento de los componentes en diferentes etapas, optimizar el rendimiento y mejorar la legibilidad del código.

Guía de inicio de React: conceptos básicos y análisis de ejemplo