Yo uso reaccionar y jsx. mi pregunta es ¿cómo jsx es una sintaxis js válida? La única forma en que creo que tal vez sea cierto es que reaccionar compila todo el archivo y convierte jsx (s) en js válido. como lo que hace el preprocesador C con las macros. ¿es verdad? y si es cierto, ¿es correcto que consideremos reaccionar como biblioteca js? Creo que es el nivel más alto de una biblioteca.
si No, ¿quién lo hace?
JSX es solo azúcar sintáctico sobre las llamadas de función de React.createElement , Babel lo transpila.
Como desarrollador, es posible que no le guste la forma en que se crean los elementos de reacción, por lo que el equipo de React proporcionó la sintaxis JSX y es muy fácil y puede correlacionarse con HTML.
Nadie te impide usar React.createElement . Pero eso hará que tu código esté sobrehinchado.
Solo tome un caso en el que haya decidido usar Raw React y terminaría como se muestra a continuación.
const list = React.createElement('div', {}, React.createElement('h1', {}, 'My favorite ice cream flavors'), React.createElement('ul', {}, [ React.createElement('li', { className: 'brown' }, 'Chocolate'), React.createElement('li', { className: 'white' }, 'Vanilla'), React.createElement('li', { className: 'yellow' }, 'Banana') ] ) );El código anterior funcionará como se esperaba, pero tiene algunas limitaciones:
Después de usar la sintaxis JSX, no tendrá estos problemas como puede ver a continuación usando JSX.
<div> <h1>My favorite ice cream flavors</h1> <ul> <li className="brown">Chocolate</li> <li className="white">Vanilla</li> <li className="yellow">Banana</li> </ul> </div> Puedes verlo en babeljs.io
Si su componente es
import "./styles.css"; export default function App() { return ( <div> <h1>Hello word</h1> <h2>I'm learning React</h2> </div> ); }luego se transpilará a
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = App; require("./styles.css"); function App() { return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello word"), /*#__PURE__*/React.createElement("h2", null, "I'm learning React")); }JSX not es un JavaScript válido.
JSX es similar a JavaScript. Un compilador Babel convierte el código JSX en un código JavaScript significativo. Con un compilador JSX, puede transformar expresiones JSX en llamadas a React.createElement
JSX:
<p style={{color:'#000', background:'blue'}}>This is JSX</p>JavaScript compilado:
"use strict"; /*#__PURE__*/ React.createElement("p", { style: { color: '#000', background: 'blue' } }, "This is JSX");Puedes seguir el juego para ver la compilación del tiempo de ejecución aquí