JSXで実装するUIライブラリに依存しないコンポーネント
- カテゴリー
- JavaScript >
- Web Components
全6回
このシリーズではJSX記法でDOMツリーを生成し、UIライブラリに依存しないコンポーネントの実装方法を解説します。
第6回 JSXをDOMにトランスパイルする方法 - 2
JSXをDOMに直接変換する方法を解説します。DOM要素の生成からイベントハンドラの適切な実装まで段階的に学びます。
第5回 JSXをDOMにトランスパイルする方法 - 1
JSXをDOMに直接変換する方法を解説します。まずは、TypeScriptの最小構成でJSXのトランスパイルの仕組みを理解します。
第4回 CSS Modulesのビルド結果の最適化
CSS Modulesのビルドにおいては、ひとえにクラス名の一意性と一貫性を保つことが必要です。そのために必要なビルド時の設定について解説します。
第3回 CSSの型チェックとビルドの連携
ビルド環境は整ったので、CSS Modulesのインポートで発生する型チェックエラーを適切にハンドリングできるようにしましょう。さらに、TypeScriptとCSSの型チェックをビルドに統合します。
第2回 esbuildによるビルド環境の構築
esbuildによって、できるだけシンプルなビルド環境を整えます。開発モード、プロダクションモードの2種類でビルドできるよう、設定を行います。
第1回 JSX記法を用いた実装と利用場面
このシリーズではJSX記法でDOMツリーを生成し、UIライブラリに依存しないコンポーネントの実装方法を解説します。まずは、そのメリットとデメリット、利用場面と考慮すべきポイントを解説します。