Components and Props React.js, Manejo de propiedades y componentes en React
Components and Props React, los componentes y propiedades en React representan la base con la que podrás crear potentes e increíbles aplicaciones en esta librería.
Hoy aprenderás a manejar los Componentes de clase (Class Component) y los componentes funcionales (Functional Component), veremos como modificar sus propiedades pasándolas de un componente a otro para manipular el render de nuestra aplicación, no obstante, será en otra clase donde veremos el ciclo de vida.
Recuerda que esta es la tercera clase de mi curso gratuito de React JS, el cual esta disponible en mi canal de YouTube donde te invito a suscribirte para brindarme tu apoyo.
¡No te puedes perder las nuevas clases 🧐!
Suscribirme
by Juan Carlos García
3-Mzo-2023
(4)
Suscribirme al canal:
Tabla de contenido
- 1 ¿Qué vas aprender?
- 2 ¿Qué es un componente en React?
- 3 ¿Por que utilizamos componentes en React?
- 4 Tipos de componentes en React
- 5 Functional Component
- 6 Class Component
- 7 Props, Propiedades en un componente
- 8 Renderizado de componentes
- 9 ¿Cómo se debe nombrar un componente?
- 10 Composición de componentes
- 11 Extracción y división de componentes
¿Qué vas aprender?
En este vídeo aprenderás:
- Manejo de componentes de clases (Class Componentes)
- Manejo de componentes funcionales (Functional Component)
- Manejo de propiedades (Props) en los dos tipos de componentes
- Renderizado de componentes
- Composición y extracción de componentes
- Capitulo anterior: ¿Qué es React JSX?
- Puedes descargar el código de este vídeo aquí en la rama jsx
- O clona todo el repositorio de la siguiente manera con Git
git clone https://github.com/EWebik/react-js.git
¿Qué es un componente en React?
En React un componente es un elemento que acepta parámetros llamados propiedades (props) y retorna una jerarquía de vistas mediante el método render.
¿Por que utilizamos componentes en React?
Bien, utilizamos componentes para indicarle a React que es lo que deseamos ver en pantalla y que si nuestros datos cambian solo actualice el o los componentes en cuestión.
Tipos de componentes en React
En React podemos definir componentes de dos formas principalmente:
- Functional Component o componentes funcionales
- Class Component o componentes de clases
Functional Component
Este tipo es la forma más sencilla en que podemos definir un componente en React, ya que utilizamos funciones tal y como lo haríamos en JavaScript.
Bien, para que una función se convierta en Functional Component, debe cumplirse que:
- Solo debe aceptar un argumento "props" el cual se origina como propiedades.
- Debe retornar un elemento de React (estos elementos los vimos en la clase de JSX)
Ejemplo de componente funcional
//Componentes funcionales
function Padre(props){
return(
<div className="padre">
<h1>{"Componente Padre"}</h1>
<div className="componentes">
<div className="componente">
<h2>{"Hijo 1"}</h2>
<p>{"Contador"}</p>
<p>{"1"}</p>
</div>
<div className="componente">
<h2>{"Hijo 2"}</h2>
<p>{"Contador"}</p>
<p>{"1"}</p>
</div>
</div>
</div>
);
}
Suscribirme
Gracias por tu calificación
(4)
Categorías
Class Component
Otra de las formas es utilizar ES6 o ECMAScript 6, la cual nos permite utilizar programación orientada a objetos (POO) para definir un componente.
En lo personal me gusta mucho más trabajar con esta sintaxis, no obstante, dado que en la mayoría de los proyectos con React se trabaja bajo una lógica funcional, las componentes funcionales cada vez toman más fuerza, además de que, a muchos desarrolladores se les complica mucho comprender la POO.
Para que una clase se considere componente en React, mínimo debe:
- Extender de la clase React.Component
- Debe contar con un método de nombre render el cual debe retornar un elemento de React.
Ejemplo de un componente de clases
// Componentes de clases y ECMAScript 6
class Hijo1 extends React.Component{
render(){
return(
<div className="componente">
<h2>{"Hijo 1"}</h2>
<p>{"Contador"}</p>
<p>{"1"}</p>
</div>
);
}
}
Props, Propiedades en un componente
Bien, ya hemos visto que existen dos tipos de componentes, ahora, sin importar el tipo, ambos pueden y son capaces de manejar propiedades, por ejemplo:
- En un componente funcional las propiedades son pasadas como un único argumento.
- Mientras que en un componente de clases se accede a ellas a través de su variable de contexto this.
Bien, en cualquiera de ambos casos de debe cumplir que las propiedades son de solo lectura, ¿Qué quiere decir esto?
Las props se deben considerar como solo lectura
Para entender esto, veamos un ejemplo que viene incluso en la misma documentación de React, la cual es muy buena y te recomiendo que revises.
Si tenemos una función que obtiene la suma de dos variables.
function suma(a,b){
return a+b;
}
La función anterior se considera una "función pura" ya que no altera sus propiedades de entrada, que en este caso es "a" y "b".
Y siempre devolverá el mismo resultado para las mismas entradas.
Ahora si tenemos:
function retirarCantidad(cuenta, cantidad){
cuenta.total -= cantidad;
}
Bien, aquí tenemos un función no pura que otras literaturas encontrarás como "impura", realmente es lo mismo.
Pero se llama así por que altera sus propiedades de entrada.
Aquí tenemos una restricción que React establece y que se debería de cumplir.
Los componentes en React deben comportarse como funciones puras respecto a sus propiedades (props).
Y seguramente me preguntarás, entonces ¿Cómo cambio el aspecto o controlo mi componente si no puedo alterar sus propiedades?
Ok, para ello mas adelante te enseñare a manipular el State en los componentes, con lo cual podrás actualizar y modificar el comportamiento de cada componente, así que suscríbete a mi canal y al boletín, para que te enteres cuando suba esa clase.
Así se vería un componente utilizando propiedades
function Hijo2 (props){
return(
<div className="componente">
<h2>{props.titulo}</h2>
<p>{props.subtitulo}</p>
<p>{props.cuenta}</p>
</div>
);
}
Suscribirme
Gracias por tu calificación
(4)
Categorías
Renderizado de componentes
Para renderizar un componente en la Dom de nuestra página lo haremos prácticamente igual que como lo hicimos en la clase de JSX.
Es decir, utilizaremos ReactDOM.render pero en vez de pasar un elemento, pasaremos un componente, por ejemplo:
ReactDOM.render(
<Padre1 {...propiedades} />,
document.getElementById('root')
);
Lo que hacemos en forma general con el código anterior es:
- A ReactDOM.render, le pasamos un elemento de React
- Dicho elemento se conforma de un componente el cual se le pasan ciertas propiedades
- El componente devuelve un elemento de React
- React DOM actualiza de forma eficiente el DOM de nuestra página, montando nuestro componente.
Los componentes contienen otras características como el ciclo de vida y el state, que veremos más adelante, a continuación, veremos el manejo de propiedades y la interacción entre ellos.
¿Cómo se debe nombrar un componente?
Esto es fácil, para que React reconozca a un componente como tal y no lance ninguna advertencia, el componente debe estar capitalizado, es decir, su nombre debe empezar con una mayúscula.
De lo contrario, lo tomará como un elemento o etiqueta de la DOM, ya sea un div, párrafo, imagen, etc.
Composición de componentes
La composición nos indica que la salida de un componente puede estar compuesta de uno o mas componentes, los cuales pueden ser el mismo componente o diferentes.
La composición es realmente como se trabaja en React, ya que como por lo regular solo llamamos a React DOM, una única vez, montando el componente principal, el cual esta compuesto de sub componentes que cumplen con cierta funcionalidad en especifico.
function Padre(props){
return(
<div className="padre">
<h1>{"Componente Padre"}</h1>
<div className="componentes">
<Hijo1 {...props.hijo1} />
<Hijo2 {...props.hijo2} />
</div>
</div>
);
}
Extracción y división de componentes
En lo personal siempre me ha gustado ver a la programación en forma modular, quizá sea por que estudie electrónica y para el diseño electrónico la modularidad es vital para bajar la complejidad en un circuito.
En React sucede algo similar, te recomiendo que un Componente complejo lo dividas en componentes más pequeños que reduzcan el nivel de complejidad y así te sea más fácil manipular y controlar su funcionalidad, por ejemplo:
class Hijo1 extends React.Component{
render(){
return(
<div className="componente">
<h2>{"Hijo 1"}</h2>
<p>{"Contador"}</p>
<p>{"1"}</p>
</div>
);
}
}
function Hijo2 (props){
return(
<div className="componente">
<h2>{"Hijo 2"}</h2>
<p>{"Contador"}</p>
<p>{"1"}</p>
</div>
);
}
Excelente ¿Qué te a parecido esta clase? La comunicación entre componentes es el mayor reto a vencer en React.js, pero una vez que comprendes esto, React se vuelve muy fácil, nos vemos en el siguiente post.
Suscribirme
Gracias por tu calificación
(4)
Categorías
🧐 Autoevaluación: Componentes y propiedades
¿Qué son los componentes en React JS?
¿Cómo funcionan los componentes en React?
¿Cuáles son los tipos de componentes en React.sj que existen?
Juan Carlos García
Desarrollador de software
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.