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フロントエンド開発

執筆者:

関連記事

Chromeを使ったAngular-cliのオンラインデバッグの方法について

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソ ...

JavaScriptのコンストラクタとプロトタイプについて

概要 Javascriptにはクラスという概念はない コンストラクタ定義+newによってインスタンスを生成する。 ES6以前ではclass構文が実装がされていなかったので、prototypeという機能 ...

Cordovaのメモ書き

  devicereadyイベント   Cordovaのアプリが実行される時、Cordovaが提供しているネイティブ機能をHTML5側からすぐに呼び出せることが出来ない。 Cordovaフレ ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

lite-serverを使った開発サーバの構築

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。 記載した実行環境は以下の通りです。Node.jsのインストー ...