首先

早上好，我是Tun。
这次我想继续之前的内容，复习并介绍React的基础知识。

JSX语法和render()函数。

首先要注意的是JSX语法，它是React的基本写法。这种写法可以在JavaScript文件中像HTML标签一样进行编写。官方文档中写道，JSX只是React.createElement(component, props,…children)的语法糖。

我们立即来看一个例子。

<MyButton color = "bule" shadowSize = {2}>
  Click Me
</MyButton>

这段代码被编译成以下内容。

React.createElement(
  MyButton,
  {color: 'bule', shadowSize: 2},
  'Click Me'
)

在使用React进行开发时，我们使用JSX语法进行编写，但也需要考虑到编译后的写法。另外，JSX语法有一些规则。让我们来看看以下的例子。
※除了以下这些，还假设存在一个index.html文件，其中包含一个id为root的div标签的写法。

import ReactDOM from "react-dom";

const App = () => {
  return (
    <>
      <h1>Hello!</h1>
      <p>How are you?</p>
    </>
 );
};

const container = document.getElementById("root");
ReactDOM.render(<App />, container);

react-domからReactDOMという名前でモジュールをimportする。
関数Appを定義し、アロー関数を記述する
returnを書く
その中に処理を記述する(HTMLのタグが今回の処理部分)

render()関数を用いて、指定した要素の中のDOMにレンダリングし、そのコンポーネントへの参照を返す

在这里，return之后用<></>括起来，这是JSX语法的规则。除了使用div或React提供的Fragment之外，也可以使用空标签来包裹，这样可以避免生成不必要的DOM。
此外，用<>括起来的App是为了将其作为组件处理。

关于render()函数的深入挖掘：
官方文件中有以下描述。

触发渲染
渲染组件
提交至 DOM

ReactDOM.render()函数是通过从ReactDOM (react-dom模块)中进行导入使用的，语法如下：render(element, container[, callback])。

上述的代码是根据触发渲染，将组件渲染到屏幕上，并提交到DOM中的流程。

因此，关于render()函数的作用，我理解为是用于判断渲染结果是否有差异，从而检测彼此之间的差异。

但是！！！！

时代的变迁总是迅猛的，自从购买这本书到现在，React已经升级到v18，并且ReactDOM.render()的写法已经成为过时的方式了！

只需要一种选项来用中文进行重述：

在React 18中，render函数已经被createRoot函数取代。有关详细信息，请参考createRoot。

我之前说过…
所以，ReactDOM.render()在React 18中被替换为createRoot().render()。接下来，我将以这种方式来重写并解释相关内容。

首先，关于`createRoot()`的写法，可以像这样写：`createRoot(container[, options]);`。它会创建一个针对传入的`container`的React根组件并将其返回。可以使用`root`的`render`方法将React元素渲染到DOM内部。

const root = createRoot(container);
root.render(element);

基于此，让我们改写上面的例子。

export const App = () => {
  return (
    <>
      <h1>Hello!</h1>
      <p>How are you?</p>
    </>
 );
};

import { createRoot } from "reacr-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container); //← 増加
root.render(<App />);

你突然出现了App.jsx…这才是React的真谛，即将函数组件化。组件文件的扩展名写作.jsx，目的是与JavaScript文件区分开来。我们会将App.jsx导出，以便在其他文件中使用。

接下来，我们将App.jsx引入index.js中，使用import语句来实现。另外，要使用createRoot()函数，我们不是从react-dom导入，而是从新的react-dom/client导入。在这种情况下，我们使用{ }来引入，表示我们需要直接使用ReactDOMClient提供的函数，而非给它取别名。如果不使用{ }，则可以自定义名称来定义，并导入ReactDOMClient本身。

或许感觉上比ReactDOM多了一句话，但是是否有追加createRoot的好处呢？我产生了这个疑问。经过一番调查，似乎从v18开始就可以访问并发处理功能组。这种并发处理可以在渲染过程中实现用户的操作，从而提高用户体验。来自React官方的信息。

未来，用户体验也将变得很重要，所以考虑到开发成本，加快尝试引入createRoot，并不断慎重考虑，是否如何呢？

因为内容变长了，所以我想从props开始进行Part2。

请参阅

• React公式

モダンJavaScriptの基本から始める React実践の教科書