JS 是标准的 javascript，JSX 是一种类似于 HTML 的语法，你可以将它与 React 一起使用（理论上）使创建 React 组件变得更容易和更直观。正如文档所说，唯一的目的是让创建 React 组件变得更容易……除此之外别无他物。如果没有 JSX，使用 JS 语法创建大型、嵌套的 HTML 文档将是一个很大的麻烦；JSX 只是让这个过程更容易。

默认情况下，每个 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 以查看每行的实际结果。

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

为了给您一个清晰的示例，请尝试查看以下 JSX 代码，因为它是通过Babel编译为 JS 的：

import React from 'react';

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

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.")); 
}; 

阅读：

语法糖 - 维基百科

介绍 JSX – React

JSX是 ECMAScript 的类似于 XML 的语法扩展，完全不必与 React 绑定。React 只是转译器，是将 JSX 树转换为有效 JavaScript 的引擎。还有其他转译器，如 React，也有 JSX 语法，JSXDom和MercuryJSX。JSX 不符合任何 XML 或 HTML 规范，或者无论如何都是 ECMAScript 的一部分，并且是在 Facebook 发明的。

JSX 背后的原因是 Facebook 希望拥有一种语法扩展，开发人员可以通过清晰简洁的规范来支持它，并希望最大限度地减少另一种“语言”。