React es una librería JavaScript que nos permite crear interfaces de usuario en el proceso de desarrollar aplicaciones de una sola página. Estas aplicaciones también son conocidas como SPA, pues esta es la sigla de su nombre en inglés: single page application. Dentro de React, existen dos tipos de objetos principales: los elementos y los componentes. En este post, te enseñaremos qué son y cómo funcionan los componentes en React.
Antes de empezar con los componentes en React
En comparación a los elementos, los componentes en React tienen una lógica más diferente y compleja. Por ello, para enseñarte qué son los componentes en React, utilizaremos un ejemplo más práctico. Supongamos que tenemos el siguiente elemento, que, aunque hemos creado con una línea de código JSX, podríamos haber creado tranquilamente con el comando react.create element:
<script type = "text/label">
const rootElement = document.getElementById ('root');
const helloWorld = <span> Hello World </span>;
const goodbyeWorld =span> Goodbye World </span>;
const element = (
<div className = 'container'>
{helloWorld}
{goodbyeWorld}
</div>
);
</script>En las líneas de código anteriores, hemos creado un elemento script dentro del cual hemos creado tres constantes. La constante rootElement cumple el único propósito de guardar el ID ‘root’ del elemento. Por su parte, las constantes helloWorld y goodbyeWorld guardan spans con un mensaje similar a su nombre.
Entonces, supongamos que queremos crear más spans con mensajes específicos. Hacer el mismo proceso de crear una constante en la que guardamos un span con un texto puede volverse tedioso. Por ello, podríamos crear una función en la que pasamos un texto y el programa nos devuelve el texto contenido dentro de un span.
A continuación, te mostramos cómo utilizamos los componentes en React para crear esta función:
<script type = "text/label">
const rootElement = document.getElementById ('root');
const Message = props => <span> {props.msg} </span>
const element = (
<div className = 'container'>
< Message msg = "Hello World" />
< Message msg = "Goodbye World"/>
</div>
);
</script>En las líneas de código anteriores, hemos creado una nueva constante Message. Esta constante es realmente un component de tipo función que coge el objeto props de un elemento y hace que su propiedad msg se encierre dentro de un span. Luego, hemos definido un elemento element, en el que hemos insertado los componentes Message, cada uno con un msg igualado a mensajes distintos. Estos serán los pasados por la función Message.
No olvides que, para que un componente sea renderizado por ReactDOM, debes asegurarte de que su nombre está escrito con la primera letra en mayúsculas. De esta manera, cuando React.createElement quiere crear un elemento para pasárselo a ReactDOM, puede distinguir entre un elemento nativo o puro del DOM, como lo sería un div, y un elemento que nosotros hemos creado.
¿Qué son los componentes en React?
¿Conoces la diferencia entre componente y elemento en React?
Como has podido ver en el ejemplo anterior, los componentes en React son funciones que reciben el objeto de propiedades props como parámetro y devuelven elementos React.
Entonces, podemos utilizar las propiedades que conforman el objeto props para ejecutar acciones automáticas. En el ejemplo anterior, las usamos para acceder a un texto msg y transformarlo en un span con dicho texto.
Hay dos tipos de componentes en React:
- Por un lado, existen los componentes de tipo función como el ejemplo anterior, que se escriben así:
const Welcome = (props) => <div>Hello, {props.name} </div>;
- Por otro lado, existen los componentes de tipo clase que se escriben de la siguiente manera:
// ¿qué son clases en react?
class Welcome extends React.Component {
render () {
return (<div>Hello, {this.props.name}</div>);
}
}Como puedes ver en las anteriores líneas de código, para acceder a una propiedad del objeto props en un componente tipo clase deberás utilizar el comando this. Este comando tiene el mismo sentido que en JavaScript, por lo que te recomendamos leer nuestro post sobre qué es this en JavaScript para conocer más sobre él. Además, todo componente tipo clase debe tener una función de tipo render, que básicamente nos define qué se va a renderizar en pantalla. Dentro de esta función es donde insertamos nuestro return.
En la práctica, utilizaremos mucho más a menudo el formato de componentes en React tipo función. Con este método, no solo nos ahorramos líneas de código, sino que también evitamos lidiar con this, un comando que no siempre es tan específico como queremos.
Ahora que sabes qué son y cómo funcionan los componentes en React, estás más cerca de dominar esta gran herramienta de programación. Desde KeepCoding, te invitamos a seguir aprendiendo con nosotros sobre esta y otras herramientas en nuestro Desarrollo Web Full Stack Bootcamp. Allí, entre muchas otras cosas, aprenderás a dominar JavaScript, React, CSS y HTML, convirtiéndote en un experto del desarrollo web en pocos meses. ¡Anímate a matricularte!
