Noticias

Mirela Rivera

Presentando JSX

Se llama JSX, y es una extensión de la sintaxis de JavaScript.

Mirela Rivera
Presentando JSX

Navegación interior

Puedes consultar esta pàgina, vuelve a la pàgina de inicio o al archivo.

¿Por qué JSX?

React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización.

Articulo 1 - Imagen

En lugar de separar artificialmente tecnologías poniendo el maquetado y la lógica en archivos separados, React separa intereses con unidades ligeramente acopladas llamadas “componentes” que contienen ambas. Volveremos a los componentes en otra sección, pero si aún no te sientes cómodo maquetando en JS, esta charla podría convencerte de lo contrario.

Con eso fuera del camino, ¡empecemos!

Advertencia:

Dado que JSX es más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura camelCase en vez de nombres de atributos HTML.

Por ejemplo, class se vuelve className en JSX, y tabindex se vuelve tabIndex.

Esta curiosa sintaxis de etiquetas no es ni un string ni HTML.

jsx
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Después de compilarse, las expresiones JSX se convierten en llamadas a funciones JavaScript regulares y se evalúan en objetos JavaScript.

  1. Declarativo

    1. React te ayuda a crear interfaces de usuario interactivas de forma sencilla.

    2. Diseña vistas simples para cada estado en tu aplicación.

    3. Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.

  2. Basado en componentes

  3. Aprende una vez, escríbelo donde sea.

  • Un componente simple

    • Los componentes de React implementan un método llamado render.

    • Este ejemplo utiliza una sintaxis similar a XML llamada JSX.

    • JSX es opcional y no es requerido para usar React.

  • Un componente con estado

  • Una aplicación

Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.


Insertando expresiones en JSX

En el ejemplo a continuación, declaramos una variable llamada name y luego la usamos dentro del JSX envolviéndola dentro de llaves:

Puedes poner cualquier expresión de JavaScript dentro de llaves en JSX. Por ejemplo, 2 + 2, user.firstName, o formatName(user) son todas expresiones válidas de Javascript.

Desarrollado con React, Gatsby y DatoCMS por @smastrom

Contribuir o dar me gusta en GitHub