React初学者对JavaScript和JSX之间的区别感到困惑

Question

我是React的新手,我发现大多数教程都谈到了JSX,我还没有学过任何JSX语法,但我想知道React中JavaScript和JSX之间的主要用法差异是否仅仅是类似于HTML的语法？或者还有什么值得注意的？

Answer 1

JS是标准的javascript,JSX是一种类似HTML的语法,你可以使用React(理论上)使创建React组件变得更容易和更直观.正如文档所说,唯一的目的是让创建React组件更容易......那里没有其他的东西.如果没有JSX,使用JS语法创建大型嵌套HTML文档将是后方的巨大痛苦; JSX简化了这个过程.

Answer 2

默认情况下，每个 JSX 语法都会变成 JS 函数调用，即更改为 Javascript。

JSX 有助于编写更简单、更简洁的代码。

例子：

JSX代码：

const App = () => {
    return <div>Hello world!</div>
}

等效的 JS 代码：

const App = () => {
  return React.createElement("div", null, "Hello world!");
};

你可以看看Babel 是一个 JavaScript 编译器。，在预设选项中选择 react 以查看每行的实际结果。