¿Qué son las props y el estado en React?

¿Qué son las props y el estado en React?

• Props (Propiedades): Las props son objetos que contienen datos que se pasan de un componente padre a un componente hijo en React. Son inmutables y se utilizan para enviar datos de un componente a otro. Las props son pasadas como argumentos a los componentes y se acceden dentro del componente a través del objeto props.

• Estado: El estado es un objeto que contiene datos que son administrados dentro de un componente en React. A diferencia de las props, el estado es mutable y se utiliza para almacenar información que puede cambiar durante el ciclo de vida del componente. El estado se inicializa en el constructor del componente y se actualiza mediante el método setState().

Diferencias entre props y estado

1. Naturaleza: Las props son inmutables, lo que significa que no pueden ser modificadas directamente por el componente hijo. El estado, por otro lado, es mutable y puede ser modificado por el componente que lo posee utilizando el método setState().

2. Pasaje de datos: Las props se pasan de arriba hacia abajo en la jerarquía de componentes, es decir, de un componente padre a un componente hijo. El estado se mantiene local al componente y no se pasa automáticamente a otros componentes. Sin embargo, el estado puede ser pasado como props a componentes hijos si es necesario.

3. Alcance: Las props son accesibles como propiedades del objeto props dentro de un componente y pueden ser utilizadas para mostrar datos o configurar el comportamiento del componente. El estado es accesible como propiedad del objeto state dentro de un componente de clase o mediante el hook useState en componentes funcionales.

Importancia de props y estado en el desarrollo de aplicaciones React

• Modularidad y reutilización: El uso de props y estado en React promueve la modularidad y la reutilización de componentes. Las props permiten pasar datos de un componente a otro de manera eficiente, lo que facilita la creación de componentes reutilizables.

• Gestión de la información: El estado permite a los componentes de React gestionar la información dinámica y mantenerla actualizada durante el ciclo de vida de la aplicación. Esto es crucial para crear aplicaciones interactivas y dinámicas.

• Reactividad y rendimiento: Gracias al uso del estado y las props, React puede actualizar eficientemente la interfaz de usuario en respuesta a cambios en los datos o interacciones del usuario. Esto proporciona una experiencia de usuario fluida y sensible.

Ejemplo práctico

Abre Visual Studio Code (o el IDE donde trabajes) y crea un nuevo proyecto de React utilizando create-react-app. Puedes hacerlo abriendo una nueva terminal dentro de Visual Studio Code y ejecutando los siguientes comandos:

                    npx create-react-app mi-aplicacion-react
                    cd mi-aplicacion-react

Esto creará una nueva carpeta llamada mi-aplicacion-react y configurará un proyecto de React dentro de ella. Asegúrate de que tienes una carpeta llamada 'npm' en C:\Users\TU-USUARIO\AppData\Roaming

Editar el archivo App.js:

Dentro del proyecto abierto en Visual Studio Code, navega hasta la carpeta src y abre el archivo App.js en el editor. Coloca el siguiente código:

import React from 'react';
import './App.css'; // Importar el archivo de estilos

const BtnContador = ({ buttonText }) => {
  const [counter, setCounter] = React.useState(0);
  return (
    <div className="button-container">
      <button className='button' onClick={() => setCounter(prev => prev + 1)}>
        {buttonText} {counter}
      </button>
    </div>
  );
};

function App() {
  return (
    <div className="App-header">
      <BtnContador buttonText="Clics totales:" />
    </div>
  );
}
export default App;

Edita el archivo App.css

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: rgb(255, 255, 255);
}
.button-container {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  height: 100vh; /* Ajusta la altura al 100% del viewport */
}
.button {
  background-color: transparent; /* Fondo transparente */
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid rgb(255, 255, 255);
  cursor: pointer;
  transition: transform 0.3s ease; /* Transición suave */
}
.button:hover {
  transform: scale(1.1);
}

Resultado