react 打字机效果_如何用打字稿构建素描插件React第1部分

2023-10-11 04:40

本文主要是介绍react 打字机效果_如何用打字稿构建素描插件React第1部分,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

react 打字机效果

At Overlay, we started 2 years ago building a Sketch Plugin to help designers t export their symbols into prod-ready React/Vue.js components. I write this article to help people create Sketch plugins and to share our technical expertise on this subject.

在Overlay,我们从2年前开始构建一个Sketch Plugin,以帮助设计师将其符号导出到支持prod的React / Vue.js组件中。 我写这篇文章是为了帮助人们创建Sketch插件并分享我们在此主题上的技术专长。

First, Sketch plugins are very good tools to extend Sketch functionalities. Sketch has thousand plugins built by the community. For example, at Overlay our Sketch plugin allows designers to check the components consistency with their project guidelines (color, typography), extract data from Sketch (symbols data, assets, text style, etc…) and detect design defaults.

首先,Sketch插件是扩展Sketch功能的非常好的工具。 Sketch具有社区创建的数千个插件 。 例如,在Overlay中,我们的Sketch插件可让设计人员检查组件是否符合其项目准则(颜色,版式),从Sketch中提取数据(符号数据,素材资源,文本样式等)并检测设计默认值。

教程目标 (Tutorial objective)

This tutorial aims at creating a basic but complete Sketch plugin with React and Typescript, from scratch. I want to give you an overview of what can be achieved with Sketch Plugins: create web-feeling interfaces, trigger Sketch native functionalities from a web view, trigger web view app functionalities from Sketch native events.

本教程旨在从头开始使用React和Typescript创建一个基本但完整的Sketch插件。 我想向您概述使用Sketch Plugins可以实现的功能:创建Web感觉界面,从Web视图触发Sketch本机功能,从Sketch Native事件触发Web视图应用程序功能。

To keep things challenging, we are going to build a linter plugin: PixelPerfect ! PixelPerfect users will be able to select a Sketch Symbol and check if there are imperfect pixels in its layers.

为了使事情更具挑战性,我们将构建一个linter插件:PixelPerfect! PixelPerfect用户将能够选择草图符号,并检查其图层中是否存在不完美的像素。

Image for post
Symbol with pixel imperfections
具有像素缺陷的符号

If the plugin detects imperfect pixel, the user can fix all imperfections in one click through the plugin.

如果插件检测到不完美的像素,则用户只需单击一下插件即可修复所有缺陷。

The tutorial will be split in three parts, that will be published successively:

本教程将分为三个部分,并将依次发布:

  • [Part 1] Some theory and get started your first plugin with React

    [第1部分]了解一些理论并开始使用React编写第一个插件
  • [Part 2 ] Communication between React and Sketch

    [第二部分] React和Sketch之间的通信
  • [Part 3] First deployment and how to automate them

    [第3部分]首次部署以及如何使它们自动化

建筑 (Architecture)

Let’s start with designing the plugin architecture, there are two approaches for building a Sketch plugins :

让我们从设计插件架构开始,有两种构建Sketch插件的方法:

The native approach, where all the application code is stored in the user’s computer. This is the case for all plugins built without web-views (Zeplin, Craft) and plugins built with a web view where app files are hosted in local (see this tutorial) and displayed by Safari (opened by Sketch).

机方法,其中所有应用程序代码都存储在用户的计算机中。 对于所有没有Web视图构建的插件( Zeplin , Craft )和使用Web视图构建的插件都是这种情况,其中应用程序文件托管在本地(请参见本教程 ),并由Safari显示(由Sketch打开)。

Image for post
The native approach
本机方法

The web approach, where only a few code parts are stored in the user’s computer. in this case, we stored code responsible for web view handling and Sketch/Plugin communication. The rest of the application (interface and logic ) is stored on a server as a classic web client-side application.

Web方法 ,其中只有很少的代码部分存储在用户的计算机中。 在这种情况下,我们存储了负责Web视图处理和Sketch / Plugin通信的代码。 其余的应用程序(接口和逻辑)作为经典的Web客户端应用程序存储在服务器上。

Image for post
The web approach
网络方法

Obviously, the second approach looks more complicated, so why choose this one ?

