JSX 和 HTML 有什么区别？

HTML 简介： HTML 是一种超文本标记语言，是用于在 Web 浏览器中显示和查看 Web 的文档的标准标记语言。

这是在 HTML 中创建基本表单的代码：

HTML

  
HTML Form
  

  First name:
  

  
  

  Last name:

  
  


  
 
  

输出：

JSX 简介： JSX (JavaScript + XML) 是 JavaScript 的扩展，它允许您直接在 JavaScript 中编写 HTML，它具有一些优点，即创建更具可读性的代码并在 HTML 中发挥 JavaScript 的全部功能。 JSX 在某些方面几乎类似于 HTML，但是，它确实伴随着某些明显的差异，我们将在下一节中介绍这些差异。由于 JSX 不是合法的 JS 代码，因此必须使用 Babel 或类似工具将其编译为 JS。

一个简单的 JSX 示例：

const App =

Welcome to GeeksforGeeks

;

下面是在 JSX 中创建一个简单示例的代码：

使用以下命令在 reactjs 中创建一个新应用程序：

npx create-react-app myapp

您的项目结构将如下所示：

我们将在 React 代码中编写一个基本的 jsx。

首先，打开App.js并进行以下更改：

import React from 'react';
import ReactDOM from 'react-dom'; 

const App=()=> {
 return(
   
Welcome to GeeksforGeeks
 )
}
export default App;

保存并关闭文件并使用项目目录中的命令运行项目：

npm start

输出：

如果单击提交按钮，页面将重新加载。由于您正在构建单页应用程序，因此您将阻止 type=”submit” 的按钮的这种标准行为。相反，您将在组件内处理提交事件。

JSX 与 HTML：

JSX 和 HTML 的基本区别如下：

HTML	JSX
In HTML, multiple elements can be returned. For example:   unordered list             ordered list         ordered list         ordered list           unordered list   unordered list	Nested JSX must return one element, which we’ll call a parent element that wraps all other levels of nested elements:     pink   yellow     green Without the wrapper element, JSX won’t transpile. In React, we can render JSX directly into HTML DOM using React rendering API, aka ReactDOM. The formula for rendering React elements seems like this: ReactDOM.render(componentToRender, targetNode) ReactDOM.render() must be called after the JSX elements declarations.
HTML elements have attributes. e.g., maxlength in	JSX elements have props. e.g., maxLength in
It is not necessary to use camelCase for attributes, ids and event references. Its totally your call to use camelCase, lowercase or hyphens for naming them.	All HTML attributes and event references in JSX become camelCase, this way, onclick event becomes onClick and onchange — onChange.
The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.	You can’t use the word class to define HTLM classes, since class is a reserved word in JavaScript, instead, use — className.
In HTML almost all tags have an opening and a closing tag except probably a few like	In JSX, however, any element can be written as a self-closing tag, for example: Example: const string = ;

由于 JSX 组件代表 HTML，因此您可以将多个组件放在一起来制作更复杂的 HTML 页面。

JSX 看起来像 HTML 的事实并没有使它不再是 HTML，事实上，您仍然可以绕过类似 HTML 的语法编写普通函数。

底线是 JSX 不是 HTML 或模板引擎。