【React】React v18 反应库版本18
JSX语法
首先，在React中，我们使用一种称为JSX语法的写法。JSX是JavaScript XML的缩写，它允许在JavaScript文件中类似HTML的标签来编写，是JavaScript的扩展语法。
import { createRoot } from 'react-dom/client';
import { App } from './App';
const container = document.getElementById('app');
const root = createRoot(container!);
root.render(<App />);
在React中，参数表示将函数名作为HTML标签进行封装，以便将其作为组件处理。
如果使用TypeScript，由于会收到警告，请务必在const root = createRoot(container!);的部分添加!。
getElementById(‘app’)中的’app’表示HTML的div标签。
<!DOCTYPE html>
<html lang="en">
<head>
省略
</head>
<body>
<div id="app"></div> // 指示されたdivタグ
</body>
</html>
在SPA的情况下，由于只有一个HTML文件，我们可以使用将组件渲染到HTML的特定位置的方式来指定。例如，假设App组件的内容如下所示。
export const App = () => {
return (
<>
<h1>Hello.World</h1>
<p>はじめまして</p>
</>
);
};
在浏览器中进行确认时，我认为应该会输出App。在JSX语法中，可以将HTML标签作为函数的返回值进行描述，并将其作为组件来构建界面。
JSX规则
以下是先前提到的App函数的示例。首先，在return后面会有多行代码时，需要将其用括号( )括起来。
而且，return后面的部分必须由一个标记包围。本例中我们使用了一个空标记进行包围。也可以使用div标记等，但是空标记是有效地避免错误的方法，因为它不会生成不必要的DOM内容。
组件
在React开发中，通过将屏幕元素分割为各种组件来提高可重用性和可维护性是基本原则。像之前创建的`App`函数等被定义为函数组件的组件就被称为函数组件。
export const App = () => {
return (
<>
<h1>Hello.World</h1>
<p>はじめまして</p>
</>
);
};
函数组件需要被导出以便在其他文件中使用。被导出的内容可以通过导入在其他文件中使用。
以第一个代码为例，可以这样表达。
import { createRoot } from 'react-dom/client';
import { App } from './App';
const container = document.getElementById('app');
const root = createRoot(container!);
root.render(<App />);
可以从同层级的App.js文件中加载一个名为App的函数组件。可以省略文件扩展名。
通过在各个文件中定义组件，并从其他文件中加载组件来构建界面，这就是React的工作方式。
文件的扩展名 de
React可以只运行JavaScript，因此可以使用.js扩展名进行操作。对于组件，也可以使用.jsx扩展名进行操作。对于TypeScript，可以使用.tsx扩展名。根据编辑器的设置，更改扩展名还可以改变文件的图标，这非常方便。
关于事件和风格的处理方法
首先作为事件处理的一种方式，我们来创建一个当按钮被按下时执行警告弹出功能。
export const App = () => {
const clickButton = () => {
alert();
};
return <button onClick={clickButton}>ボタン</button>
};
在React中，当你按下这个按钮时，会显示一个alert。在React中，事件等都要使用驼峰命名法。驼峰命名法是指将单词的连接部分大写的命名规范。另外，在JSX语法中，你可以使用{ }来编写JavaScript代码。
接下来，我们来谈谈样式的处理方式。与普通的HTML一样，React也可以使用style属性来应用样式。需要注意的是，CSS的属性要以JavaScript对象的形式来编写。
export const App = () => {
return <h1 style={{ color: "red" }}>Hello.World</h1>
};
因为要指定样式并编写JavaScript，所以需要用大括号包围，在其中用对象来指定与CSS对应的元素，因此应该是双大括号。
道具
Props是传递给组件作为参数的一种东西。组件根据接收到的Props来改变显示样式和内容。例如，我们尝试在代码中添加粉色文字。
export const App = () => {
const pinkStyle = {
color: "Pink",
fontSize: "10px"
};
return <h1 style={pinkStyle}>Hello.World</h1>
};
如果按照上述的方法进行，是可以实现的，但编写类似的style会很麻烦，因此我们可以创建一个接受颜色和文本作为属性，并返回带有颜色的文字的组件。我们将定义一个名为Colored的函数。
export const Colored = () => {
const pinkStyle = {
color: "Pink",
fontsize: "10px"
};
return <h1 style={pinkStyle}>Hello.World</h1>
};
我們試試在應用程式內使用 Colored 元件。
export const App = () => {
return <colored />;
};
这样一来，刚刚的页面显示仍然没有变化，只是在文字部分将其组件化后再显示出来。接下来，我们将使用Props来实现动态变更。
为了使用Props，我们需要同时修改传递Props的组件和接收Props的组件。
首先，在传递Props的组件中，可以给任意名称的Props传递一个值，然后在等号后面设置具体的传递值。
// colorとmessageをPropsとして渡す
export const App = () => {
return <colored color="Pink" message="Hello.World" />;
};
然后，我们来检查传递过来的Props。由于组件会以对象的形式传入Props，所以我们可以用任何自定义的名称来接收它们。（通常使用Props作为名称）。
// オブジェクトとして受け取る
export const Colored = (props) => {
const pinkStyle = {
color: props.color,
fontsize: "10px"
};
return <h1 style={pinkStyle}>{props.message}</h1>
};
将style的color部分和message部分更改为通过Props接收的内容。这样我们就可以创建一个可以动态更改颜色和文字的组件。
孩子们
在之前，我们可以为Props设置任何名称。组件也可以像HTML标签一样用任何元素包围并使用。然后，被包围的部分将作为children传递给Props。
// childrenとして渡す
export const App = () => {
return <Colored color="Pink">Hello.world</Colored>;
};
// childrenを受け取る
export const Colored = (props) => {
const pinkStyle = {
color: props.color,
fontsize: "10px"
};
return <h1 style={pinkStyle}>{props.children}</h1>
};
现在，关于文本部分，我们已经可以使用children来实现了。
以上是props和children的基本用法，但在上述例子中，我们还可以使用解构赋值和对象省略法来更简洁地编写代码。
如果看一下Colored组件，当使用props时，每次都要写props.~。这个程度的话可能没有问题，但是如果props的数量很多或者需要多次使用，会有点麻烦。因此，我们可以先对props进行解构赋值。
export const Colored = (props) => {
const {color, children} = props;
const pinkStyle = {
color: color,
fontsize: "10px"
};
return <h1 style={pinkStyle}>{children}</h1>
};
通过使用分割代入，我们可以将描述减少。此外，由于颜色的属性名和设置值相同，我们可以使用对象简写法。
export const Colored = (props) => {
const {color, children} = props;
const pinkStyle = {
color,
fontsize: "10px"
};
return <h1 style={pinkStyle}>{children}</h1>
};
状态（使用状态）
在React中，所有要显示在屏幕上的数据和可变的状态都会被统一管理为State。State表示组件的状态值。通过更新处理，例如在事件执行时，可以实现动态应用程序。
我们将使用React Hooks中的useState函数来处理State。由于useState是React提供的，所以在使用之前需要进行以下导入操作。
// useStateのimport
import { useState } from "react";
useState返回值以数组形式呈现，第一个元素是具有状态的State变量，第二个元素是用于更新该State的函数。
// useStateの使用例
const [count, setCount] = useState();
在上述情况中，count是一个具有状态的变量，setCount是用于更新它的函数。类似于数组的解构赋值，您可以自由地给它们起名字，但隐含的规则是将变量名设置为set变量名。在上述情况中，由于count还没有值，因此经常需要设置初始值。在这种情况下，您可以使用useState函数来设置参数。
// State初期値の設定方法
const [count, setCount] = useState(0);
通过提供参数，可以将其设置为状态的初始值。
现在，我们举一个例子，试着实现一个按下按钮时逐渐增加计数的功能。
import { useState } from "react";
export const App = () => {
//State定義
const [count, setCount] = useState(0);
// Stateをカウントアップする関数
const countButton = () => {
setCount(count + 1);
};
return (
<>
<button onClick={countButton}>ボタン</button>
<p>{count}</p>
</>
);
};
当按下该按钮时，setCount将更新状态并递增数值。这只是一个非常简单的用法，作为处理状态的方式仅限于此。顺便说一下，不仅仅是这次的数值，任何对象、数组等都可以作为状态进行管理。
