当前位置:首页>WordPress资讯>JSX语法的入门指南

JSX语法的入门指南

JSX语法的入门指南

传统上,将标记和逻辑分离到不同的文件中,用来做结构,用CSS来做造型,然后写JavaScript来处理交互和数据操作。

但是,如果有一种方法可以将这些技术结合起来,简化开发过程,使其更容易建立复杂的用户界面,那会怎么样呢?这就是JSX的作用。

在这篇文章中,你将了解什么是JSX,它是如何工作的,以及为什么它对在开发中构建动态用户界面很重要。

让我们更详细地探讨这一革命性的技术。

  1. 什么是JSX?
  2. JSX是如何工作的?
  3. JSX和React
  4. 6条重要的JSX规则
  5. 为什么JSX对很重要?

什么是JSX?

JSX(JavaScript )是JavaScript的一个语法扩展,它允许开发者在JavaScript文件中编写类似HTML的。它是由(以前的Facebook)开发的。

JSX的语法类似于HTML,有打开和关闭标签、属性和嵌套元素。

例如,你可以写下面的JSX代码来渲染一个简单的标题元素:

const heading = 

Hello, JSX!

;

这段代码看起来像HTML,但它是JavaScript。const关键字创建了一个名为标题的新变量,该变量的值是JSX表达式的结果。

JSX是如何工作的?

JSX在浏览器中执行之前被转换为普通的JavaScript。这种转换是通过一个叫做转码器的工具完成的。最流行的JSX转码器是Babel。

Babel将JSX代码转换为一系列的函数调用。这些函数调用相当于JSX中写的类似HTML的代码。然后,浏览器可以执行产生的JavaScript代码。

例如,下面的JSX代码:

const element = 

Hello, world!

;

被转化为以下JavaScript代码:

const element = React.createElement("h1", null, "Hello, world!");

这种转换使开发人员能够以熟悉和容易阅读的语法编写代码,同时仍然利用JavaScript的力量和灵活性。

JSX和React

JSX是React的一个组成部分,允许开发者在一个文件中编写这些的标记和逻辑。

下面是一个React组件中的JSX代码的简单例子:

import React from 'react';
function Greet() {
return 

Hello World!

; } export default Greeting;

在这个例子中,你有一个名为 Greet 的功能组件,该组件渲染了一个带有问候信息的 h1 元素。

React编译器将把这段代码转化为可以被浏览器执行的优化的JavaScript代码,使该组件在屏幕上呈现。

下面是React编译器将把 Greet 组件转换成的内容:

import React from 'react'
function Greet() {
return React.createElement("h1", {}, "Hello, World!")
}

在这段代码中,JSX代码已被转化为 React.createElement 调用,创建与原始JSX代码相同的结构和内容。

这就是React编译JSX代码时在幕后发生的事情,使其能够被浏览器执行。然而,转换后的代码可能比原始JSX代码的可读性差。

在React第17版中,引入了新的JsX转换功能,它自动从React包的新入口点导入特殊函数,允许开发人员使用JsX,而不必在文件顶部导入React。

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}

使用JSX的JavaScript表达式

在JSX中,JavaScript表达式可以直接嵌入到标记中以动态生成内容。这允许开发者使用JavaScript代码来计算值,执行操作,并在他们的JSX组件中有条件地渲染内容。

这个例子显示了如何在JJSX中使用两个JavaScript表达式:

import React from 'react';
const MyComponent = () => {
const name = 'John';
const age = 30;
return (

Hello, {name}!

You are {age} years old.

Next year, you will be {age + 1} years old.

{age >= 18 &&

You are an adult.

}
); }; export default MyComponent;

在这个例子中,像{name}{age}{age + 1}, 和 {age >= 18 &&

You are an adult.

} 这样的JavaScript表达式被用来根据姓名和年龄变量的值来动态渲染内容。

在JSX中使用CSS

CSS可以通过各种方式应用于JSX组件,如内联样式、独立的CSS文件或CSS-in-JS库。内联样式是使用JavaScript对象直接在JSX标记中定义的,而单独的CSS文件或CSS-in-JS库允许组件的外部和模块化样式。

这个例子显示了如何使用JSX中的style属性,将使用JavaScript对象定义的内联样式应用于元素:


