首先

通过总结YouTube频道【とらゼミ】的工程师学习课程《新・日本一わかりやすいReact入門【基礎編】》，我希望能够复习并加深对React的理解。

上一次的内容：React的基本知识

02 JSX的语法

在这里，我们会解释React框架中用于表示概念“组件”的语法“JSX”。

前回的复习：
组件 = UI（界面）+ 功能（播放、停止视频等等）

JSX是一种JavaScript的语法扩展。

以下列举了一些例子，以解释其记法是什么样的。

const BlueButton = () => {
    return (
        <button className={'btn-blue'}>
            Click me!
        </button>
    );
}

JSX（JavaScript XML）是一种用于在JavaScript中编写HTML结构的语法。

JSXはjavascriptの拡張言語
HTMLライクな記述 + javascriptの構文が使える
ちなみにReact公式ページにはこう書かれている

const element =

Hello, world!

;
これは JSX と呼ばれる JavaScript の構文の拡張です

最終的にReact要素を生成する

生成React要素

在React中，有一个叫做组件(component)的概念，虽然也可以翻译为元素。
所以，最初我认为生成React元素就是生成React组件。

然而，当查看React的官方网页时，会有这样的描述。

组件类似于JavaScript函数。它接收任意输入（称为“props”），并返回描述应该在屏幕上显示的React元素。

并且列举了一些组件的例子。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这个是JSX语法示例中提供的代码结构和组成部分相同。换句话说，变量”BlueButton”是一个组件。

const BlueButton = () => {
    return (
        <button className={'btn-blue'}>
            Click me!
        </button>
    );
}

在JSX的说明中，它说“生成React元素”，但准确的说应该是“组件生成React元素”。

最终来说，React元素是指官方网页上的定义。

(Chinese) 元素指的是React应用程序中的最小构成块，描述了您希望在屏幕上看到的内容。

React要素指的是React元素，而不是React组件。还列举了例子。

const element = <h1>Hello, world</h1>;

总结来说，关系就是这样的感觉。

             React App
                 |
        -----------------
        |               |
     React要素        React要素
        ↑(生成)          ↑(生成)
     コンポーネント      コンポーネント

为什么要使用JSX？

只需明白「可以像编写HTML一样简便」就行。

如果不使用

React.createElement(
    'button',
    {className: 'btn-blue'},
    'Click me!'
)

使用过的情况

    <button className={'btn-blue'}>
        Click me!
    </button>

JSX是做什么的？

在编译时，使用JSX语法的表达式将被转换为不使用JSX语法的表达式。

人类的工作是以容易理解的方式编写代码，使之对机器也易于理解。

JSX的基本语法和JSX的特殊语法

import React from 'react';

const BlueButton = () => {
    const yourMessage = "Click me!";
    return (
        <button className={'btn-blue'}>
            {yourMessage}
        </button>
    );
}
export default BlueButton;

请注意以下事项：

• Reactをimportすること

でなければ使えない

変数を埋め込む場合は{}で囲む

囲まなければyourMessageとそのまま表示されることになる

HTMLの場合と違い、cssを記述する場合はclass=…ではなくclassName=…の形式
HTMLの場合と違い、変数はcamelCaseで
HTMLの場合と違い、imgタグのようなタグでも閉じタグが必要

请参考以下资料

整理一下React组件相关的术语。