【Reactで作る】CSS＋Reactで実装するアコーディオンリスト javascript react jsx

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