皮皮网

1.如何写好react？
2.tsx是什么晶体
3.@antv/x6、@antv/x6-react-components X6 图编辑引擎在 react typescript 项目中实践
4.esModuleInterop 到底做了什么？
5.五分钟学会发布React组件到NPM包

如何写好react？

       react前端框架难吗?

       React很简单，也很难简单是因为React的API真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看Angular……）。

       当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，微猎手源码但是在常见的前端业务场景中，纯render的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。

       react这种框架很复杂。根据查询相关公开信息显示，都是主流的前端框架技术，各有千秋，有利有弊，就看在日常工作中怎么去取舍了，毕竟框架只有更好，没有最好。

       React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

       你有vue的基础，有心的人才网网源码话我估计1-2天就能理解react了。公司有人会的话，多提提问题一周应该不是什么问题，例如你在vue里怎么做一些事情，你可以问问在react这么实现。理念上这两个东西都非常相似。

       如何用react写helloworld

       假设你已经配置好了Android开发环境，cloneyourproject，并且已经npminstall了全部的依赖包，到这个姿势就可以开始调试了。

       使用React的网页源码，结构大致如下：！DOCTYPEhtml//**用户代码**上面代码有两个地方需要注意。

       此用法如下图：这个如同vue组件里面的props中的type：Array这个一样这个与vue-router差不多，大家可以看文档。

       优化URL请求，目的是使用环境变量来将URL请求地址写灵活，方便统一管理。

       在React官方文档中的开发流程里面介绍了如何使用本地依赖库。在启动本地React项目的时候出现了以下报错在将react-jsx-dev-runtime.development.js文件复制到build/node_modules/react/cjs目录下即可。

       上面使用了比较易懂的API来解释Ref的用法，但里面包含了一些现在React不太推荐和即将废弃的方法，如果用React推荐的写法，我们可以这样写。源码搭建发卡平台

React中事件的写法总结

       1、具体来讲，React利用事件委托机制在Document上统一监听DOM事件，再根据触发的target将事件分发到具体的组件实例。另外上面e是一个合成事件对象(SyntheticEvent)，而不是原始的DOM事件对象。

       2、第一种方式：在事件上使用bind(this)第二种方式：在构造函数中改变this指向第三种方式：使用=()=JavaScript函数中的this不是在函数声明的时候定义的，而是在函数调用(即运行)的时候定义的。

       3、react会在事件池eventPool中重复使用event实例。

如何学习用Typescript写Reactjs

       1、TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。

       2、接下来在src/pages/index.tsx文件中书写demo来学习React。Vue和React中所开发的都是组件，其页面也是一个路由组件。

       3、顶部预警公式源码创建带TypeScript模板的react-app，推荐使用yarn，接下来我也主要以yarn做例子然后在项目根目录创建一个craco.config.js用于修改默认配置。

       4、如果把你可以建一个网站，你就可以建一个桌面应用程序，我们只需要把精力放在应用的核心上即可。

       5、课程介绍TS在构建大型应用上的优势，以及与JS的完美互通，让TS未来一片光明，从0到1系统学习，把TS真正应用到框架和项目中。

Css在react该如何写?

       1、在需要全局CSS的时候，你仍然可以通过为ReactComponent设置className属性，来制定对应的CSSClass。Inlinestyle也有一些限制，只能通过CSS声明（className）来实现，例如声明伪类属性(a：visited)。

       2、建议CSSinJS写法，虽然感觉推翻了多年的类似bilibili的源码CSS工作进展。主要原因还是CSS的全局污染。模块化、组件化一直是前端不断优化追求的目标。传统的CSS无法很好的进行模块化。

       3、在CSS文件中引入CSS文件需要用到@import。例如：@importsub.css使用用@import引入CSS可以很方便的引入外部文件的CSS代码，方便维护和规划。

       4、在工程化中，很重要的一点就是保持各组件名称的不同，对于css来说，这点尤为重要，为了不使诸多类似的样式名称混淆，一般都会使用css编译工具，对原来的名字进行统一修改替换，确保所有名字都不重叠。

       5、exportedKey：exportedValue；/*...*/}但直接使用这两个关键字编程太麻烦，实际项目中很少会直接使用它们，我们需要的是用JS来管理CSS的能力。

       6、把Ajax写在componentDidMount里，当react-router决定好哪个组件来渲染页面，在这个组件第一次渲染的时候加载Ajax取得数据再通过this.state或者this.props渲染数据。

tsx是什么晶体

       TSX并非晶体。

       TSX是一种扩展名，通常用于指代TypeScript文件的扩展名。TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，添加了静态类型系统和一些高级功能以增强开发效率和可靠性。因此，TSX文件通常包含用TypeScript编写的代码，但本身并不是晶体。晶体通常指的是在自然界或实验室中形成的固体物质，具有明确的分子结构或原子排列。在计算机科学领域中，并没有TSX晶体的概念。

       在计算机编程领域，TSX更多地与React框架相关，用于描述使用TypeScript编写的React组件文件。这些文件包含了用TypeScript编写的组件代码，同时保持了与JavaScript相似的语法和结构。虽然这些文件扩展名为.tsx，但它们并不代表某种晶体形态，而是表示特定编程语言的源代码文件。

       总结来说，TSX不是一个晶体的名称或类别。它主要作为TypeScript文件的扩展名使用，用于指代用TypeScript编写的源代码文件，尤其是在React框架中编写的组件文件。在谈论计算机编程或软件开发时，应当明确区分术语，避免混淆不同领域的概念。

@antv/x6、@antv/x6-react-components X6 图编辑引擎在 react typescript 项目中实践

       X6是AntV推出的图编辑引擎，具备丰富的交互组件与便捷的节点定制能力，旨在快速构建DAG图、ER图、流程图等应用。

       通过X6，开发者可以轻松搭建出功能丰富的图形界面，实现节点的拖拽、连线、缩放等操作，极大地提高了应用开发的效率和用户体验。

       具体文档可访问：x6.antv.vision/zh/docs...

       欲深入了解X6的源码实现与实践案例，可参阅此详细GitHub链接：-i-k3u1fbpfcp/7dad4e3efa5ccb9fd~tplv-k3u1fbpfcp-watermark.image?)执行`npm?run?build`打包出一个?dist?文件夹，然后重启?vscode?解决。#?使用github-actions自动化部署我们可以使用?github-actions?自动化将?dumi?的组件文档部署到?github-pages?中，实现步骤如下：1.?在?github?建一个代码仓库2.?到github?的个人主页申请一个?token3.?选择token?的?note和过期时间4.?权限选择5.?最后生成?token，将token?复制到你的个人仓库的?`setting/secrets`?中我在这里使用的是?`ACCESS_TOKEN`,也可以自己写，不过这里的名字需要跟后面的?yml?文件保持一致。6.?在你的项目根目录中创建目录和?yml?文件

       .github└──workflows└──gh-pages.yml

yml文件中这样写```ymlname:?github?pageson:?push:branches:?-?main?#?default?branchjobs:?deploy:runs-on:?ubuntu-.steps:?-?uses:?actions/checkout@v2?-?run:?npm?install?-?run:?npm?run?docs:build?-?name:?Deployuses:?peaceiris/actions-gh-pages@v3with:?github_token:?${ { ?secrets.ACCESS_TOKEN?}}?publish_dir:?./docs-dist

       注意最后的secrets.ACCESS_TOKEN里面的ACCESS_TOKEN就是你在github仓库中设置的token名字。

       在项目的package.json中配置homepage字段

import?*?as?react?from?'react1

       将代码推送到远程仓库，actions会自动下载依赖并打包

       最后打开你配置的homepage就可以看到部署好的文档，我的文档地址是这样的

       /中注册一个账号

       package.json中配置一些内容

import?*?as?react?from?'react4

       上面的配置是我收集到的，如果不是非常特殊的情况，我们只需要将name、description、author、version、keywords、homepage、repository修改成自己的就可以了，其他可以不动。

       修改README一个NPM包，好的README能够快速让用户知道这个包能够干什么，如何使用等。

       这里有一个github高star的项目，教人怎么写README，并提供了模板。

       地址在这：standard-readme中文

       同时我们可能还需要徽章，这里有一个徽章生成的工具网站，可以根据NPM或者github来生成徽章，我们只需要拷贝到README就可以生成徽章

       徽章生成：https://shields.io/

       在README中的徽章生成示例代码：

import?*?as?react?from?'react5

       会变成这样：

       我们只需要拷贝代码，并将生成的链接覆盖掉这串代码上的链接就行

       在项目中输入命令行发布登陆npm，并根据提示输入注册时的username、password,email

import?*?as?react?from?'react6

       npm镜像源，记得还原为官方,官方的源已经换成了https协议了

import?*?as?react?from?'react7

       设置完了也可以再看一眼

import?*?as?react?from?'react8

       执行npm打包,此时会出来dist文件

import?*?as?react?from?'react9

       一般来说我们只需要将dist传到npm就行了，不需要传源码，这时候你可能需要再看一眼package.json中的files字段是不是设置正确了

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},0

       发包

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},1

       后面更新包的代码时，需要同步更新包的版本，这个字段在package.json中

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},2

       每次都需要跟上一次不一样，否则会发包失败。

       同时发包时，也可以修改其他package.json的内容，但不要改name噢。

最后

       推广一下本人长期维护的github博客

       1.从学习到总结，记录前端重要知识点，涉及Javascript深入、HTTP协议、数据结构和算法、浏览器原理、ES6、前端技巧等内容。

       2.在README中有目录可对应查找相关知识点。

       如果对您有帮助，欢迎star、follow。

       完结，撒花ヽ(°▽°)ノ?

参考

       #是时候搭建你们团队的UI组件库了

       #GitHubActions入门教程-阮一峰

       #使用TypeScript+React发布组件到Npm