reaccionar JS

mientras construye una aplicación usando React, puede crear los componentes/vistas de dos maneras

• usando objetos y métodos estándar de React

• usando JSX

JSX

• JSX es una tecnología separada de React y completamente opcional al crear la aplicación React, sin embargo, hace la vida mucho más fácil cuando combina JSX con React.

Veamos cómo:

Enfoque 1: modo React estándar

 (function() { var element = React.DOM.div({}, "Hello World"); ReactDOM.render(element, document.getElementById("app")); })();

El código anterior se puede encontrar en este enlace .

Aquí, solo necesita incluir la biblioteca react y react-dom en su página. No se requiere nada más. Sin JSX, sin Babel.

Enfoque 2: forma JSX

 (function() { var HelloWorld = React.createClass({ render : function() { return ( <div> Hello World </div> ); } }); var element = React.createElement(HelloWorld, {}); ReactDOM.render(element, document.getElementById("app")); })();

El código anterior se puede encontrar en este enlace .

Note la diferencia aquí: <div> Hello World </div> se usa dentro de JavaScript. Esto se llama sintaxis JSX.

Ahora, compare el enfoque JSX con el enfoque estándar de JavaScript:

Con JSX, puede agregar muchos más elementos similares a HTML en línea, al igual que HTML estándar, para crear la capa de vista.

Sin JSX, el código puede complicarse debido a las múltiples capas de elementos necesarios para crear HTML en JavaScript.

Babel

Ahora la pregunta es, ¿quién entiende JSX?. Aquí necesitamos un transpilador que comprenda JSX y lo convierta a un formato que pueda ejecutarse en el navegador. Babel hace precisamente este trabajo.

Transpilar

La transpilación se puede hacer de dos maneras.

1. Transpilación basada en navegador/del lado del cliente (uso solo para fines de desarrollo)

   • incluir este archivo como una etiqueta de secuencia de comandos
   • use type="text/babel" en su etiqueta de script que carga su JSX

Aquí está el código de muestra

2. Transpilación basada en servidor, por ejemplo, Babel

Puede usar diferentes herramientas como webpack, etc.

Aquí hay un código de muestra .

Espero que esto ayude.

tl;dr;

JSX es una sintaxis sencilla para representar marcas en su código, que Babel convierte en JavaScript puro.

Versión larga:

JSX es una convención sintáctica que tiene como objetivo facilitar la definición de la estructura de los elementos en el código de un componente React. Esta sintaxis similar a XHTML que escribe dentro de sus componentes se convierte en JavaScript (no muy diferente de Hyperscript ) por Babel.

Un componente Hello World muy simple escrito en JSX:

 class HelloWorld extends Component{ render(){ return <div><h1>Hello World!</h1></div> } }

Y el equivalente en JavaScript puro:

 class HelloWorld extends Component{ render(){ return React.createElement( "div", null, React.createElement( "h1", null, "Hello World!" ) ); } }

Tenga en cuenta que el ejemplo anterior está abreviado para mantener el enfoque en la parte JSX.

Pronto aprendería que Babel en realidad le da mucho más poder al mundo React que la mera transpilación JSX. Le permite usar muchas características nuevas y geniales de ES6/7 ahora mismo.