JSX : considere el siguiente fragmento de código,
const sample = <h2>Greetings</h2>;
El fragmento de código anterior se parece un poco a HTML, y también usa una variable similar a JavaScript, pero no es HTML ni JavaScript, es JSX. El JSX es básicamente una extensión de sintaxis de JavaScript normal y se usa para crear elementos React. Estos elementos luego se procesan en React DOM. Cada elemento JSX es solo para hacer uso de React easy y para llamar a React.createElement(component, props, …children) con menos trabajo. Por lo tanto, cualquier cosa que se haga con JSX también se puede hacer simplemente con JavaScript.
La mayoría de la gente usa JSX con React, pero eso requiere Babel, que convierte el código ES6 en un código que sea compatible con los navegadores. Significa que necesitamos algo así como un paquete web. Si no usamos JSX, entonces no tenemos que preocuparnos por eso.
Enfoque sin JSX sobre la aplicación React centrada en JSX: es recomendable ceñirse a JSX para sus proyectos medianos o grandes. Todavía ayuda entender lo que sucede debajo del capó. Para proyectos de React más pequeños, en los que no desea agregar un flujo de trabajo de compilación complejo, o para aplicaciones de varias páginas, podría considerar la versión sin JSX.
Ejemplo 1: Usar React sin JSX usando CDN (sin Node). El siguiente es un código Html simple para imprimir Hello World usando React sin JSX.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src=
"https://unpkg.com/react@16/umd/react.development.js">
</script>
<script src=
"https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
var e = React.createElement;
ReactDOM.render(
e('h1', null, 'Hello, world!'),
document.getElementById('root')
);
</script>
</body>
</html>
Producción:
Salida del programa anterior
Ejemplo 2: uso de React sin JSX en la aplicación.
Creando la aplicación React:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app rwjsx
-
Paso 2: después de crear la carpeta de su proyecto, es decir , rwjsx , acceda a ella con el siguiente comando:
cd rwjsx
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Ahora escriba el siguiente código en el archivo index.js en la carpeta src después de todas las declaraciones de importación.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por nikhiltanna33 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA