React18.2.0対応 JSX記法を丁寧に学ぶ Hello World表示まで

目的

Reactを自己学習しています。「React最新バージョン18.2.0を学ばないと！」と思い、一通り一から復習をしています。最初の関門であるJSX記法についての自分への備忘録として記します。これも学んだ方がいい、こうした方がよいとうものがあればぜひコメントをお願いします。

画面に出力する方法

root.renderに直書きして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>
}

returnで返すのが複数行になる場合→改行して（）内に記述、

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

JSX記法のルール③フラグメント

複数行をリターンする時は、<>や<div>、<React.Fragment>を使って大きな一つの要素として返す。

<>を使う場合

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

<div> を使う場合

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

<React.Fragment>を使う場合

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

NGの例

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

参考資料

Udemy　モダンJavaScriptの基礎から始める挫折しないためのReact入門