Reactガイドを読んでいくその2
これは
Reactのガイドを読んでいく記事です
ガイドのリンク
JSXの導入
UIなど見た目の部分について記述するために
JavaScriptの機能を全て備えたJSXを使う。
JSXの構文の例
const element = <h1>Hello, world!</h1>;
JSXを使う理由
ReactでJSXを使うことは必須ではないものの、
JavaScriptではUIを扱う際にJSXが有用とみなし使われている。
またJSXであるがゆえにエラーや警告も拾いやすい。
マークアップとロジックを別々にして分離するのではなく、 Reactは両方を含む疎結合のコンポーネントという単位で関心の分離を行う。
JSXに式を埋め込む
// name変数を用意 const name = 'Josh Perez'; // nameを使用 const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );
JavaScript関数の結果を要素に埋め込む
単純な埋め込み
// JavaScript関数 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> // JavaScript関数の結果 Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );
JSXもまた式である
コンパイル後はJavaScript関数の呼び出しに変換される。
JSXはJavaScriptオブジェクトとして評価されるため、
ifなどで使用したり、関数から返したりできる。
JSXで属性を指定する
文字列リテラルを属性として指定するために引用符を使用可能
const element = <div tabIndex="0"></div>;
属性にJavaScript式を埋め込む際には中括弧を囲む引用符を書かない。
JSXで子要素を指定する
タグが空の場合XMLのように/>でタグを閉じることが可能。
const element = <img src={user.avatarUrl} />;
JSXのタグは子要素を持つことが可能。
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
JSXはインジェクション攻撃を防ぐ
ユーザ入力を埋め込むことは安全
const title = response.potentiallyMaliciousInput; // This is safe: const element = <h1>{title}</h1>;
ReactDOMはJSXに埋め込まれた値をレンダリングされる前にエスケープする。そのためアプリケーションで明示的に書かれたものでないコードは注入されないことが保証され、レンダー前に全て文字列に変換される。
XSS攻撃の防止に役立つ。
JSXはオブジェクトの表現である
以下の二つは等価。
const element = ( <h1 className="greeting"> Hello, world! </h1> );
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
React.createElement()は以下のようなオブジェクトを生成する。
// Note: this structure is simplified const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };
明日は要素のレンダーです。
今日はここまで。