显然,第二种方法看起来更复杂,那么为什么选择这种方法呢?

  • Web approach don’t requires Objective-C competences (which are rare) so “common” web developers can create a plugin.

    Web方法不需要Objective-C能力(这是很少见的),因此“普通” Web开发人员可以创建插件。
  • With the web approach, you can ensure that all your users always have the plugin’s last version running (the one deployed on the server). This helps you a lot to iterate faster on your product. With the native approach you are dependent to the version installed in the user computer. That can leads you to new hard tech challenges like API versioning or retro compatibility changes.

    使用Web方法,可以确保所有用户始终运行插件的最新版本(服务器上已部署的最新版本)。 这可以帮助您更快地迭代产品。 使用本机方法时,您将依赖于用户计算机中安装的版本。 这可能会导致您面临新的技术难题,例如API版本控制或复古兼容性更改。
  • From a user point of view, the web approach is more user friendly, you don’t have to update your plugin manually as the browser will take care about it.

    从用户的角度来看,Web方法更加用户友好,您无需手动更新插件,因为浏览器会处理它。

Nevertheless, be careful with this approach. If you want to get the full potential you must avoid writing business logic in the native part of your application as this part can be painful for your user to update (manual update).

但是,请谨慎使用此方法。 如果您想发挥全部潜能,则必须避免在应用程序的本机部分中编写业务逻辑,因为这部分可能会使用户难以进行更新(手动更新)。

At Overlay, we chose the web approach because :

在Overlay ,我们选择网络方法是因为:

  • We want to iterate on the plugin every week.

    我们想每周迭代一次插件。
  • We don’t know Objective-C but we have strong knowledges on web development.

    我们不了解Objective-C,但是我们对Web开发有丰富的知识。
  • We want to connect to several designer tools (Figma, AdobeXD, etc…) and we want to easily reuse our plugin interface.

    我们想要连接到多个设计器工具( Figma , AdobeXD等),并且希望轻松地重用我们的插件界面。

Ready to start ? Let’s go !

准备开始 ? 我们走吧 !

开始吧 (Get started)

We will build the native part with SKPM and the web part with React but you can do this with all JS frameworks (I haven’t tested with Backbone…#RIP).

我们将使用SKPM构建本机部分,并使用React构建Web部分,但是您可以使用所有JS框架(我尚未使用Backbone …#RIP进行测试)来完成此任务

Prerequisites:

先决条件

  • Node

    节点

  • Sketch

    草图

First, create an empty directory project

首先,创建一个空目录项目

mkdir pixel-perfect

Create inside this directory a Sketch plugin with web view with SKPM

在此目录中创建一个具有SKPM Web视图的Sketch插件

cd pixel-perfect && npx skpm create pixel-perfect --template=skpm/with-webview && mv pixel-perfect pixel-perfect-native

Then let’s start the Sketch watcher

然后让我们启动Sketch Watcher

cd pixel-perfect-native && npm run watch

Now the native part of your Sketch plugin must be running, you must see this in Sketch

现在您的Sketch插件的本机部分必须正在运行,您必须在Sketch中看到它

Image for post
SKPM hello world
SKPM你好世界

Now let’s build the plugin’s web part. First create the React app with create react app inside the pixel-perfect folder

现在,让我们构建插件的Web部件。 首先使用pixel-perfect文件夹内的create react app创建React应用

npx create-react-app pixel-perfect-web --template typescript

Then let’s start the Webpack server

然后让我们启动Webpack服务器

cd pixel-perfect-web && npm run start

Now you must see this in your browser at http://localhost:3000

现在,您必须在浏览器中的http:// localhost:3000上看到它

Image for post
Create React App hello world
创建React App的Hello World

Ok now let’s connect the React app to the Sketch plugin, to do so, edit my-command.js

好的,现在让我们将React应用程序连接到Sketch插件,为此,请编辑my-command.js

Now open/close the plugin, you must see the web approach’s Hello world 🎉

现在打开/关闭插件,您必须看到网络方法的 Hello world🎉

Image for post
The web approach’s Hello world
网络方法的世界

开发环境 (Development environment)

Now, let’s have a look at the development environment we just built. First, we have the native part in the pixel-perfect-native/src folder. When we run npm run build command, SKPM launches a Webpack server to build the Sketch plugin in this location pixel-perfect-native/pixel-perfect-sketch/sketchplugin. SKPM watcher works well but it demands to open manually the new built plugin on each change which is painful. I recommend adding a Makefile in the project root pixel-perfect with this command.

现在,让我们看一下我们刚刚构建的开发环境。 首先,我们在pixel-perfect-native/src文件夹中具有本机部分。 当我们运行npm run build命令时, SKPM启动Webpack服务器在该位置pixel-perfect-native/pixel-perfect-sketch/sketchplugin构建Sketch插件。 SKPM watcher运行良好,但是每次更改时都需要手动打开新构建的插件,这很痛苦。 我建议使用此命令在项目根pixel-perfect添加一个Makefile。

With this Makefile in one command make build you can build and open the new plugin.

有了这个Makefile在一个命令make build你可以建立并打开新的插件。

The web part is located in pixel-perfect-web/src folder. When we run npm run start command, React script launches a Webpack server and builds the web app files. Every changes in the web part will be hot reloaded in the browser and in the Sketch plugin, that will be super useful to continue the plugin !

Web部件位于pixel-perfect-web/src文件夹中。 当我们运行npm run start命令时, React脚本会启动Webpack服务器并构建Web应用程序文件。 Web部件中的所有更改都将在浏览器 Sketch插件中热加载,这对于继续插件非常有用!

It can be pretty hard to debug the native part. I recommend to install and use SketchDevTools to print data. For the web part you can use your favorite browser dev-tools or Safari dev-tools directly inside the plugin web-view. To know more about debugging follow this Sketch tutorial.

调试本机部分可能非常困难。 我建议安装并使用SketchDevTools打印数据。 对于Web部件,您可以直接在插件Web视图内使用自己喜欢的浏览器开发工具或Safari开发工具。 要了解有关调试的更多信息,请遵循此Sketch教程 。

添加快捷方式以打开插件 (Add a Shortcut to open up the plugin)

Clicking is painful for users and for developers. Instead of asking to the user to click each time on the plugin command, we will add a shortcut to toggle the plugin interface, what about ^+shift+P ? To do so let’s update the manifest.json native file with the shortcut line

单击对于用户和开发人员来说都是痛苦的。 我们不会要求用户每次在plugin命令上单击,而是添加快捷方式来切换插件界面, ^+shift+P怎么办? 为此,我们使用快捷方式行更新manifest.json本机文件

"commands": [
{
"name": "my-command",
"identifier": "pixel-perfect.my-command-identifier",
"script": "./my-command.js", "shortcut": "ctrl shift p", "handlers": {
"run": "onRun",
"actions": {
"Shutdown": "onShutdown"
}
}
}
],

Now we can rebuild the plugin and test it in Sketch :)

现在我们可以重建插件并在Sketch中对其进行测试了:)

