作为一款 SVG 编辑器，选择 SVG 没有毛病，这样渲染效果就完全交给浏览器，不需要根据标准去实现渲染效果，自己专心写编辑器的业务逻辑即可。...没有用 TypeScript，因为是很老的项目，当时 TypeScript 尚未大行其道。如果要做新项目，建议还是上 TypeScript，大型复杂软件还是很需要类型系统的。 打包用了 Rollup。...它没有用 React、Vue 这些 UI 框架，而是选择 Web Component，我认为这是一个糟糕的决策。...SVGEdit 使用了 patch（打补丁）的方式记录历史操作，没有使用图形树快照的方式。 下面是移动一个矩形产生的操作命令，它记录了修改图形属性的命令，该命令保存了一个元素修改前后的属性。...简评 UI 框架应该选择 React 或 Vue。 这样项目才会有更多人使用，作为一款比较古早的编辑器才可能焕发第二春。
本文讲解开源白板工具 Excalidraw 的架构设计。 版本 0.16.1 技术栈 Vite + React + TypeScript + Yarn + Husky。...目前市面上比较流行的 React 脚手架是 Vite，所以几个月前 Excalidraw 把脚手架替换为了 Vite，很合理。 使用了 React 去实现 UI 层，国外还是 React 流行一些。...TypeScript 用于类型标注，减少一些类型错误。 Yarn 是包管理器，没有使用 monorepo。 Husky 是 git hook 库，会在本地 git commit 时做一些校验。...但一些复杂的方法也是会抽离出来放到一个单独的文件里，比如 group.js 里放的都是和编组相关的逻辑。 渲染方案 Excalidraw 选择了 Canvas 2D 渲染方案。...没有使用脏矩形局部渲染。 图形拾取方案 图形拾取使用了几何法。 不同图形的的渲染逻辑的判断逻辑是写在一起的。 历史记录 历史记录的逻辑在 History 类中。
技术栈 React + pnpm + TypeScript + Canvas 2D + husky。 TypeScript 是必须的，因为这是一个复杂项目，现在已经有点复杂了，以后会更复杂。...开始没做 monorepo，后面倒是做了 monorepo，但我并没有把项目的分层分到每个包里，只是创建了两个 React 组件相关的包，一个组件库，一个图标库。分包了但没完全分。...渲染方案 渲染方案选择了原生的 Canvas 2D。 没有使用流行的图形库，比如 pixijs、konva 这些，我只是简单封装了一些图形对象，比如 sence/rect，自己实现了一个图形场景树。...Canvas 的易用性，搭配 wasm 的优秀性能，还是很香的。 图形拾取 图形拾取方案，是基于几何算法的。 为了提高效率，图形的点击区域只是图形的包围盒区域。这很不精细。...比如选择工具类，因为子操作太多了，我就把它拆成移动图形类、绘制选区类、旋转图形类等等。 图标 编辑器的一些图标是用 Figma 绘制的，然后复制为 SVG，放到 icon 包的 Rect 组件里。
/ 多选（select）功能使用非常普遍，React select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。...这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 6 款 React select 多选下拉组件，每一款都经过我实际测试，推荐给大家。...接下来介绍 6 款我自己常用的 React Select 第三方组件，它们各有特色，希望能帮你找到合适你的选择器 React Select - 多选下拉菜单王者组件库，覆盖多数应用场景 React multi...component] React-multi-select-component 是一款简洁的多选框组件，零依赖，超轻量（<5KB），使用 TypeScript 开发 支持 React 。...可使用键盘快捷键。 支持服务端渲染（SSR） 轻量级 使用 TypeScript 开发 扩展阅读《React Echarts 使用教程 - 如何在 React 中加入图表》 6.
旧 React 里的 TypeScript TypeScript 由微软设计并沿着 Angular 的路径一路进发，而彼时 React 开发出的 Flow 已然式微。...本地状态类型往往能推导出默认的状态值。 因为 hooks 组件就是函数，故可以编写返回 React.FC 类型（译注：FC 即 function components）的相同组件函数。...适配 hooks 的 TypeScript 特性 在之前的 React hooks TypeScript 例子中，对于 QuotationProps 接口中的属性如何使用、使用哪些，仍是不甚了了、颇有不便...我并不是懒得为了声明个新接口而懒得多写两行 -- 需要精确描述领域内命名时，我会使用接口；而出于保证本地代码正确性、降噪的目的，我就使用这些 TS 工具语法。...React Hooks 的其他益处 React 团队始终将 React 视为一个函数式框架。过去他们使用类组件以处理自身状态，现在有了 hooks 这种允许一个函数跟踪组件状态的技术。
之前，我也写过类似的开发命令行工具的文章，但是核心思想都是通过代码远程拉取Git仓库中的项目模板代码。有时候会因为网速的原因导致拉取失败，进而会初始化项目失败。 那么，有没有比这个更好的方案呢？...然后，自定义选择需要的模板进行初始化项目，就大功告成了！这种操作着实把我惊到了！我在想，如果我把create-vite的这种思路应用到我自己的脚手架工具中是不是很Nice!...我用的Yarn依赖管理工具，所以我首先使用命令初始化依赖。 yarn 然后，我们可以先打开根目录下的package.json文件，会发现有如下命令。...color属性，并且有类似颜色值的属性值，这是依赖kolorist导出的常量。...上图显示的Error，是因为我没有在demo模板上创建package.json文件，所以这里可以忽略。你可以在自己的模板里创建一个package.json文件。
大家好，我是「柒八九」。 今天，又双叒叕yòu shuāng ruò zhuó开辟了一个新的领域--「TypeScript实战系列」。...你能所学到的知识点 ❝ TypeScript简单概念 泛型Generics的概念和使用方式 在React利用泛型定义hook和props ❞ 文章概要 TypeScript 是什么 泛型Generics...这让我想起了我们利用 setState 定义 state 时 可以「直接提供新的状态值」， 或者提供一个函数，从旧的状态值上建立新的状态值。 然后，我们再继续看看Dispatch发生了啥？...在React中使用泛型 现在我们已经理解了泛型的概念，我们可以看看如何在React代码中应用它。...return ( .... ); } 上面代码不满足我们的情况。原因是，在一个select数组中，你可能有一个select的值是数字类型，而另一个select的值是字符串类型。
具体下来说，使用到的一些前端技术主要包括 •语言：JavaScript / TypeScript•后端框架：NodeJS•移动端开发框架：React Native•跨平台桌面开发框架：Electron•...不过, Rocket Chat使用Node.js来编写它的后端，证明了它仍然是值得考虑的后端选择。...不过这几年，React Native的风头似乎没有Flutter大。Flutter的实现机制决定了它在性能上更高效，所以也更吸引人。...当然，对于前端团队来说，使用React Native也能编写出非常好的移动app，肯定比不熟悉的Flutter来得更容易。 3.Electron 我前几周才专门就这个技术写了几篇文章。...但我认为，有几个困难是导致这种选择并不会成为常态： 1.不同端的技术分裂发展很久了，不同端团队使用不同技术来完成自己方向的功能这是当前的主流做法。
本文将指导您使用 K8S ，Docker，Yarn workspace ，TypeScript，esbuild，Express 和 React 来设置构建一个基本的云原生 Web 应用程序。...Workspaces(工作区) 进入到要初始化项目的文件夹，然后通过您喜欢的终端执行以下步骤： 使用 mkdir my-app 创建项目的文件夹（可以自由选择所需的名称）。...现在我们已经安装了 TypeScript，一个好习惯是告诉它如何运行。为此，我们将添加一个配置文件，该文件应由您的 IDE 拾取（如果使用 VSCode，则会自动获取）。...目前它并没有太大的作用，但是我们总是可以稍后再使用它并添加更多功能。...添加 .dockerignore 使用 .dockerignore 文件不是强制性的，但强烈建议您使用以下文件： 确保您没有将垃圾文件复制到容器中。 使 COPY 命令的使用更加容易。
在深入研究 Vue.js 文档并使用 Vue.js 之后（注意：我不是 Vue.js 专家），在有些方面 Vue.js 比 React 做的更好。... A 现在，我要为 React 辩护的一点是，React 鼓励你学习数据实际上是如何设置的以及它是如何变化的...这意味着它们的 TypeScript 支持是一流的，因为框架本身是用 TypeScript 编写的。...最终，React 用什么编写并不重要，我也不认为它有什么太大的区别，但看到 Vue.js 所拥有的仍然是一个很不错的小事情。 总结 我要放弃 React 并开始专门使用 Vue.js 吗？不。...如果我只能从文中提到的几个点中选择一个，那绝对是 风格指南。我很乐意看到 React 有一个官方支持和维护的风格指南。
由于React的生态极为庞大，本文内容部分来自一些别人的汇总，至于原文只要还是能找到的，我都会贴上地址，谢谢前期贡献的作者，如果有没有被汇总到的，欢迎在下面补充。...生态圈： React官方推荐超大型项目使用的TypeScript 为什么要把TypeScript放在第一位，因为TypeScript在构建超大型应用时，多人协作可以极大的加快工作效率，特别是前后端交互特别多...个人建议，在Node.js开发和React native以及大型React中使用TypeScript 在下载官方的react脚手架中，包含了一个第三方的ts创建脚手架的命令 在 Create React...App 中使用 TypeScript Create React App 内置了对 ·TypeScript` 的支持。...参考文章，react-native原理解析,看在react-native跨平台开发的无缝对接js和react份上，我决定坚定使用它。希望在1.0版本到来的时候，给我们一个惊喜。
由于`React`的生态极为庞大，本文内容部分来自一些别人的汇总，至于原文只要还是能找到的，我都会贴上地址，谢谢前期贡献的作者，如果有没有被汇总到的，欢迎在下面补充。...生态圈： `React`官方推荐超大型项目使用的`TypeScript` 为什么要把TypeScript放在第一位，因为TypeScript在构建超大型应用时，多人协作可以极大的加快工作效率，特别是前后端交互特别多...开发和React native以及大型React中使用TypeScript 在下载官方的react脚手架中，包含了一个第三方的ts创建脚手架的命令 在 Create React App 中使用 TypeScript...流程如下图： 参考文章，react-native原理解析,看在react-native跨平台开发的无缝对接js和react份上，我决定坚定使用它。希望在1.0版本到来的时候，给我们一个惊喜。...环境搭建： 首先，你需要使用 npm 或者 yarn 全局安装@tarojs/cli，或者直接使用npx: taro init myApp 选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览
将它们一起使用的原因是为了获得静态类型化语言( TypeScript )对 UI 的好处：减少 JS 带来的 bug，让前端开发更安全。 TypeScript 会编译我的 React 代码吗？...我将对其进行编译，并确保你没有错过任何内容。” React：“听起来对我很好！” 因此，答案是肯定的！...因为第二个实例返回一个函数，而不是一个值或表达式，所以我们我们注明了这个函数返回值是 React.FC 类型。 记住这两种方式可能会让人混淆。这主要取决于设计选择。...Hooks 幸运的是，当使用 Hook 时， TypeScript 类型推断工作得很好。这意味着你没有什么好担心的。...这是一个 React 和 TypeScript 协同工作的成果。 在极少数情况下，你需要使用一个空值初始化 Hook ，可以使用泛型并传递联合以正确键入 Hook 。
========许多网站为不同的场景提供 API简单的解决方案是发送 JSON 并返回 Typescript 中的interface你也可以使用 JSON-to-typescript 库来实现，但我将使用...因此在本文中，我们将使用它的 API 构建一个 JSON 到 Typescript 的转换器项目设置====在这里，我们会为 Web 应用创建项目环境。...我们将在前端使用 React.js，在后端使用 Node.js通过运行以下代码为 Web 应用创建项目文件夹：mkdir json-to-typescript-cncd json-to-typescript-cn...npm start设置 React 应用通过终端导航到根目录并创建一个新的 React.js 项目npm create vite@latest✔ Project name: client✔ Select...转换器创建用户界面，使用户能够在屏幕左侧添加 JSON 对象，并在屏幕右侧查看 Typescript 中的结果。
使用状态要注意哪些事情？要注意以下几点。不要直接更新状态状态更新可能是异步的状态更新要合并。数据从上向下流动可以使用TypeScript写React应用吗？怎么操作？...（1）如果还未创建 Create React App 项目直接创建一个具有 typescript 的 Create React App 项目： npx create-react-app demo --typescript...Keys 应该被赋予数组内的元素以赋予(DOM)元素一个稳定的标识，选择一个 key 的最佳方法是使用一个字符串，该字符串能惟一地标识一个列表项。...所以，如果想要修改state的值，就需要使用setState，而不能直接修改state，直接修改state之后页面是不会更新的。React.forwardRef是什么？它有什么作用？...在 HTML 中，表单元素如 、和通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。
对于vue-cli项目来说，从新跑一遍 vue create xxx-project ，选择Manually select features ，重新选择上typescript 选项即可。...在这种严格检查的情况下，如果你确实在某个地方想要给一个其他类型的值设置初始值为空，然后再赋值，可以使用联合类型来实现。...tsx组合方案：Vue Components + TypeScript 我起初是写react的，后写vue，所以更喜这种风格 import Vue, { VueConstructor, CreateElement...直接升级Vue3.0 我是没有怎么做，如果是重写性重构，我肯定会直接用Vue3.0。但是对于庞大的项目，重构直接用3.0，还是怕怕。...虽然尤大大说vue2 与vue3，不会像angular2 与其后代版本差异那么大，但是，我还是缓缓先 Vuex Store的痛 在ts里面使用vuex非常的蛋疼。
Please pick a preset: Manually select features ?...2021 年最前卫的跨平台开发选择！...(推荐) vite-electron-builder electron-vite 脚手架（推荐） 当然也可以使用脚手架，可选择 React 与 Vue，实际上也就是创建上面的前两个模板 npm create...的做法无非就是开启一个浏览器，然后和正常的网页开发一样，并提供桌面端的api使用。...以上就是我所使用 Vue3 来开发 Electron 的环境搭建过程，总体来说从 Electron 除了应用体积过大，对于前端开发者来说是非常友好的，既然环境配置完，那么现在就可以开始好好的编写桌面端应用了
(这里我选择3) To check syntax only // 只检测语法性错误 To check syntax and find problems // 检查语法错误并发现问题代码 To check...(这里我选择1) JavaScript modules (import/export) // 允许import/export CommonJS (require/exports) // 允许require.../exports None of these // 没有任何模块化 3、项目使用哪个框架？...(选择1) React Vue.js None of these 4、项目使用Ts？(Yes) Does your project use TypeScript?.../jsx-no-useless-fragment': 0, // 值对于布尔属性必须省略 'react/jsx-boolean-value': 0, // 必须默认导出
大家好，我是 ConardLi，在过去的几年里 TypeScript 变得越来越流行，现在许多工作都要求开发人员了解 TypeScript，各大厂的大型项目基本都要求使用 TypeScript 编写。...中的对象 TypeScript 中的对象必须拥有所有正确的属性和值类型： // 使用特定的对象类型注释声明一个名为 person 的变量 let person: { name: string;...例如，与在代码中使用非描述性数字不同，枚举通过描述性常量使代码更具可读性。 枚举还可以防止错误，因为当你输入枚举的名称时，智能提示将弹出可能选择的选项列表。...这意味着我们可以将 TypeScript 与三个最常见的 React 框架一起使用： create-react-app (https://create-react-app.dev/docs/adding-typescript...React 的 TypeScript 文件)扩展名的文件，并使用 TypeScript 编写我们的组件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
