目标

我正在自学React。我认为我必须学习最新版本的React 18.2.0！所以我打算从头到尾复习一遍。作为对自己的提醒，我会记录下关于JSX语法的基本知识。如果有任何建议，比如学习哪些内容或者哪些方法更好，我非常希望您能留下评论。

将图像输出的方法

在根节点中直接书写渲染代码，显示”HelloWorld!”。

import { createRoot } from "react-dom/client"; //react-dom/clientからcreatRootをインポート(createRoot関数が利用可能となる)

const rootElement = document.getElementById("root"); //index.htmlの<div id="root"></div>を取得しているイメージ
const root = createRoot(rootElement);//取得したルート要素を指定して新しいルートを作成、新しいルートが root 変数に格納される

root.render(
  <>
    <h1>HelloWorld!</h1>
    <p>いとっちです</p>
  </>
); //非同期レンダリングを行う

使用函数组件来显示HelloWorld。

import { createRoot } from "react-dom/client"; //react-dom/clientからcreatRootをインポート(createRoot関数が利用可能となる)
import { StrictMode } from "react"; //StrictModeをインポート

const rootElement = document.getElementById("root"); //index.htmlの<div id="root"></div>を取得しているイメージ
const root = createRoot(rootElement); 

const App = () => {
  return( //複数行をリターンする時は、改行して（）内に記述する。
  <> {/*//関数のコンポーネントとして返すタグは大きな一つのタグにしなけらばならない,<React.Fragment>を<></>として省略できる*/}
    <h1>Hello World!</h1>
    <p>いとっちです</p>
  </>
  )//App関数の結果として表示したい要素を返却する
}

root.render( //非同期レンダリングを行う
  <StrictMode> 
     <App /> {/* App関数の結果（returnされたHelloWorldといとっちが表示される） */}
  </StrictMode>
); //<StrictMode>でより厳しいルールで記述をすることを設定、警告を表示することができる

目前来看，如果两者都相同的话，直接编写的代码可能更好，但考虑到维护性和可重用性，使用函数组件的方法似乎是主流。
此外，以下是JSX语法的主要规则。

JSX記法的规则之一是关于函数组件命名的定义。

const App = () => {…函数组件通常以大写字母开头，连接词也以大写字母开头。

    const App = () => {...
    const AppHoge = () => {...

JSX記法的规则第二条关于return的规定

如果返回的是单行，则可以省略”return”关键字。

const App = () => {
  return <h1>Hello World!</h1>
}

如果返回的结果是多行，则在括号内换行并记录。

const App = () => {
  return( 
  <> 
    <h1>Hello World!</h1>
    <p>いとっちです</p>
  </>
  )
}

JSX语法的规则③片段

当需要返回多行时，请使用<>、

const App = () => {
  return( 
  <> 　
    <h1>Hello World!</h1>
    <p>いとっちです</p>
  </>
  )
}

const App = () => {
  return( 
  <div> 　
    <h1>Hello World!</h1>
    <p>いとっちです</p>
  </div>
  )
}

const App = () => {
  return( 
  <> 　
    <h1>Hello World!</h1>
    <p>いとっちです</p>
  </>
  )
}

const App = () => {
  return( 
    <h1>Hello World!</h1>
    <p>いとっちです</p>
  )
}