Ejemplo de React.createElement
//Elemento tipo parrafo
var p = React.createElement('p', {
className: 'style-parrafo'
},"Curso de React JS by EWebik");
//Contendor
var container = React.createElement('div', {
className: 'container'
}, p);
El código anterior tendría una salida HTML de la siguiente manera:
<div class="container">
<p class="style-parrafo">Curso de React JS by EWebik</p>
</div>
Excelente no, pero ahora imagina ¿Cuántos párrafos o elementos tiene una página web?
El estar usando React.createElement sería muy complicado, para ello utilizamos JSX y definimos una estructura HTML dentro de JavaScript, solo debemos tener cuidado con algunos aspectos que veremos más adelante.
Sintaxis JSX, reemplazando a React.createElement
En el ejemplo anterior definimos un div y un párrafo, ahora si aplicáramos la sintaxis JSX quedaría de la siguiente manera.
//Elemento creado con JSX
var div = (
<div className="container">
<p className="style-parrafo">Curso de React JS by EWebik</p>
</div>
);
//Nodo donde montaremos nuestro elemento creado con JSX
ReactDOM.render(div,document.getElementById('idRoot'));
Como puedes observar la sintaxis JSX es muy parecida a la salida de HTML que vimos anteriormente, pero class es reemplazado por className.
Esto se debe a que class es una palabra reservada de JavaScript y por lo tanto debemos cambiarla en JSX, también encontraremos otras palabras que estaré subiendo y actualizando constantemente, si es que no ya las he subido.
Los componentes personalizados deben ser capitalizados
Existen dos tipos de elementos:
- Aquellos que inician con una letra minúscula, estos elementos dan como resultado por lo regular etiquetas HTML, como párrafos (p), imágenes (img), etc.
- Ahora, los tipos que inician con una letra mayúsculas, son elementos por lo regular creados en una sintaxis JSX, por lo tanto, si tienes un elemento con una letra minúscula, debes asignarlo a una letra mayúscula antes de renderearlo en la DOM.
Por ejemplo:
import React from 'react';
//Elemento personalizado con la primera letra en mayúscula es decir Capitalizado
function HolaEwebik(props){
return <p>{props.texto}</p>;
}
//Agregando elemento personalizado dentro de otro
function Contenedor(){
return <HolaEwebik texto="Curso React JS EWebik" />;
}
Props en JSX
En el ejemplo anterior introduje una palabra props, a esto se le conoce como propiedades, esto quiere decir que podemos pasar valores de un elemento a otro, a través del uso de las props en JSX.
Esto es bastante sencillo de hacer y lo haremos casi igual a como se hace en HTML, por ejemplo, en el código anterior creamos la propiedad texto y se le pasamos al elemento "HolaEwebik":
//Agregando elemento personalizado dentro de otro
function Contenedor(){
return <HolaEwebik texto="Curso React JS EWebik" />;
}
Y para recuperar el valor de la propiedad lo veremos a continuación.
¿Cómo agregar expresiones de JavaScript en JSX?
Podemos pasar cualquier expresión de JavaScript dentro de la sintaxis JSX, a través de llaves
{}
Tal y como vimos en nuestro ejemplo anterior:
//Elemento personalizado con la primera letra en mayúscula es decir Capitalizado
function HolaEwebik(props){
return <p>{props.texto}</p>;
}
Donde pasamos la propiedad texto con el valor "Curso React JS EWebik" Y entre llaves invocamos la propiedad para obtener el valor.
Pero también podríamos pasar, funciones, variables, y operaciones, por ejemplo:
<MiComponente propiedad={()=>{ return 1 + 1; }} />
Operadores Spread
Utilizando la sintaxis Spread podemos heredar propiedades entre componentes o pasar en una sola linea toda una serie de propiedades que podremos recuperar en otros elementos.
function Elemento1 (props){
return (
<div>
<p>{"Titulo: " + props.titulo}</p>
<p>{"Capitulo: " + props.capitulo}</p>
</div>
);
}
function Elemento(){
const props = {titulo:"Curso React JS EWebik", capitulo:"Introducción a JSX"};
return <Elemento1 {...props} />;
}
Todavía existen muchas más cosas que nos permite hacer JSX, pero eso le iremos viendo en otros vídeos con ejemplo y centrándonos en cada uno de ellos, por ejemplo:
- Veremos condicionales
- Ciclos
- Etc.
Espero que esta segunda clase te haya gustado y hayas aprendido los fundamentos de JSX, te aseguro que las próximas clases te van a fascinar, nos vemos en el siguiente post.
