JSX - Guías de Make it Real

Search…
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.
Primeros pasos
Componentes
Last modified 3yr ago
Copy link
Contents
JSX se transforma en JavaScript
Mezclando código JavaScript
Estilos inline
Eventos del DOM