React Cookbook

Admin & Dashboard

• marmelab/react-admin
• React Admin Demo
• Veltrix React
• Best React Admin Templates
• supasate/connected-react-router

Editors

• webcodesk/webcodesk
• Webcodesk
• Dmytro-Medzatiy/react-ui-builder
• tinacms/tinacms
• edtr-io/edtr-io
• Quill
• Slate
• Trumbowyg
• ContentTools
• SummerNote
• Squire
• Editor.js
• ProseMirror
• Webiny
• webiny/webiny-js

header-one

header-two

header-three

header-four

header-five

header-six

blockquote code-block

atomic

unordered-list-item,ordered-list-item**

unstyled***

unordered-list-item

ordered-list-item 0.

atomic draft-js#543

const types = [
  { type: 'header-one', component: 'h1' },
  { type: 'header-two', component: 'h1' },
  { type: 'header-three', component: 'h1' },
  { type: 'header-four', component: 'h1' },
  { type: 'header-five', component: 'h1' },
  { type: 'header-six', component: 'h1' },
  { type: 'blockquote', component: 'blockquote' },
  { type: 'code-block', component: 'pre' },
  { type: 'code', component: 'code' },
  { type: 'unordered-list-item', component: 'li' },
  { type: 'ordered-list-item', component: 'li' },
];

Top 15 Best Rich Text Editor Components

Drag Drop Editor

• prevwong/craft.js
  • A React Framework for building extensible drag and drop page editors
• cerner/kaiju
  • A drag and drop web editor for React components.
• artf/grapesjs
  • Free and Open source Web Builder Framework. Next generation tool for building templates without coding
• chriskitson/react-drag-drop-layout-builder

Wysiwyg

• jpuri/react-draft-wysiwyg

Markdown

• react-mde
  • React-mde has no 3rd party dependencies.
• outline/rich-markdown-editor
  • React and Prosemirror based markdown editor that powers Outline wiki

Theory

• Lessons from a year of WYSIWYG
• Wiki: Model-based design
  • in these four steps:
    1. modeling a plant
       • 为受控体建模。
       • Wiki: Plant (control theory)
    2. analyzing and synthesizing a controller for the plant
       • 配合受控体，分析及合成适合的控制器。
    3. simulating the plant and controller
       • 针对控制器及受控体进行仿真。
    4. integrating all these phases by deploying the controller
       • 整合上述的步骤来布署控制器。
• Wiki: Cybernetics (控制论)
  • 控制论与对系统的研究有关，如自动化系统、物理系统、生物系统、认知系统、以及社会系统等等。控制论可被应用于研究包含信令回路的系统。信令回路在这里指，当一个系统的运作改变了它所在的环境，而这些改变又反过来反馈于系统上，并导致系统本身的变化。这种循环最初被称为“循环影响”关系。

Forms

• Medium: Which React form library should you use
• jaredpalmer/formik
• rjsf-team/react-jsonschema-form
• NPM Trends: Forms
• Formik Issue #533
• hosseintalebi/formik-vs-react-final-form

Form Builders & Commercial

• formbuilder.online
  • kevinchappell/formBuilder
• Codebrahma/cb-react-forms
• kinto-formbuilder
• React Hook Form Builder
• react-hook-form/react-hook-form

Commercial/SaaS:

• Paperform (Templates)
• Cognito Forms
• Formbuilder Demo
• Formstack Templates
• Form.io - GitHub
• Zapier: Best Online Form Builder Software

Building a Responsive Drag and Drop UI

• CodeSandbox: dnd
• CodeSandbox: dnd 2

Interactive & UI Libraries

yarn add react-draggable react-resizable react-grid-layout

react-sortable-hoc

Category

1. Interaction
   • react-sortable-hoc
   • react-draggable
   • react-resizable
2. List/Table
   • react-window
   • react-virtualized
   • react-tiny-virtual-list
   • react-infinite
   • react-table
   • NPM Trends: Table libs
3. Layout
   • react-grid-layout
   • golden-layout
   • react-frame

Sorting

• react-sortable-hoc

Diagrams

• react-diagrams

Build & Analytics

• @scarf/scarf - npm 包分析工具
• react-frame rollup.config.js - Rollup 配置参考

React Native Tips

• React Native Debugging

访问开发菜单 (In-App Developer Menu)

• iOS Simulator: ⌘D 或 Hardware > Shake Gesture
• Android Emulator: ⌘M (Mac), Ctrl+M (Windows/Linux)
• ADB: adb shell input keyevent 82

重新加载 (Reloading)

• iOS Simulator: ⌘R
• Android Emulator: 连按两次 R

调试工具

• Debugger UI: http://localhost:8081/debugger-ui/
• reactotron