向Sketch插件添加一个Reactive接口 (Add a Reactive interface to the Sketch plugin)

Now we will design the main screen plugin, it will show if the plugin has found some imperfections. Let’s change the App.tsx.

现在我们将设计主屏幕插件,它将显示该插件是否发现了一些缺陷。 让我们更改App.tsx

Then we need to change the App.css

然后我们需要更改App.css

Now we can see our new beautiful interface 🖼

现在我们可以看到我们新的漂亮界面🖼

Image for post

Now let’s add a state hasImperfection to handle the component status. We use a ternary expression to conditionally render the clean button or the success message.

现在让我们添加一个状态hasImperfection来处理组件状态。 我们使用三元表达式有条件地渲染“清理”按钮或成功消息。

We use React hook useState, if you are not familiar with it, you can learn about it here or you can achieve the same result with the setState method. Now you must see this after clicking on the button

我们使用React hook useState,如果您不熟悉它,可以在这里学习 或者您可以使用setState方法获得相同的结果。 现在,您必须在单击按钮后看到此内容

Image for post

You are done, Pixel Perfect is up !

您完成了,Pixel Perfect起来了!

Code source available on this GitHub repository: https://github.com/Overlay-tech/pixel-perfect-tutorial

该GitHub存储库上可用的代码源: https : //github.com/Overlay-tech/pixel-perfect-tutorial

结论 (Conclusion)

I hope I have convinced you of the capabilities of React to create a Sketch Plugin with very little effort. To sum things up:

我希望我已经使您相信React可以毫不费力地创建Sketch插件的功能。 总结一下:

  • SKPM and Create React App can create a dummy plugin in one command line.

    SKPM和Create React App可以在一个命令行中创建一个虚拟插件。

  • The Web approach allow to iterate really fast on your code base

    Web方法允许在您的代码库上真正快速地迭代
  • Using a web-view plus React for building an interactive interface is very straight forward.

    使用Web视图加上React来构建交互式界面非常简单。

However, Pixel Perfect is not yet a complete Sketch Plugin, in the next article we will :

但是,Pixel Perfect还不是一个完整的Sketch插件,在下一篇文章中,我们将:

  • Pass the component information from Sketch to React to know if the symbols has inconsistencies.

    将组件信息从Sketch传递到React,以了解符号是否不一致。
  • Connect the ‘Clean my symbol’ button to Sketch native action to clean the component.

    将“清洁我的符号”按钮连接到“草绘本机动作”以清洁组件。

If you want to know more about Overlay go here, it’s free to try:

如果您想了解更多有关Overlay的信息,请点击此处,可以免费尝试:

We build a series of technical articles to explain how Overlay engineering team designs, builds and operates our systems and we will continue to post tech content every month, if you are interested in tech problems, follow Overlay blog.

我们撰写了一系列技术文章来说明Overlay工程团队如何设计,构建和操作我们的系统,如果您对技术问题感兴趣,我们将继续每月发布技术内容,请关注Overlay博客 。

