初めてのREACT-v6

# Reactにおけるstyleの書き方と長所

JSXのタグ内にhtml同様style属性を記載できます。
jsフレームワークならではの挙動ができるのでみていきましょう。

JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って一緒に進めていくとやりやすいです。 https://jscomplete.com/playground

# styleを変数に

class ConditionalStyle extends React.Component {
const style = { color: 'red', fontSize: 30 }
  render() {
    return (
      <div style={this.style}>
          色が変わる
      </div>
    );
  }
}

ReactDOM.render(
  <ConditionalStyle />,
  mountNode,
);

上記の記述をみると通常のhtmlであればタブーとされているstyle属性が記入されていることがわかります。
動的な値には{{}}を利用してオブジェクトリテラルを開始するようになっていて、上記の場合変数名styleが入っています。
このように変数として指定して、使い回すことも可能です。

# 条件付きスタイル

class ConditionalStyle extends React.Component {
  render() {
    return (
      <div style={{color: Math.random() < 0.5 ? 'green': 'red'}}>
          色が変わる
      </div>
    )
  }
}

ReactDOM.render(
  <ConditionalStyle />,
  mountNode,
);

上記はレンダリングするごとに1/2の確率で色が変わる実装になります。 通常のJSであればクラスを取得してある条件を満たしていれば上書きするというフローで実現できることができるかと思うのですが、
Reactの場合はもっと簡単に実装できるのです。

# まとめ

他にもhtmlでいうclass=""と同じclassNameなどの属性があったりするのですが、
今回は実務でも使われそうな例を書いてみました。
今までのことが理解できていれば簡単なアプリケーションが構築できるかと思います。
次回からは何かしら作ってみる予定です！