6/15 代表勉強通信～Reactのお勉強③
こんばんは。代表の草場です。
Happy Birthday、自分。引き続き、「Learning React: A Hands-On Guide to Building Web Applications Using React and Redux, Second edition」を読んでいます。
四章の「Styling in React」に関してです。
「何世代にもわたって、HTMLコンテンツはCSSを使ってスタイリングされてきた。CSSはコンテンツとプレゼンテーションの間に良い分離を持っていた。セレクタ構文は、どの要素をスタイル化し、どの要素をスキップするかを選択する際に、多くの柔軟性を提供してきた。
Reactはコンテンツのスタイリングに関しては異なる見解を持っている。Reactのコアアイデアの1つは、アプリのビジュアルピースを自己完結型で再利用可能なものにすること。そのため、HTML要素とそれに影響を与える JavaScriptは、コンポーネントと呼ばれる同じバケツに入っている。そのため、ReactではHTMLやJavaScriptと並んで要素がどのように見えるかを指定することを推奨している。」
この章では、母音を表示させ、CSS的なやり方とReact的なやり方でスタイリングします。
まず、Reactコンテンツを保存するための空白のHTMLページを作ります。よくあるHTMLのベースコマンドを作成します。CSSように<style>も含めておきます。
以下のものを、CSSとReactの最新のアプローチの両方で行う方法をみていきます。
CSSを使ってReactコンテンツのスタイルを作ることは簡単です。通常HTMLで、classを指定しますが、Reactでやる場合はclassNameでクラスを指定します。後は通常のCSSの扱いと同じです。classNameで”letter”というクラスを指定した場合は、<style></style>の中で、.letter{}にてスタイルを指定します。
では、Reactの方法でスタイルするには？
Reactは、CSSを使用しないコンテンツのスタイリングにインラインアプローチを採用しています。これはビジュアルをより再利用しやすくするために設計されています。目標は、コンポーネントをブラックボックスにして、UIの見た目や動作に関連するすべてのものを格納することです。
.letter スタイルルールは使いません。そのため、classNameもいったん削除します。まずは以下のコンポーネントを作成します。
class Letter extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
このコンポーネント内でスタイルを指定するには、CSSプロパティとその値を内容とするオブジェクトを定義します。オブジェクトを定義したら、style属性を使って、スタイルを指定したいJSX要素にそのオブジェクトを割り当てます。適用したいスタイルを含むオブジェクトを定義します。
class Letter extends React.Component {
render() {
var letterStyle = {padding: 10,margin: 10,backgroundColor: “#FFDE00”,color: “#333”,display: “inline-block”,fontFamily: “monospace”,fontSize: 32,textAlign: “center”};
return (
<div>
{this.props.children}
</div>
);
}
}
letterStyleというオブジェクトがあり、その中のプロパティはCSSプロパティ名とその値だけです。簡単です。一応注意点は二つ。
１．シングルワードのCSSプロパティ（padding、margin、colorなど）は変更されない。
２．ダッシュを含む複数単語の CSS プロパティ (background-color、font-family、border-radius など) は、ダッシュを取り除き、2 つ目の単語の最初の文字を大文字にして、キャメルケースの 1 つの単語に変換されます。例えば、この例のプロパティを使用すると、background-color は backgroundColor に、font-family は fontFamily に、border-radius は borderRadius になります。
とは、このままだとハードコードなので、letterStyleオブジェクトのbackgroundColor属性を
backgroundColor: this.props.bgcolor
とします。基本は簡単ですね。
少しづつ進もう。明日もReact。
EVENTS
