解释 JSX 的基本代码片段

在本文中，我们将学习 React JSX 的基本代码片段。 JSX 这个词的完整形式是 JavaScript-XML。这是 JavaScript 语言语法的扩展。 JSX 允许我们将 HTML 代码片段直接实现到 React 中，只需要对语法进行很少的更改。

JSX 的意义：从语法上看，React 中不强制写 JSX 代码。但内置文件结构由编写简单 JSX 代码的组件组成。开发人员发现它很有用，因为 JSX 代码在使用 JavaScript 项目中的 UI 时会显示更多有用的错误和警告消息。与使用“ React.createElement( ) 和 React.appendChild() ”方法创建的模板相比，JSX 代码看起来更简洁且易于调试。

现在我们将在一个 React 应用程序中创建一个 JSX 组件，看看该组件的详细说明。

JSX 代码片段说明：现在我们将学习 JSX 代码片段的基本属性。

插入多行 HTML 代码：在 JSX 元素中插入 HTML 代码时，如果 HTML 代码是多行的，则将 HTML 代码放在括号内。您可以在以下示例中清楚地看到，“jsxElement”内的 HTML 代码用括号括起来。
一个顶级元素：如果 HTML 代码片段中有多个元素，那么它们必须用父元素包装。在我们的示例中，我们用
元素包装了
和
元素。
' className' 属性替换 'class' ： HTML 的传统 'class' 属性类似于 JavaScript 的 'class' 关键字。因此，为了避免任何冲突，HTML 的“类”属性被重命名为“类名”。 'className' 属性取代了 'class' 属性，并与 'class' 属性做同样的工作。
元素必须关闭：在编写 HTML 时，不需要关闭所有标签，至少如果某些标签没有关闭，系统不会抛出任何错误。但是在 JSX 的情况下，你不能在不关闭所有标签的情况下留下一个元素。它会抛出一个错误。

例子：

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app name_of_the_app

第 2 步：创建 react 应用程序后，使用以下命令根据您的应用程序名称移动到目录：

cd name_of_the_app

项目结构：它将如下所示。

创建 JSX 元素：现在我们要在 App.js 文件的 App 组件中创建一个 JSX 元素。下面讨论这些步骤。

清除 App.js 文件的 App 组件内的所有内容。
在 App 组件中创建一个名为“jsxElement”的新变量。
将“jsxElement”变量的值设置为要显示的 HTML 代码片段。如果代码片段是多行的，请确保 HTML 代码片段在括号内。
从 App 组件返回“jsxElement”变量。
'jsxElement' 变量是基本 JSX 元素的示例。 JSX 元素内的 HTML 是“JSX 的基本代码片段”的示例。

应用程序.js 文件

Javascript

// The App.js file
import './App.css';
  
function App() {
  
  let jsxElement=(
    
      Welcome To GeeksforGeeks
      Hello World
    
  );
  return jsxElement;
}
  
export default App;

CSS

/* App.css File */
.App {
    margin-left: 100px;
}
  
.heading {
    color: #308d46;
}

App.css 文件： App.css 文件在顶部导入。它是 React 项目结构中的默认“App.css”文件。创建 JSX 元素后，我们对其进行了修改并在其中添加了我们自己的样式。

CSS

/* App.css File */
.App {
    margin-left: 100px;
}
  
.heading {
    color: #308d46;
}

运行应用程序的步骤：打开终端并键入以下命令。

npm 开始

输出：

解释 JSX 的基本代码片段

和 元素。

Javascript

Welcome To GeeksforGeeks

CSS

CSS

和
元素。