【執筆中】Reactでブロックエディタを作るフルスクラッチコンポーネントツアー
IT系コンテンツを投稿するブログ執筆画面をイメージしたブロックエディタの開発を体験する本です。 UIライブラリは一切使わず、全てのコンポーネントを一から実装します。 学べること - TypeScriptの型定義テクニック - 本格UIを一から実装するスキル - UIのアクセシビリティ(WAI-ARIAやキーボード操作)対応 - useReducerによる状態管理 - カスタムhookのアイデア
Chapters
Introduction
環境構築 - Viteプロジェクトのセットアップ
環境構築 - styled-componentsの導入
環境構築 - ESlintとPrettier導入
環境構築 - storybook導入
ブロックエディタの雛形をつくる
ブロックの型を定義する
Paragraphブロック ~定義~
コンポーネントの分類を考える
Toolbar ~Addボタンの組み込み~
HTML要素をラップして基盤をつくる ~ Button ~
アイコンのアクセシビリティ対応を考える ~ IconButton ~
目には見えないが聞くことができる ~ VisuallyHidden ~
聞くことはできないが目には見える ~ aria-hidden ~
雫風のスタイリング ~ AddButton ~
このChapter以降は下書きです。予告編としてお楽しみください。
HOCでtooltipを追加する ~ AddButton ~
ADDアクションによる編集ブロック追加
UPDATEアクションによるリアルタイムプレビュー
レスポンシブレイアウトをコンポーネント化する
自動的に高さが伸びるテキストエリアをつくる
Drag & Dropによるブロックの並び替え
ブロックを一つ上or下に移動するMOVEボタン
ブロック削除ボタン
入力時にラベルが浮き上がる編集欄コンポーネント
Linkブロックの実装
Prism.jsによるハイライトコードコンポーネント
Codeブロックの実装
区切り線ブロックの実装
Hamburger Menu風のオプションボタン
inlineモードとblockモードの切り替え
アクセシブルなPopup Menuコンポーネント
Codeブロックの言語選択
KaTeXによるMathFormulaブロックの実装
「さらに追加」を実現するAddMoreコンポーネント
コンポーネント配列のjoinを行うコンポーネント
Keyboardブロックの実装
キーボード操作に対応したComboBoxコンポーネント
Headingブロックの実装とlevel選択
Listブロックの実装
数字入力を強力で安全にするStepperコンポーネント
Ordered Listの開始番号を編集可能にする
引用文ブロックの実装
Toggleコンテンツブロックの実装
FileDropzone
アップロード画像の一時previewとcancel
Tabコンポーネント
URL入力による画像指定に対応する
lightboxコンポーネント
Terminalブロック
UndoとRedo
Community
Author
Topics
- 公開
- 本文更新
- 文章量
- 約45,218字
- 価格
- 1,000円