javascript - JSX 是什么？它在 React 中到底做了什么？

Question

我真的需要知道 JSX 是什么以及它在下面的 React 代码中到底在做什么。

这是我在 src/index.js 文件中编写的 react 代码。

const greetDate = () => {
    const getDate = new Date();
    return getDate.toDateString();
}

const greeting = <h1> Hello World. Now current time is {greetDate()}.</h1>
ReactDOM.render(greeting, document.getElementById('root'));
registerServiceWorker();

Answer 1

什么是 JSX？ 答案是 here

来自官方文档的总结:

...JSX 可能会让您想起模板语言，但它具有 JavaScript 的全部功能。 ...JSX 生成 React“元素”。

这段代码不是jsx:

const greetDate = () => {
    const getDate = new Date();
    return getDate.toDateString();
}

前面的代码只是 javascript ES6 语法。

这是 jsx:

const greeting = <h1> Hello World. Now current time is {greetDate()}.</h1>
ReactDOM.render(greeting, document.getElementById('root'));

并将被转译为:

var greeting = React.createElement(
    'h1',
    null,
    ' Hello World. Now current time is ',
    greetDate(),
    '.'
);
ReactDOM.render(greeting, document.getElementById('root'));

转到BabelJS，并将您的代码粘贴到左侧面板中，您将在右侧看到结果:https://babeljs.io/en/repl