在这个例子中,像 backgroundColorcolor 和padding这样的CSS属性被设置为style对象中的键值对,而它们的值是代表的字符串。

注意:虽然内联样式提供了灵活性和简单性,但建议使用CSS类或CSS-in-JS库,以便在更大的应用程序中获得更复杂或可重复使用的样式。

6条重要的JSX规则

在编写JSX代码时,你应该遵循一些规则,以确保代码的有效性和易读性。

1. 总是返回一个单一的根元素

在JSX中,你必须总是返回一个单一的根元素。这意味着你所有的JsX代码必须包含在一个单一的最外层元素中。例如,这是有效的JSX:

return (

Hello World!

This is my first React component.

)

但这并不是因为它返回两个元素而不是一个:

return (

Hello World!

This is my first React component.

)

在将HTML代码转换为JJSX时,必须牢记这一点。

2. 使用className而不是class

在HTML中,你会使用 class 属性来指定一个元素的CSS类别。然而,在JSX中,你需要使用 className 属性来代替。比如说:

// Good
This element has a CSS class.
// Bad
This element has a CSS class.

使用 className 而不是 class 是很重要的,可以避免命名冲突,因为 class 是JavaScript中的一个保留关键字。

3. 对JavaScript表达式使用大括号

当你需要在JSX代码中包含一个JavaScript表达式时,你需要用大括号{}来包裹它。这可以用于任何事情,从显示动态数据到有条件地渲染组件。下面是一个例子:

// Good
{myVariable}
// Bad
myVariable

你也可以在大括号内执行数学运算,如:

The total cost is {25*10}

另外,在你的大括号内,你可以使用三元运算符设置条件语句:


下面是一个用React组件的更好的例子:

function Greeting() {
const isLoggedIn = true;
return (
{isLoggedIn ? (

Welcome back!

) : (

Please log in.

)}
); }

在这个例子中,我们定义了一个Greeting组件。该组件使用三元操作符,根据 isLoggedIn 的值,有条件地渲染一个问候语。如果 isLoggedIn 为 true,该组件将渲染一个 h1 元素,其文本为 “Welcome back!”。如果 isLoggedIn 是 false,该组件将呈现一个 h1 元素,其文本为 “Please log in”。

4. 在JSX中对大多数东西使用camelCase

在JSX中,大多数东西都使用camelCase,包括属性、事件处理程序和变量名。这个惯例与JavaScript的命名惯例一致,有助于保持可读性。

例如,使用 onClick 而不是 onclick ,使用 className 而不是 class


5. 始终使用闭合标签

在JSX中,你需要始终使用闭合标签,即使它们没有任何内容。比如说:

// Good
// Bad

6. 对空的元素使用自闭合标签

如果你有一个没有任何内容的元素,你可以用一个自闭合标签来代替开闭标签。

// Good
My Image
// Bad
My Image

为什么JSX对网络开发很重要?

JSX对网络开发很重要,因为:

  1. 它允许开发者以更直观和熟悉的方式构建用户界面。
  2. 开发者可以使用JSX来描述他们的用户界面的结构,而不是直接操作DOM,这种方式更像是在写HTML。
  3. 它允许更有效和灵活的开发。因为JSX只是JavaScript,开发者可以利用JavaScript的所有功能来创建更复杂和动态的用户界面。
  4. 它是React库的一个重要组成部分,React库是现代网络开发中构建用户界面的最流行的选择之一。如果你想使用React,你将需要学习JSX。

小结

JSX是JavaScript的一个语法扩展,它允许开发者在JavaScript文件中编写类似HTML的标记。这使得为创建动态和互动的用户界面更加容易。

你已经学会了一些在使用JSX时需要遵循的规则–通过遵循这些规则,我们可以写出干净、可读、可维护的代码,并与JavaScript的命名惯例保持一致。

原文地址:https://www.wbolt.com/what-is-jsx.html

WordPress资讯

如何开启谷歌生成式AI搜索

2024-1-22 1:10:57

WordPress资讯

什么是Astro?一款流行静态网站生成器

2024-1-22 1:10:59

个人中心
今日签到
有新私信 私信列表
搜索