Looking for reactjs Answers? Try Ask4KnowledgeBase
Looking for reactjs Keywords? Try Ask4Keywords

ReactJSX


Observaciones

JSX es un paso de preprocesador que agrega sintaxis XML a JavaScript. Definitivamente, puedes usar React sin JSX, pero JSX hace que React sea mucho más elegante.

Al igual que XML, las etiquetas JSX tienen un nombre de etiqueta, atributos e hijos. Si un valor de atributo se incluye entre comillas, el valor es una cadena. De lo contrario, ajuste el valor entre llaves y el valor es la expresión de JavaScript incluida.

Fundamentalmente, JSX solo proporciona azúcar sintáctica para la función React.createElement(component, props, ...children) .

Por lo tanto, el siguiente código JSX:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

Compila hasta el siguiente código de JavaScript:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

En conclusión, tenga en cuenta que la siguiente línea en JSX no es una cadena ni HTML :

const element = <h1>Hello, world!</h1>;

Se llama JSX y es una extensión de sintaxis para JavaScript . JSX puede recordarle un lenguaje de plantilla, pero viene con todo el poder de JavaScript.

El equipo de React dice en sus documentos que recomiendan usarlo para describir cómo debería ser la interfaz de usuario.

JSX Ejemplos relacionados