JSX: JavaScript XML

React 官方文档

• 在react中配置UI时使用的语法
• 扩展了JS的语法，但并不是浏览器可以直接执行的JS代码
• 使用Babel转换为浏览器可理解的JS代码（Babel：JS编译器）
• 编译完成后，JS被浏览器读取并渲染到屏幕上

为什么我们要使用 JSX？

• 我们可以比使用 DOM 代码更明确地编写代码
• 同时使用JS+HTML语法，可以一目了然地查看组件的功能和结构
• 我们可以在没有 JSX 的情况下使用 React，但是复杂性增加，可读性降低

JSX规则

1) 无法渲染两个相邻的 JSX 元素

• 它们必须被包裹在某种东西中，这样它才算作一个元素，里面有两个元素
• 在 JSX 中使用多个元素时，所有元素都必须用开始和结束标签包裹。
• 可以用空标签 <>, </> 包裹

<div>
    <div>
        <h1>Hello</h1>
    </div>
    <div>
        <h2>World</h2>
    </div>
</div>

2）使用元素类时，将其标记为className

• 如果您将其编写为class，React 会将其视为 JavaScript 类而不是 html 类属性。

<div className="greeting"> Hello! </div>

3）使用JS表达式时，使用大括号{ }

• 如果你想在 JSX 中编写 JavaScript，请务必使用 { }
• 如果不使用花括号，则被识别为纯文本

4）自定义组件，以大写字母开头（PascalCase）

• 当 React 元素用 JSX 编写时，它们以“大写”开头。
• 如果它以小写字母开头，则它被识别为普通的 HTML 元素。
• 大写写的 JSX 组件：自定义组件

function Hello( ) {
    return <div>Hello!</div>
}

function HelloWorld( ){
    return <Hello/>;
}

5）使用三元运算符进行条件渲染

• 条件渲染使用三元运算符而不是 if 语句

<div>
{(1+1 === 2) ? (<p>Correct</p>) : (<p>Failed</p>)
}
</div>

)6）使用map功能时，必须有一个“key”JSX属性

• 我们应该使用“map()”函数在 React 中显示多个 HTML 元素
• 使用map功能时，一定要包含“key”JSX属性
• 如果您不放置“key”JSX 属性，您将收到一条警告，提示您必须在列表中的每个项目中放置一个键。 '警告：列表中的每个子项都应该有一个唯一的“key”道具。'
• key 属性的位置必须放在map 方法内的第一个元素中。
• 如果可能，应该为键属性值分配一个由数据提供的 id。 这是因为键属性的值（如 id）必须是不可变的、可预测的且唯一的。
• 如果没有唯一的 id，则使用数组索引（仅作为最后的手段）

const posts=[
    {id:1, title:'Hello World',content:'Welcome to learning React!'}
    {id:2, title:'Installation', cintent:'You can install React from npm.'}
];

function Blog(){
    const content=posts.map((post)=>
    <div key={post.id}>
        <h3>{post.title></h3>
        <p>{post.content}</p>
    </div>
    );

    return (
        <div>
            {content}
        </div>
    );
}

ReactDOM

DOM：HTML + CSS + JS React DOM：CSS + JSX

什么是 ReactDOM？

• ReactDOM 是一个特定的包，充当 React 和实际浏览器 DOM（文档对象模型）之间的桥梁。
• React 负责创建和管理 UI 的虚拟表示，而 ReactDOM 则负责将该虚拟 DOM 渲染到浏览器 DOM 中。
• ReactDOM 提供了操作浏览器 DOM 的方法，例如渲染 React 组件、在状态或 props 更改时更新它们以及处理事件。
• 它确保对虚拟 DOM 所做的更改有效地反映在实际浏览器 DOM 中。

import React & ReactDOM

[1]
import React from 'react';
import ReactDOM from 'react-dom';
...
ReactDOM.render(<Component/>, document.getElementById('root'));

[2]
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

import/export

import A from B

：导入导出的模块

• A：要使用的变量、类、函数
• B：要加载的模块的路径

export A

：在变量、类、函数前面添加export关键字，使模块的函数可供外部使用。

export A as C

：使用as关键字：使用别名导出

深入理解代码

import React from "react"
import ReactDOM from "react-dom"

：我们应该先导入 React / ReactDOM 才能使用它们

ReactDOM.render(<Component/>, document.getElementById('root'));

• ReactDOM.render()用于将 React 组件或元素渲染到 HTML 文档中的指定容器中
• 它需要两个参数：（要渲染的组件/元素，HTML 中的目标容器元素）

组件

1. 类组件

可以参照一些文档的解释:React 类组件

2. 功能组件

• **接收 props 作为参数 ** 并 返回组件的 JSX 结构
• 使用构造函数约定，组件名称的首字母大写
• <组件/> [例如]

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

function MyInfo() {
  return (
    <>
      <h1> Dohee</h1>
      <p> These are the places that I'd like to visit for my vacation</p>
      <ul>
        <li> London </li>
        <li> Dublin </li>
        <li> Rome </li>
      </ul>
    </>
  );
}

ReactDOM.render(<MyInfo />, document.getElementById("root"));