Question

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

Answer 1

JS是标准的javascript，JSX是一种类似HTML的语法，您可以使用React（理论上）使其更容易，更直观地创建React组件。 As the docs say，唯一的目的是让创建React组件更容易......那里没有其他的东西。如果没有JSX，使用JS语法创建大型嵌套HTML文档将是后方的巨大痛苦; JSX只是简化了这个过程。

Answer 2

使用JSX编译器，您可以将JSX表达式转换为对React.createElement的调用。这是一种更方便的方法来实现以前使用内联HTML文件作为SCRIPT标记实现的内容，实际上，还有其他JSX编译器未绑定到React。

为了给你一个明确的例子，请尝试查看以下JSX代码，因为它通过Babel编译为JS：

import React from 'react';

var Foo = React.createClass({
  render() {
    return (
      <div>
        <p>
          Ad postea vocent equidem.
        </p>
      </div>
    );
  }
});

Answer 3

JSX是ECMAScript的类似XML的语法扩展，并不一定与React绑定。 React只是转换器，它将JSX树变成有效的JavaScript。还有像React这样的其他转换器也有JSX语法，JSXDom和MercuryJSX。 JSX不符合任何XML或HTML规范，或者无论如何都是ECMAScript的一部分，并且是在Facebook上发明的。

JSX背后的理由是，Facebook希望有一种类型的语法扩展，开发人员可以通过清晰简洁的规范来支持，并希望最小化另一种语言＆＃34;。

Answer 4

JavaScript 就像任何普通的编程语言一样，没有任何额外的库或框架。它也可以称为纯 JavaScript。

另一方面，JSX 是 JavaScript 中的语法糖，语法糖是编程语言中的一种语法，旨在使事情更容易阅读或表达。 JSX 主要用于 JavaScript 以及诸如 ReactJS 或 ReactNative 之类的库/框架支持。

JSX 示例

使用 JSX 编写的组件：

const MyComponent = () => { 
  return <div> 
    <p>This is not HTML...!</p> 
    <p>Wait...Is this JavaScript?</p> 
    <p>No, What the hell is this?</p> 
    <p>This is JSX.</p> 
  </div> 
}

如果我们不想使用 JXS，那么上面代码片段的相应代码将如下所示。

const MyComponent = () => { 
  return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX.")); 
};

阅读：

Syntactic sugar - Wikipedia

Introducing JSX – React

Answer 5

默认情况下，每种JSX语法都会转换为JS函数调用，即更改为Javascript。

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

示例：

JSX代码：

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

等效的JS代码：

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

您可以签出Babel is a JavaScript compiler.，在“预设”选项中选择“反应”以查看实际结果。

Answer 6

JSX 更适合用 ReactJS 编写 HTML 代码

JS 是普通的 JavaScript

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

6 个答案: