Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

React es una de las bibliotecas JavaScript front-end más populares. Muchas empresas utilizan React para desarrollar sus interfaces de usuario y ha ganado gran popularidad entre los desarrolladores.

Es fácil crear un programa simple con React, como esta aplicación de contador básica. Comenzar con un tutorial sencillo lo ayudará a comprender algunos de los conceptos básicos pero importantes de React.

Características de la aplicación Counter

En este proyecto, va a desarrollar una aplicación de contador con las siguientes características:

  1. Botón de aumento de conteo: Esto aumentará el conteo en uno.
  2. Botón de disminución de conteo: Esto disminuirá el conteo en uno.
  3. Botón de reinicio: Esto pondrá el conteo a cero.

Conceptos básicos de React

Antes de continuar, debe comprender algunos de estos conceptos básicos en React que usará en este proyecto:

  1. Componentes
    instagram viewer
    : Los componentes son los componentes básicos de las aplicaciones React. Contienen código independiente y reutilizable. Usando componentes, puede dividir la interfaz de usuario en partes separadas. Luego puede reutilizar esas partes y trabajar con ellas de forma independiente.
  2. Estado: En React puedes usar un objeto para almacenar datos que representen el estado de un componente. Esto permite que los componentes administren y actualicen sus propios datos. El estado de un componente determina cómo se representa y se comporta.
  3. Componentes funcionales: El componente funcional de React es simplemente una función de JavaScript que acepta accesorios como argumento y devuelve un elemento React (JSX).
  4. Accesorios: Puede usar props (abreviatura de "propiedades") para pasar datos de un componente principal a un componente secundario. Los accesorios son una de las partes integrales de React y puedes usa accesorios para realizar varias operaciones en React.
  5. Manos: React Hooks son funciones integradas que le permiten administrar el estado y otras funciones de React, como métodos de ciclo de vida dentro de componentes funcionales. También pueden ayudarlo a escribir código claro y conciso. Pronto verá cómo puede administrar el estado con el usarEstado() gancho.

El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT.

Paso 1: Configuración del proyecto

Abra su terminal y ejecute el siguiente comando para comenzar:

npx crear-reaccionar-aplicacion reaccionar-contador-aplicacion

Esta voluntad crear una nueva aplicación de reacción, listo para que comiences a construir tu proyecto. Generará una estructura de sistema de archivos con varios archivos y carpetas.

Ejecute el siguiente comando en la terminal para iniciar el servidor de desarrollo:

npm comenzar

Ese comando debería abrir una nueva pestaña en su navegador, apuntando a http://localhost: 3000. Todos los cambios que realice en el proyecto se actualizarán automáticamente aquí.

Paso 2: Creando el Esqueleto de la Aplicación de Contador

Abre el src/Aplicación.js archivo y elimine todo el código predeterminado que está presente allí. Ahora, crea un esqueleto de la aplicación usando el siguiente código:

importar Reaccionar, { estado de uso } de"reaccionar";
funciónaplicación() {
constante [contar, establecerCuenta] = usarEstado(0);
dejar incrementoCuenta = () => {
// Para agregar luego
 };
dejar decrementCount = () => {
// Para agregar luego
 };
dejar restablecerCuenta = () => {
// Para agregar luego
 }


devolver (
<divisiónnombre de la clase="aplicación">
<pag>Contar: {contar}pag>
<divisiónnombre de la clase="botones">
división>
división>
);
}
exportarpor defecto aplicación;

La primera instrucción importa el useState gancho de la reaccionar módulo. Úselo para crear el contar estado e inicializarlo a 0. Puede cambiar el valor de la contar utilizando el establecerCuenta función.

Usarás el incrementoCuenta, decrementCount, y resetCount funciones posteriores para aumentar, disminuir y restablecer el valor del contador.

Puede notar los corchetes { } usados ​​alrededor de la variable de conteo en el marcado. Básicamente, esto le permite al analizador JSX saber que debe tratar el contenido dentro de esas llaves como JavaScript.

Paso 3: agregar la funcionalidad a la aplicación de contador

Debe crear tres botones para implementar la funcionalidad de la aplicación de contador: el botón de conteo decreciente, el botón de conteo de incremento y el botón de reinicio. Agrega el siguiente código dentro del botones división:

<Botóntítulo={"Decremento"} acción={recuento de decrementos} />
<Botóntítulo={"Incremento"} acción={incrementoCuenta} />
<Botóntítulo={"Reiniciar"} acción={resetCount} />

Al hacer clic en estos botones, el decrementCount, incrementoCuenta, y resetCount se ejecutarán las funciones. Tenga en cuenta que está pasando el título y acción apoyos de los padres aplicación componente para el niño Botón componente.

Actualice estas funciones en el Aplicación.js archivo con el siguiente código:

dejar incrementoCuenta = () => {
 setCount (cuenta + 1);
};
dejar decrementCount = () => {
 setCount (cuenta - 1);
};
dejar restablecerCuenta = () => {
 establecerCuenta (0);
}

El establecerCuenta La función actualizará el estado del contar.

Tenga en cuenta que aún no ha creado el componente Botón. Crear un nuevo componentes carpeta en el origen directorio y luego crea un nuevo archivo llamado Botón.js. Es una buena práctica mantener todos los componentes en la misma carpeta.

Agregue el siguiente código en el componentes/Botón.js archivo:

importar Reaccionar de"reaccionar";
funciónBotón(accesorios) {
dejar { acción, título } = accesorios;
devolver<botónal hacer clic={acción}>{título}botón>;
}
exportarpor defecto Botón;

El Botón el componente recibe datos a través de props. Luego, la función desestructura estos accesorios en variables separadas, usándolos para completar el marcado que devuelve.

El código reutiliza este componente tres veces para crear los botones de incremento, disminución y reinicio.

Finalmente, importe el componente Botón en la parte superior de la Aplicación.js página usando el siguiente código:

importar Botón de"./componentes/Botn";

Así es como se verá el código final en el Aplicación.js archivo:

importar Reaccionar, { estado de uso } de"reaccionar";
importar Botón de"./componentes/Botón";
funciónaplicación() {
constante [contar, establecerCuenta] = usarEstado(0);


dejar incrementoCuenta = () => {
 setCount (cuenta + 1);
 };


dejar decrementCount = () => {
 setCount (cuenta - 1);
 };


dejar restablecerCuenta = () => {
 establecerCuenta (0);
 }


devolver (
<divisiónnombre de la clase="aplicación">
<pag>Contar: {contar}pag>
<divisiónnombre de la clase="botones">
<Botóntítulo={"Decremento"} acción={recuento de decrementos} />
<Botóntítulo={"Incremento"} acción={incrementoCuenta} />
<Botóntítulo={"Reiniciar"} acción={resetCount} />
división>
división>
 );
}
exportarpor defecto aplicación;

Siga las mejores prácticas de reacción

Puede escribir código React de diferentes maneras, pero es importante estructurarlo de la manera más limpia posible. Esto asegurará que pueda mantenerlo fácilmente y puede ayudar a mejorar el rendimiento general de su aplicación.

Puede seguir varias prácticas de React recomendadas por la comunidad de React, como evitar el código repetitivo, escribir pruebas para cada componente de React, usar la desestructuración de objetos para accesorios y seguir la denominación convenciones