翻译自: https://medium.com/overlay-blog/how-to-build-a-sketch-plugin-with-typescript-react-part-1-ac3bbc2e5443

react 打字机效果


http://www.taodudu.cc/news/show-7919484.html

相关文章:

  • [UE]关于打字机效果以及倒计时UI显示
  • NOIP 2008 火柴棒等式
  • [NOIP2008 提高组] 火柴棒等式
  • 火柴棒等式——回溯搜索
  • 信息学奥赛一本通 1852:【08NOIP提高组】火柴棒等式 | OpenJudge NOI 4.7 8466:火柴棒等式 | 洛谷 P1149 [NOIP2008 提高组] 火柴棒等式
  • 枚举法——火柴棒等式
  • 枚举 火柴棒等式
  • 探基不识火柴棒JAVA
  • 4805:火柴棒等式
  • luoguP1149火柴棒等式(暴力枚举)java 蓝桥杯备考
  • 1596 - 火柴棒三角形问题
  • 关于火柴棒数字游戏的方案设计思考
  • NGS 分析流程 (四)
  • 各种人类数据库--更新中
  • 「GATK 3.8」VariantAnnotator介绍
  • GATK之HaplotypeCaller
  • 软件包下载报错的解决方案
  • hg38 resource bundle google cloud download links
  • 05GATK流程和找变异
  • SnpSift对vcf文件变异位点dbsnp注释
  • 如何安装SNPlocs.Hsapiens.dbSNP155.GRCh37包
  • 如何下载、选择dbSNP数据库的变异位点vcf文件(hg19/hg38)
  • dbSNP数据库简介
  • Minimum Snap Grid Size is 10mil
  • Matlab做mil,模式识别 - 处理多示例学习(MIL)特征(matlab)
  • 现代汽车与LG新能源等企业签署电动汽车电池租赁谅解备忘录
  • 海格里斯带你追密:如何采购塑料托盘?塑料托盘采购注意事项有哪些?
  • 山东柒佰丽环氧富锌底漆详细说明
  • 对比三种模块化数据中心技术
  • Mac教程|更改Mac电脑显示器屏幕亮度的方法大全
  • 这篇关于react 打字机效果_如何用打字稿构建素描插件React第1部分的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



    http://www.chinasem.cn/article/185590

    相关文章

    嵌入式QT开发:构建高效智能的嵌入式系统

    摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

    Retrieval-based-Voice-Conversion-WebUI模型构建指南

    一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

    防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

    在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

    poj 2976 分数规划二分贪心(部分对总体的贡献度) poj 3111

    poj 2976: 题意: 在n场考试中,每场考试共有b题,答对的题目有a题。 允许去掉k场考试,求能达到的最高正确率是多少。 解析: 假设已知准确率为x,则每场考试对于准确率的贡献值为: a - b * x,将贡献值大的排序排在前面舍弃掉后k个。 然后二分x就行了。 代码: #include <iostream>#include <cstdio>#incl

    maven 编译构建可以执行的jar包

    💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~ 专栏导航 Python系列: Python面试题合集,剑指大厂Git系列: Git操作技巧GO

    嵌入式Openharmony系统构建与启动详解

    大家好,今天主要给大家分享一下,如何构建Openharmony子系统以及系统的启动过程分解。 第一:OpenHarmony系统构建      首先熟悉一下,构建系统是一种自动化处理工具的集合,通过将源代码文件进行一系列处理,最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor

    利用命令模式构建高效的手游后端架构

    在现代手游开发中,后端架构的设计对于支持高并发、快速迭代和复杂游戏逻辑至关重要。命令模式作为一种行为设计模式,可以有效地解耦请求的发起者与接收者,提升系统的可维护性和扩展性。本文将深入探讨如何利用命令模式构建一个强大且灵活的手游后端架构。 1. 命令模式的概念与优势 命令模式通过将请求封装为对象,使得请求的发起者和接收者之间的耦合度降低。这种模式的主要优势包括: 解耦请求发起者与处理者

    Maven(插件配置和生命周期的绑定)

    1.这篇文章很好,介绍的maven插件的。 2.maven的source插件为例,可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example,然后配置到riil-collect.xml中。  <build>   <plugins>    <pl

    Jenkins构建Maven聚合工程,指定构建子模块

    一、设置单独编译构建子模块 配置: 1、Root POM指向父pom.xml 2、Goals and options指定构建模块的参数: mvn -pl project1/project1-son -am clean package 单独构建project1-son项目以及它所依赖的其它项目。 说明: mvn clean package -pl 父级模块名/子模块名 -am参数

    jenkins 插件执行shell命令时,提示“Command not found”处理方法

    首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