【執筆中】Reactでブロックエディタを作るフルスクラッチコンポーネントツアー

【執筆中】Reactでブロックエディタを作るフルスクラッチコンポーネントツアー

IT系コンテンツを投稿するブログ執筆画面をイメージしたブロックエディタの開発を体験する本です。 UIライブラリは一切使わず、全てのコンポーネントを一から実装します。 学べること - TypeScriptの型定義テクニック - 本格UIを一から実装するスキル - UIのアクセシビリティ(WAI-ARIAやキーボード操作)対応 - useReducerによる状態管理 - カスタムhookのアイデア

Chapters
Chapter 01無料公開

Introduction

Chapter 02無料公開

環境構築 - Viteプロジェクトのセットアップ

Chapter 03無料公開

環境構築 - styled-componentsの導入

Chapter 04無料公開

環境構築 - ESlintとPrettier導入

Chapter 05無料公開

環境構築 - storybook導入

Chapter 06

ブロックエディタの雛形をつくる

Chapter 07

ブロックの型を定義する

Chapter 08

Paragraphブロック ~定義~

Chapter 09

コンポーネントの分類を考える

Chapter 10

Toolbar ~Addボタンの組み込み~

Chapter 11

HTML要素をラップして基盤をつくる ~ Button ~

Chapter 12

アイコンのアクセシビリティ対応を考える ~ IconButton ~

Chapter 13

目には見えないが聞くことができる ~ VisuallyHidden ~

Chapter 14

聞くことはできないが目には見える ~ aria-hidden ~

Chapter 15

雫風のスタイリング ~ AddButton ~

Chapter 16

このChapter以降は下書きです。予告編としてお楽しみください。

Chapter 17

HOCでtooltipを追加する ~ AddButton ~

Chapter 18

ADDアクションによる編集ブロック追加

Chapter 19

UPDATEアクションによるリアルタイムプレビュー

Chapter 20

レスポンシブレイアウトをコンポーネント化する

Chapter 21

自動的に高さが伸びるテキストエリアをつくる

Chapter 22

Drag & Dropによるブロックの並び替え

Chapter 23

ブロックを一つ上or下に移動するMOVEボタン

Chapter 24

ブロック削除ボタン

Chapter 25

入力時にラベルが浮き上がる編集欄コンポーネント

Chapter 26

Linkブロックの実装

Chapter 27

Prism.jsによるハイライトコードコンポーネント

Chapter 28

Codeブロックの実装

Chapter 29

区切り線ブロックの実装

Chapter 30

Hamburger Menu風のオプションボタン

Chapter 31

inlineモードとblockモードの切り替え

Chapter 32

アクセシブルなPopup Menuコンポーネント

Chapter 33

Codeブロックの言語選択

Chapter 34

KaTeXによるMathFormulaブロックの実装

Chapter 35

「さらに追加」を実現するAddMoreコンポーネント

Chapter 36

コンポーネント配列のjoinを行うコンポーネント

Chapter 37

Keyboardブロックの実装

Chapter 38

キーボード操作に対応したComboBoxコンポーネント

Chapter 39

Headingブロックの実装とlevel選択

Chapter 40

Listブロックの実装

Chapter 41

数字入力を強力で安全にするStepperコンポーネント

Chapter 42

Ordered Listの開始番号を編集可能にする

Chapter 43

引用文ブロックの実装

Chapter 44

Toggleコンテンツブロックの実装

Chapter 45

FileDropzone

Chapter 46

アップロード画像の一時previewとcancel

Chapter 47

Tabコンポーネント

Chapter 48

URL入力による画像指定に対応する

Chapter 49

lightboxコンポーネント

Chapter 50

Terminalブロック

Chapter 51

UndoとRedo

Community
Author
tomixy

10代を卒業したばかりのフロントエンドエンジニア

Topics
公開
本文更新
文章量
45,218
価格
1,000