JSXに関するトピックを追加してほしい

[shota-nukumizu]

Reactでよく利用されるJSXに関するトピックを追加してほしいです。

import React from 'react';

// interfaceの定義
interface Props {
}

// Webにレンダリングする内容を表記
const App: React.FC<Props> = (props) => {
  return (
    <div><div/>
  );
};

export default App;

ソースコード付きでJSXの型定義や注意点などを本書に追加してくれると助かります。(上述のような感じで)

[suin]

ありがとうございます！

たしかに「作って学ぶ」の章で触れてはいるけど、体系的にはあつかってないので「読んで学ぶ」で文法などを解説するのは必要そう

[jamashita]

<></> も説明があるといいかもですね！

[suin]

必要そうな話し合いトピック:

• どういうアウトラインにするか？
• どのへんにページを作るか？

[suin]

説明したいこと

次のようなことを説明したいです。

• はじめに
  • JSXとは？
    • JSXの概要と、Reactや他のライブラリとの関連について説明します
  • JSXとECMAScriptの違い
    • JSXがJavaScriptの拡張であることと、ECMAScript標準との違いについて説明します
  • JSX構文とHTML構文の違い
    • JSXとHTMLの類似点と相違点について、特に構文の違いに焦点を当てて説明します
• JSX構文
  • 要素
    • JSXの要素の基本概念と、HTML要素との関連性について説明します
    • 入れ子の要素
      • JSX要素が他の要素の中に入れ子になる方法と、入れ子の要素を構成する方法について説明します
    • テキスト要素
      • JSX内でテキストをどのように表現するか、またテキスト要素と他の要素との関係について説明します
    • 空白と要素
      • JSX内の空白の扱いと、空白が要素のレンダリングにどのように影響するかについて説明します
  • 属性
    • 標準HTML属性
      • JSXでの標準HTML属性の使用方法と注意点、特にclassやforの代替構文について説明します
    • 真偽属性
      • JSX内で真偽属性をどのように表現するかについて説明します
  • 式
    • 基本的な式
      • JSX内での変数や式の埋め込み方法と基本的な式の例を示します
    • 条件式
      • JSX内での条件式の使用方法、三項演算子と短絡表記の説明と例を提供します
  • 自己終了タグ
    • JSX内での自己終了タグの使用方法と注意点について説明します
  • フラグメント
    • フラグメントとは
      • Reactフラグメントの概念と目的について説明します
    • JSXでのフラグメントの使用
      • フラグメントを使って複数の要素をグループ化する方法と例を示します
    • TypeScriptとフラグメント
      • TypeScriptでのフラグメント使用方法と型付けのポイントについて説明します
  • JSX内のコメント
    • 一行コメント
      • JSX内での一行コメントの書き方を示します
    • 複数行コメント
      • JSX内での複数行コメントの書き方を示します
  • ジェネリクス
    • 型変数を持つコンポーネントに型引数を渡す方法を示します
  • 構文ガイドライン
    • JSXを書く際のベストプラクティスと構文のガイドラインについて説明します
    • <input></input>より<input />
    • <input required={true}>より<input required />
• JSXとコンパイル
  • JSXがどのようなJavaScriptに変換されるか説明する
  • "jsx"コンパイラオプションの理解
    • TypeScriptコンパイラの"jsx"オプションの機能と設定方法について説明します
  • 利用可能な"jsx"オプション値とそのコンパイル結果
    • "jsx"オプションの異なる値によるコンパイル結果の違いと、それぞれの値が適用された場合の例を提供します

[suin]

「空白と要素」に書いておきたいこと

空白と要素では、空白が無視されることを触れた上で

<p>
  This is a
  <strong>pen</strong>
  .
</p>

は「This is apen」のようにつながってしまうことを言い、回避策としてこう書く方法があることを言う。

<p>
  This is a{" "}
  <strong>pen</strong>
  .
</p>