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

你可以 checkout Babel is a JavaScript compiler.，选择react在预置选项，看看它实际上是如何变成每一行。

使用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>
    );
  }
});

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

JSX是ECMAScript的一个类似XML的语法扩展，根本不需要绑定到React。React只是一个transpiler，一个将JSX树转换为有效JavaScript的引擎。还有其他类似React的transpiler也有JSX语法，JSXDom和MercuryJSX。JSX不符合任何XML或HTML规范，也不属于ECMAScript，是Facebook发明的。
JSX背后的原因是Facebook希望有一种语法扩展，开发人员可以通过清晰简洁的规范来支持它，并希望最大限度地减少另一种“语言”。

在这里您将看到js和jsx的基本区别
JavaScript示例

let element = React.createElement('h1', {}, 'This is JavaScript')
ReactDOM.render(element, document.getElementById('root'));

JSX等效

let element = <h1>This is JSX</h1>
ReactDOM.render(element, document.getElementById('root'))

简单地说，JSX可以被认为是用JavaScript编写HTML，如果我们不得不在没有JSX的情况下编写HTML，就需要编写冗长的代码来创建DOM元素，这在理解上略显复杂。
React文档提供了各种示例和场景：https://reactjs.org/docs/jsx-in-depth.html

JSX是看起来像HTML的东西，它告诉React要么创建一个普通的HTML元素，要么显示另一个组件。
如果它告诉React创建一个普通的HTML元素，它看起来像这样：

export default function App() {

  return (
    <div>
     <h1>Howdy!</h1>
     <ul>
      <li>Samantha</li>
      <li>Alex</li>
     </ul>
    </div>
  );
}

如果它告诉React显示另一个组件，它看起来像这样：

export default function App() {

  return (
    <div>
      <h1>Your friends</h1>
      <ContactList />
    </div>
  );
}

JSX是JavaScript的语法扩展。它允许您在JavaScript文件中编写类似HTML的代码，并帮助您创建可重用的UI组件。

以下是JSX代码示例：

const element = <h1>Hello, world!</h1>;

JSX不是有效的JavaScript代码，因此需要将其转换为浏览器能够理解的JavaScript代码，这种转换通常使用Babel之类的transpiler来完成。
另一方面，JavaScript（JS）是一种用于Web开发的编程语言，是一种由浏览器或服务器端运行环境（如Node.js）执行的语言。

以下是JavaScript代码示例：

const a = 10;
const b = 20;
const c = a + b;
console.log(c); // Outputs: 30

JSX通常与React（一个用于构建用户界面的JavaScript库）结合使用，以创建可重用的UI组件。React库提供了一个名为ReactDOM.render（）的方法，可用于将JSX元素呈现到DOM中。

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));