【Reactで作る】iOSのスイッチのようなトグルボタン javascript react jsx

【Reactで作る】iOSのスイッチのようなトグルボタン javascript react jsx

Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのものです。 状態を持つコンポーネント 状態に応じて見た目が変わる JSX(Babel)を利用したJavaScript 「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。 type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。 Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。 ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。