note React

JSX と TSX

まだまだReactにたどり着けてないんだけど・・JSXおさらい。

今回も柴咲先生に教えをこうで候。

https://oukayuka.booth.pm/items/1312652

柴咲先生。

JSX

  • JavaScripでHTMLっぽいのが書けるようJavaScriptを拡張したもの
  • HTMLのDOM構文にロジックを埋め込むテンプレート構文ではない
  • JavaScript eXtensionの略

何故テンプレート構文じゃないかってのは、本に詳しく書いてある（すごく納得できる・・）

  • FacebookのいいねをMVCでやろうとすると無理がある（本ではRailsが比較として出てくるんだけど、Rails触ったことないので、.net MVCに読み替えて読んでみたりしている・・）
  • Reactは複雑なDOMの書き換えに対しコンポーネントという単位にロジックとデザインを完結させ、インタラクティブな処理を実現している

TSX

  • JSXのTypeScript版
  • 拡張子「.tsx」

JSX文法

クラス

className

<div className="App">
const logoOptions = {
      alt:"logo",
      className: "App-logo",
      src: logo
};
:
:
<img {...logoOptions} /> ← 展開される
for

htmlFor

 

if文
const title = "ちょっとさみしい";
:
:
<>
    {title && <p>{title}</p>}
</>

{title && <p>{title}</p>} ・・titleの部分がtrueだと続く値が処理される。

if と else
<>
    {title && <p>{title}</p>}
    {!title && <p>{title2}</p>} 
</>

とか、三項演算子を使う

<>
    {title? && <p>{title}</p> : <p>{title2}</p> }
</>

 

繰り返し
const targets = ["dog", "cat", "kame"];
:
:
<>
    {targets.map(target => <span>{target}</span>)}
</>

  • JSXリテラル内だと <!-- --> 使えない
  • {}でくくったJS書ける部分は // とか /* */ が使える
  • <>ツリーの一番上は、ひとつにしないとエラーになる

 

-note, React