JSX
JSX (JavaScript XML) es la sintaxis que se utiliza para construir el markup de los componentes de React. Veamos un ejemplo tomado del código que genera create-react-app:
1
<div className="App">
2
<header className="App-header">
3
<img src={logo} className="App-logo" alt="logo" />
4
<h1 className="App-title">Welcome to React</h1>
5
</header>
6
<p className="App-intro">
7
To get started, edit <code>src/App.js</code> and save to reload.
8
</p>
9
</div>
Copied!
JSX es similar a HTML pero con algunas diferencias importantes:
    1.
    Se utiliza className en vez de class para definir las clases de un elemento.
    1
    // mal
    2
    <div class="active"></div>
    3
    4
    // bien
    5
    <div className="active"></div>
    Copied!
    2.
    Todas las etiquetas deben estar cerradas con /> o una etiqueta de cierre.
    1
    // mal
    2
    <img src="...">
    3
    <input type="text">
    4
    5
    // bien
    6
    <img src="..." />
    7
    <input type="text"></input>
    Copied!

JSX se transforma en JavaScript

Por debajo JSX se transforma en código JavaScript. Por ejemplo, el siguiente código JSX
1
<div class="active">Hola Mundo</div>
Copied!
se transforma en el siguiente código JavaScript:
1
React.createElement('div', { className: 'active'}, 'Hola mundo');
Copied!
Puedes utilizar el REPL de Babel para ver en qué se convierte el código JSX que escribes.
La ventaja de JSX es que, como es JavaScript, podemos:
    1.
    Ver algunos errores en tiempo de compilación.
    2.
    Asignar JSX a variables. Por ejemplo:
    1
    const elem = <p>Hola</p>;
    Copied!
    3.
    Retornar JSX desde métodos. Por ejemplo:
    1
    renderText() {
    2
    if (someCondition) {
    3
    return <p>Hola</p>;
    4
    } else {
    5
    return <p>Mundo</p>;
    6
    }
    7
    }
    Copied!
Una restricción de JSX es que siempre debes tener un elemento raíz:
1
// mal
2
const elem = <p>Hola</p><p>Mundo</p>;
3
4
// bien
5
const elem = <div>
6
<p>Hola</p>
7
<p>Mundo</p>
8
</div>;
Copied!
Para no perder la indentación en el último ejemplo podemos utilizar paréntesis para escribir el JSX en una nueva línea:
1
const elem = (
2
<div>
3
<p>Hola</p>
4
<p>Mundo</p>
5
</div>
6
);
Copied!
Este es un patrón muy común en las aplicaciones de React.

Mezclando código JavaScript

Para mezclar código JavaScript en JSX utiliza corchetes ({}):
1
const style = "active";
2
const title = "Hola Mundo";
3
4
<div className={style}>{title}</div>;
Copied!
Una restricción de JSX es que no puedes utilizar if, else, while o for.
Para agregar condicionales utiliza el operador ternario:
1
<div>
2
{condition ? <h1></h1> : null}
3
</div>
Copied!
Para mostrar elementos de un arreglo o un objeto utiliza map:
1
const names = ["Pedro", "Juan", "Germán"];
2
3
const jsx = (
4
<ul>
5
{names.map((name) =>
6
<li>{name}</li>
7
)}
8
</ul>
9
);
Copied!

Estilos inline

Es posible definir y utilizar estilos inline en JSX:
1
let styles = {
2
borderColor: "#999"
3
};
4
5
const jsx = (
6
<div style={styles}>
7
Hola mundo
8
</div>
9
);
Copied!

Eventos del DOM

En JSX se utilizan los eventos estándar del DOM como onclick, onchange, onkeydown, etc. pero utilizando camelCase: onClick, onChange, onKeyDown, etc. Por ejemplo:
1
<button onClick={alert("Hola!")}></button>
Copied!
Fíjate que utilizamos corchetes ({}) para escribir nuestro código JavaScript. También podríamos pasar una función que es invocada cuando se genere el evento:
1
const saluda = () => alert("Hola!");
2
3
<button onClick={saluda}></button>
Copied!
Fíjate que no estamos invocando la función saluda, sólo la estamos pasando para que React la invoque cuando ocurra el evento.
Last modified 3yr ago