WEB WEBフロントエンド開発

ReactのJSXについて

投稿日:2017年11月29日 更新日:

 

 

スタイル適用

  • Reactでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することが可能
  • classNameとstyle サービスを実装するにあたり、基本的なスタイルを独自に定義する。

 

className定義

  • htmlに直接cssを適用する場合、<button class="btn btn-default"> のようにclassを指定する方法が一般的な方法
  • ReactのJSXで定義する場合、classの代わりにclassNameを指定する。 <button className="btn btn-default">のように使用する。

 

インラインのstyle

  • Reactでは、インラインのstyleは文字列として指定されません。
  • 代わりオブジェクトとして指定され、キーはstyle名がキャメルケース形式にされたもので、 値はstyleの値になり、通常は文字列になります。

 

JSX のコメント構文

{/* ... */} または {// ...} という構文でコメントアウトできる。

 

 

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

TypeScriptのソールファイル分割

TypeScriptのソールファイル分割の方法についてまとめました   目次1. <reference>によるグローバルモジュールによる方法2.import/exportによる外 ...

Apache2のモジュール設定

Apache2のモジュール設定について Apache2はデフォルトでGCIモジュール(CGID)が無効になっている。 Apache2のモジュールの有効化/無効化の設定は、a2enmodコマンド(有効化 ...

JavaScriptのスコープとモジュールについて

仕様と問題点 JavaScriptにはアクセス修飾子はない。 JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ(ローカルスコープ)」のみ。JavaScriptではスコープ(変数 ...

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...