React基础-JSX标签JSX是React开发中不可或缺的一部分，它将JavaScript与类HTML的标记语言结合在

为什么使用JSX

在上一章节中，我们学会了React Elements和ReactDOM。然而，在实际开发中我们通常不会直接书写那些复杂且阅读性低的React Elements代码。作为替代，我们会书写JSX，JSX允许我们将渲染逻辑和UI代码放在同一个组件中，这极大提高了代码的可读性和可维护性。

JSX是React开发中不可或缺的一部分，它允许我们用类HTML的语法来编写组件。这使得编写UI极为直观和高效，并且更加贴近UI设计时的视觉语言。重要的是要理解，JSX只是为了提高开发者的工作效率而提供的一种语法糖。在编译过程中，JSX会被转换成React.createElement调用，这些调用会生成纯粹的JavaScript对象，也就是React Elements。这些对象最终将被用来构建React的虚拟DOM，然后React会根据这个虚拟DOM来管理真实DOM的渲染。

对比`React.createElement`与`JSX`

React Elements示例：

import React from "react";
import ReactDOM from 'react-dom/client'

function Button({label}) {
    return React.createElement(
        "button",
        null,
        label
    );
}

ReactDOM.createRoot(document.getElementById('root')!).render(React.createElement(Button, {label:'辰火流光的React学习笔记'}, null))

在React Elements示例中，Button组件是通过React.createElement来构建的。这个函数接受三个参数：

type：组件的类型，可以是一个HTML标签字符串（例如"button"）、React组件或是React.fragment。
props：一个对象，它包含了传递给React组件的props。在这个例子中，只有label被作为child传递，而且props对象是null，因为我们没有额外的属性要设置。
children：组件的子元素，可以是任意数量的参数，这些参数可以是React元素、字符串或者其他类型。在这里，label作为单个文本子元素被传递。

改为JSX的示例：

import React from "react";
import ReactDOM from 'react-dom/client'

function Button({ label }) {
    return <button>{label}</button>;
}

ReactDOM.createRoot(document.getElementById('root')!).render(<Button label={'辰火流光的React学习笔记'} />)

当我们在JSX中编写组件时，我们用一种类似于HTML的语法来声明UI。而在底层，JSX实际上被编译器（如Babel）转译成React.createElement函数调用。

这里直接使用了HTML的<button>标签，并用花括号{}包围了label，允许在JSX中插入JavaScript表达式。

最后，在两个示例中都使用了ReactDOM.createRoot函数来渲染组件，差别在于传递给render函数的参数是不同的：

在使用React.createElement的示例中，你必须调用React.createElement(Button, {label: '辰火流光的React学习笔记'}, null)来创建Button元素。
在使用JSX的示例中，你直接写<Button label={'辰火流光的React学习笔记'} />，这对于开发者来说更加易读易写。

在浏览器中的效果

JSX与HTML的区别

虽然JSX看起来与HTML非常相似，但它们在一些细节上有所不同。

技巧：

使用className代替class属性，因为class是JavaScript中的保留字。
自闭合标签必须以斜杠结束，例如<img />。

使用className代替class属性：

const Demo = () => (
  <div className="photo">辰火流光</div>
);

自闭合标签：

<img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" />

JavaScript 表达式展示信息

JSX中可以很容易地展示动态信息。

技巧：

使用大括号{}来插入JavaScript表达式，包括变量、函数调用等。

示例：

<input type="checkbox" defaultChecked={false} />

function Greeting({ name }) {
  return <h1>欢迎，{name}!</h1>;
}

注意事项：

确保插入的JavaScript表达式返回的是React可以渲染的值，例如字符串、数字、元素或组件。

使用Fragment

当需要返回多个元素而不想添加额外的DOM节点时，可以使用React Fragment。

<React.Fragment></React.Fragment>可以简写为<>...</>这样看起来更清晰

技巧：

使用<>...</>作为不添加额外DOM节点的容器。

示例：

import ReactDOM from 'react-dom/client'

function Demo() {
    return (
        <>
            <h1>辰火流光的React学习之路</h1>
            <ul>
                <li>React</li>
                <li>React router</li>
            </ul>
        </>
    );
}

ReactDOM.createRoot(document.getElementById('root')!).render(<Demo />)

注意事项：

Fragment只是作为包裹元素，并不会渲染任何实际的DOM节点。

在浏览器中中的效果

通过以上技巧和注意事项，你可以更加自如地使用JSX来构建你的React应用。记住，JSX不仅仅是一个简单的模板语言，它是一个强大的工具，可以让你以声明式的方式来描述你的UI，并且能够完美地与React的组件模型结合。

React基础-JSX标签

为什么使用JSX

对比React.createElement与JSX

JSX与HTML的区别

JavaScript 表达式展示信息

使用Fragment

对比`React.createElement`与`JSX`