業務の中で、しっかり理解できていない部分が徐々に見えてきたので、じっくりドキュメントを読むことを始める。
Hello World
Reactの一番短い例がこちら。 “Hello, world!” という見出しをページに表示する。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
JSXの導入
const element = <h1>Hello, world!</h1>;
- JSXはJavaScriptの構文の拡張。
- JSXはReact要素を生成する。
JSXを使う理由
表示のためのロジックは、イベントへの応答や経時的な状態の変化、画面表示のためのデータを準備する方法など、UIロジックと本質的に結合したもの。Reactはその事実を受け入れる。
Reactはマークアップとロジックを別々のファイルに書いて人為的に技術を分離するのではなく、マークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離する。
JSXに式を埋め込む
- あらゆる有効なJavaScriptの式を、JSX内で中括弧に囲んで使用できる。
-
2+2、user.firstName、formatName(user)など全て有効なJavaScriptの式。
以下の例では、formatName(user)という関数の結果を<h1>要素内に埋め込んでいる。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
JSXもまた式である
- コンパイルの後、JSXの式は普通のJavaScriptの関数呼び出しに変換され。JavaScriptオブジェクトへと評価される。
- そのため以下のようなことが可能。
- JSXをif文やforループの使用
- JSXを変数に代入
- JSXを引数として受け取る
- JSXを関数から返す
JSXで子要素を指定する
- タグが空の場合、XMLのように
/>タグを閉じることができる
const element = <img src={user.avatarUrl} />;
- JSXのタグは子要素を持つことができる
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSXはインジェクション攻撃を防ぐ
JSXはデフォルトで特定のタイプのインジェクション攻撃、特にクロスサイトスクリプティング (XSS) 攻撃を防ぐためのメカニズムを持っている。
インジェクション攻撃とは
悪意のあるコードやデータをアプリケーションの入力として送り込むことで、不正な動作を引き起こす攻撃方法です。特に、クロスサイトスクリプティング (XSS) は、ウェブアプリケーションにおいて非常に一般的な攻撃手法であり、攻撃者が悪意のあるスクリプトをウェブページに埋め込むことで、他のユーザーのデータを盗んだり、ユーザーに不正な操作をさせることができる。
- デフォルトでは、React DOMはJSXに埋め込まれた値をレンダー前にエスケープするため、悪意のあるスクリプトが実行されるリスクを低減する。
JSXはオブジェクトの表現である
Babel は JSX を React.createElement() の呼び出しへとコンパイルする。
以下の2つの例は等価
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()は本質的には以下のようなオブジェクトを生成する。
このようなオブジェクトをReact要素と呼び、これらは画面に表示したいものを説明書きとして考えることができる。
React はこれらのオブジェクトを読み取り、DOM を構築して最新に保つ。
続く