React Cookbook
约 3 分钟阅读
标签：实践手册
Admin & Dashboard
- marmelab/react-adminGitHubmarmelab/react-admin
- React Admin Demo
- Veltrix React
- Best React Admin Templates
- supasate/connected-react-routerGitHubsupasate/connected-react-router
Editors
- webcodesk/webcodeskGitHubwebcodesk/webcodesk
- Webcodesk
- Dmytro-Medzatiy/react-ui-builderGitHubDmytro-Medzatiy/react-ui-builder
- tinacms/tinacmsGitHubtinacms/tinacms在 Web 上添加属性编辑功能。 · tinacms/tinacms · 目前主要集成 next 和 gatsby · 后端交互目前以 git 为主 · 实现自定义后端可参照 next 的 local json 方式 · 虽然名字是 tinacms 但更偏向编辑器 - Contextual Editing笔记：TinaCMS
- edtr-io/edtr-ioGitHubedtr-io/edtr-io
- Quill
- Slate
- Trumbowyg
- ContentTools
- SummerNote
- SquireGitHubneilj/Squire
- Editor.js
- ProseMirror链接prosemirror.netprosemirror · low-level rte toolkit · 特性 · 结构化的模型树 · 模型不可变 · 支持协作编辑 · 模型受 schema 限制 - 实现自定义 · 解析自动化 - 但可能丢弃 schema 之外信息 · 模型状态变化类似于 redux笔记：ProseMirror
- Webiny
- webiny/webiny-jsGitHubwebiny/webiny-js
header-one
header-two
header-three
header-four
header-five
header-six
blockquote
text code-block
atomic
unordered-list-item,ordered-list-item**
unstyled***
unordered-list-item
ordered-list-item 0.
atomic
draft-js#543GitHub Issuefacebook/draft-js#543
JavaScript 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.jsGitHubprevwong/craft.jsprevwong/craft.js · MIT, React · drag and drop page editors · 编辑模式对现有组件侵入 · @craftjs/core · 150kb - self 30kb + @craftjs/utils 13kb + lodash 96kb + immer + nanoid笔记：craft.js
- A React Framework for building extensible drag and drop page editors
- cerner/kaijuGitHubcerner/kaiju
- A drag and drop web editor for React components.
- artf/grapesjsGitHubartf/grapesjs
- Free and Open source Web Builder Framework. Next generation tool for building templates without coding
- chriskitson/react-drag-drop-layout-builderGitHubchriskitson/react-drag-drop-layout-builder
Wysiwyg
Markdown
- react-mdenpm 包react-mdeNPM
- React-mde has no 3rd party dependencies.
- outline/rich-markdown-editorGitHuboutline/rich-markdown-editoroutline/outline · BSL 1.1 · Nodejs, PG, Redis, S3, OAuth(Slack, Google) · 前端 · flow 作为类型检测 · mobx、styled · 编辑器 outline/rich-markdown-editor笔记：Outline
- React and Prosemirror based markdown editor that powers Outline wiki
Theory
- Lessons from a year of WYSIWYG
- Wiki: Model-based designWikipediaModel-based design
- in these four steps:
- modeling a plant
- 为受控体建模。
- Wiki: Plant (control theory)WikipediaPlant (control theory)
- analyzing and synthesizing a controller for the plant
- 配合受控体，分析及合成适合的控制器。
- simulating the plant and controller
- 针对控制器及受控体进行仿真。
- integrating all these phases by deploying the controller
- 整合上述的步骤来布署控制器。
- Wiki: Cybernetics (控制论)Wikipedia控制论
- 控制论与对系统的研究有关，如自动化系统、物理系统、生物系统、认知系统、以及社会系统等等。控制论可被应用于研究包含信令回路的系统。信令回路在这里指，当一个系统的运作改变了它所在的环境，而这些改变又反过来反馈于系统上，并导致系统本身的变化。这种循环最初被称为“循环影响”关系。
Forms
- Medium: Which React form library should you use
- jaredpalmer/formikGitHubjaredpalmer/formikjaredpalmer/formik · React 的 form 解决方案 · 在 hook 没出来之前比较流行 · 目前推荐使用 react-hook-form笔记：formik
- rjsf-team/react-jsonschema-formGitHubrjsf-team/react-jsonschema-formrjsf-team/react-jsonschema-form · Apache-2.0, TS · UI: AntD, Bootstrap, Fluent UI, MUI, Semantic UI, Charkra UI · 参考 · Playground笔记：react-jsonschema-form
- NPM Trends: Forms
- Formik Issue #533GitHub Issuejaredpalmer/formik#533
- hosseintalebi/formik-vs-react-final-formGitHubhosseintalebi/formik-vs-react-final-form
Form Builders & Commercial
- formbuilder.online
- Codebrahma/cb-react-formsGitHubCodebrahma/cb-react-forms
- kinto-formbuilder
- React Hook Form Builder
- react-hook-form/react-hook-formGitHubreact-hook-form/react-hook-formreact-hook-form/react-hook-form 是什么？ · 基于 Hook 的轻量级表单组件 - 5KB · 接口 · 默认通过 ref 的方式进行注册 · 获取 name, type, value · 在设置 ref 时候就会初始化进行注册笔记：React Hook Form
Commercial/SaaS:
- Paperform (Templates)
- Cognito Forms
- Formbuilder Demo
- Formstack Templates
- Form.io - GitHubGitHubformio/formio
- Zapier: Best Online Form Builder Software
Building a Responsive Drag and Drop UI
Interactive & UI Libraries
yarn add react-draggable react-resizable react-grid-layout
react-sortable-hoc
Category
- Interaction
react-sortable-hocreact-draggablereact-resizable
- List/Table
react-windowreact-virtualizedreact-tiny-virtual-listreact-infinitereact-table- NPM Trends: Table libs
- Layout
react-grid-layoutgolden-layoutreact-frame
Sorting
Diagrams
Build & Analytics
- @scarf/scarfnpm 包@scarf/scarfNPM - npm 包分析工具
- react-frame rollup.config.jsGitHub 文件swiftcarrot/react-frame/rollup.config.js - Rollup 配置参考
React Native Tips
访问开发菜单 (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/
- reactotronGitHubinfinitered/reactotron
code-blockatomic unordered-list-item,ordered-list-item** unstyled***unordered-list-item
ordered-list-item 0.
atomic draft-js#543GitHub Issuefacebook/draft-js#543
JavaScript 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.jsGitHubprevwong/craft.jsprevwong/craft.js · MIT, React · drag and drop page editors · 编辑模式对现有组件侵入 · @craftjs/core · 150kb - self 30kb + @craftjs/utils 13kb + lodash 96kb + immer + nanoid笔记：craft.js
- A React Framework for building extensible drag and drop page editors
- cerner/kaijuGitHubcerner/kaiju
- A drag and drop web editor for React components.
- artf/grapesjsGitHubartf/grapesjs
- Free and Open source Web Builder Framework. Next generation tool for building templates without coding
- chriskitson/react-drag-drop-layout-builderGitHubchriskitson/react-drag-drop-layout-builder
Wysiwyg
Markdown
- react-mdenpm 包react-mdeNPM
- React-mde has no 3rd party dependencies.
- outline/rich-markdown-editorGitHuboutline/rich-markdown-editoroutline/outline · BSL 1.1 · Nodejs, PG, Redis, S3, OAuth(Slack, Google) · 前端 · flow 作为类型检测 · mobx、styled · 编辑器 outline/rich-markdown-editor笔记：Outline
- React and Prosemirror based markdown editor that powers Outline wiki
Theory
- Lessons from a year of WYSIWYG
- Wiki: Model-based designWikipediaModel-based design
- in these four steps:
- modeling a plant
- 为受控体建模。
- Wiki: Plant (control theory)WikipediaPlant (control theory)
- analyzing and synthesizing a controller for the plant
- 配合受控体，分析及合成适合的控制器。
- simulating the plant and controller
- 针对控制器及受控体进行仿真。
- integrating all these phases by deploying the controller
- 整合上述的步骤来布署控制器。
- Wiki: Cybernetics (控制论)Wikipedia控制论
- 控制论与对系统的研究有关，如自动化系统、物理系统、生物系统、认知系统、以及社会系统等等。控制论可被应用于研究包含信令回路的系统。信令回路在这里指，当一个系统的运作改变了它所在的环境，而这些改变又反过来反馈于系统上，并导致系统本身的变化。这种循环最初被称为“循环影响”关系。
Forms
- Medium: Which React form library should you use
- jaredpalmer/formikGitHubjaredpalmer/formikjaredpalmer/formik · React 的 form 解决方案 · 在 hook 没出来之前比较流行 · 目前推荐使用 react-hook-form笔记：formik
- rjsf-team/react-jsonschema-formGitHubrjsf-team/react-jsonschema-formrjsf-team/react-jsonschema-form · Apache-2.0, TS · UI: AntD, Bootstrap, Fluent UI, MUI, Semantic UI, Charkra UI · 参考 · Playground笔记：react-jsonschema-form
- NPM Trends: Forms
- Formik Issue #533GitHub Issuejaredpalmer/formik#533
- hosseintalebi/formik-vs-react-final-formGitHubhosseintalebi/formik-vs-react-final-form
Form Builders & Commercial
- formbuilder.online
- Codebrahma/cb-react-formsGitHubCodebrahma/cb-react-forms
- kinto-formbuilder
- React Hook Form Builder
- react-hook-form/react-hook-formGitHubreact-hook-form/react-hook-formreact-hook-form/react-hook-form 是什么？ · 基于 Hook 的轻量级表单组件 - 5KB · 接口 · 默认通过 ref 的方式进行注册 · 获取 name, type, value · 在设置 ref 时候就会初始化进行注册笔记：React Hook Form
Commercial/SaaS:
- Paperform (Templates)
- Cognito Forms
- Formbuilder Demo
- Formstack Templates
- Form.io - GitHubGitHubformio/formio
- Zapier: Best Online Form Builder Software
Building a Responsive Drag and Drop UI
Interactive & UI Libraries
yarn add react-draggable react-resizable react-grid-layout
react-sortable-hocCategory
- Interaction
react-sortable-hocreact-draggablereact-resizable- List/Table
react-windowreact-virtualizedreact-tiny-virtual-listreact-infinitereact-table- NPM Trends: Table libs
- Layout
react-grid-layoutgolden-layoutreact-frameSorting
Diagrams
Build & Analytics
- @scarf/scarfnpm 包@scarf/scarfNPM - npm 包分析工具
- react-frame rollup.config.jsGitHub 文件swiftcarrot/react-frame/rollup.config.js - Rollup 配置参考
React Native Tips
访问开发菜单 (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/- reactotronGitHubinfinitered/reactotron
依赖包react-draggablenpm 包react-draggableNPMreact-resizablenpm 包react-resizableNPMreact-grid-layoutnpm 包react-grid-layoutNPM
关联信息
反向链接、本文链接的其他页面和外部资料。
参考资料
GitHub27 条
- artf/grapesjsgithub.com/artf/grapesjs
- cerner/kaijugithub.com/cerner/kaiju
- chriskitson/react-drag-drop-layout-buildergithub.com/chriskitson/react-drag-drop-layout-builder
- clauderic/react-sortable-hocgithub.com/clauderic/react-sortable-hoc
- Codebrahma/cb-react-formsgithub.com/Codebrahma/cb-react-forms
- Dmytro-Medzatiy/react-ui-buildergithub.com/Dmytro-Medzatiy/react-ui-builder
- edtr-io/edtr-iogithub.com/edtr-io/edtr-io
- facebook/draft-js#543github.com/facebook/draft-js/issues/543
- formio/formiogithub.com/formio/formio
- hosseintalebi/formik-vs-react-final-formgithub.com/hosseintalebi/formik-vs-react-final-form
- infinitered/reactotrongithub.com/infinitered/reactotron
- jaredpalmer/formikgithub.com/jaredpalmer/formik
- jaredpalmer/formik#533github.com/jaredpalmer/formik/issues/533
- jpuri/react-draft-wysiwyggithub.com/jpuri/react-draft-wysiwyg
- kevinchappell/formBuildergithub.com/kevinchappell/formBuilder
- marmelab/react-admingithub.com/marmelab/react-admin
- neilj/Squiregithub.com/neilj/Squire
- outline/rich-markdown-editorgithub.com/outline/rich-markdown-editor
- prevwong/craft.jsgithub.com/prevwong/craft.js
- projectstorm/react-diagramsgithub.com/projectstorm/react-diagrams
- react-hook-form/react-hook-formgithub.com/react-hook-form/react-hook-form
- rjsf-team/react-jsonschema-formgithub.com/rjsf-team/react-jsonschema-form
- supasate/connected-react-routergithub.com/supasate/connected-react-router
- swiftcarrot/react-frame/rollup.config.jsgithub.com/swiftcarrot/react-frame/blob/master/rollup.config.js
- tinacms/tinacmsgithub.com/tinacms/tinacms
- webcodesk/webcodeskgithub.com/webcodesk/webcodesk
- webiny/webiny-jsgithub.com/webiny/webiny-js
Wikipedia3 条
- Model-based designWikipedia:Model-based design
- Plant (control theory)Wikipedia:Plant (control theory)
- 控制论Wikipedia:控制论
依赖包2 条
- @scarf/scarfwww.npmjs.com/package/@scarf/scarf
- react-mdewww.npmjs.com/package/react-mde
其他外链31 条
- alex-d.github.io/Trumbowygalex-d.github.io/Trumbowyg
- athemes.com/collections/best-react-admin-templatesathemes.com/collections/best-react-admin-templates
- codesandbox.io/s/74wxnz38m6?file=/src/index.js:155-165codesandbox.io/s/74wxnz38m6?file=%2Fsrc%2Findex.js%3A155-165
- codesandbox.io/s/n9m02v24yjcodesandbox.io/s/n9m02v24yj
- codex.so/editorcodex.so/editor
- facebook.github.io/react-native/docs/debuggingfacebook.github.io/react-native/docs/debugging
- formbuilder.dev/demoformbuilder.dev/demo
- formbuilder.onlineformbuilder.online/
- getcontenttools.comgetcontenttools.com/
- kinto.github.io/formbuilderkinto.github.io/formbuilder
- marmelab.com/react-admin-demomarmelab.com/react-admin-demo
- medium.com/@ReactEurope/which-react-form-library-should-you-use-in-your-app-in-2020-469894c687dmedium.com/@ReactEurope/which-react-form-library-should-you-use-in-your-app-in-2020-469894c687d
- medium.com/@yurkaninryan/lessons-from-a-year-of-wysiwyg-915135ec846emedium.com/@yurkaninryan/lessons-from-a-year-of-wysiwyg-915135ec846e
- ourcodeworld.com/articles/read/1065/top-15-best-rich-text-editor-components-wysiwyg-for-reactjsourcodeworld.com/articles/read/1065/top-15-best-rich-text-editor-components-wysiwyg-for-reactjs
- paperform.copaperform.co/
- paperform.co/templatespaperform.co/templates
- prosemirror.netprosemirror.net/
- quilljs.comquilljs.com/
- react-hook-form.com/form-builderreact-hook-form.com/form-builder
- summernote.orgsummernote.org/
- veltrix-v.react.themesbrand.comveltrix-v.react.themesbrand.com/
- webcodesk.comwebcodesk.com/
- www.cognitoforms.comwww.cognitoforms.com/
- www.form.iowww.form.io/
- www.formstack.com/templateswww.formstack.com/templates
- www.npmtrends.com/final-form-vs-formik-vs-react-form-vs-react-redux-formwww.npmtrends.com/final-form-vs-formik-vs-react-form-vs-react-redux-form
- www.npmtrends.com/react-data-grid-vs-react-datasheet-vs-react-list-vs-react-table-vs-react-virtualized-vs-react-windowwww.npmtrends.com/react-data-grid-vs-react-datasheet-vs-react-list-vs-react-table-vs-react-virtualized-vs-react-window
- www.prototypr.io/2019/11/27/building-drag-drop-uiwww.prototypr.io/2019/11/27/building-drag-drop-ui
- www.slatejs.orgwww.slatejs.org/
- www.webiny.comwww.webiny.com/
- zapier.com/learn/forms-surveys/best-online-form-builder-softwarezapier.com/learn/forms-surveys/best-online-form-builder-software