Conceptos en React
Componente:
Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.
Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y retornan elementos de React que describen lo que debe aparecer en la pantalla.
Componentes funcionales y de clase:
Una forma de crear un componente es hacerlo utilizando una clase de ES6 para definirlo:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Observen que class extiende la clase React.Component, y además un componente siempre comienza con Mayúscula. El elemento h1 es regresado para renderizar en el DOM. Si fuera necesario, la class también puede recibir parámetros.
La forma de hacer lo mismo, tal vez más sencillo, es definir un componente como una función de JavaScript:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React. Llamamos a dichos componentes “funcionales” porque literalmente son funciones JavaScript.
Los dos componentes anteriores son equivalentes desde el punto de vista de React, aunque es recomendable pensar todo como componentes funcionales.
Renderizando un componente:
Anteriormente, sólo encontramos elementos de React que representan las etiquetas del DOM (equivalentes de etiquetas HTML):
const element = <div> </div>;
Sin embargo, los elementos también pueden representar componentes definidos por el usuario:
const element = <Welcome name="Sara" />;
Cuando React ve un elemento representando un componente definido por el usuario, pasa atributos JSX e hijos a este componente como un solo objeto. Llamamos a este objeto “props”.
Por ejemplo, este código muestra “Hello, Sara” en la página:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;root.render(element);
Observe nuevamente como un componente creado por el usuario comienza con mayúscula, y sino es una etiqueta HTML.
Las props son de solo lectura:
Ya sea que declares un componente como una función o como una clase, este nunca debe modificar sus props. Considera esta función sum :
function sum(a, b) {
return a + b;
}
Tales funciones son llamadas “puras” porque no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas.
En contraste, esta función es impura porque cambia su propia entrada:
function withdraw(account, amount) {
account.total -= amount;
}
React es bastante flexible pero tiene una sola regla estricta:
Todos los componentes de React deben actuar como funciones puras con respecto a sus props.
Por supuesto, las interfaces de usuario de las aplicaciones son dinámicas y cambian con el tiempo. Para ello introduciremos el concepto de “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, sin violar esta regla.
¿Qué son los estados?
Un estado en React es un almacén de datos mutable de componentes y que además son autónomos. O sea, el estado pertenece una clase autónoma que cualquiera pueda importar y usar en su aplicación.
Las propiedades y los estados son ambos atributos de una clase, por eso puedes utilizar this.state y/o this.pros, pero tienen propósitos diferentes: mientras las propiedades son inmutables, los valores de los estados pueden cambiar. Son mutables.
Los valores de las propiedades los pasas de padres a hijos y los valores de los estados los defines en el componente, no se inician en el componente padre, y ni puedes llamar setState() en el render().
Para acceder al estado, debes hacerlo por el nombre del estado, que es una propiedad de objeto del objeto this.state. Algo muy parecido a como hacías con las propiedades. this.state.valorCampo (en las propiedades harías this.props.varlorCampo).
Una forma simple de hacer esto es utilizando unas funciones muy particupales de React que son los HOOKS, para esto hay un apartado especial a continuación
