如何编译jsx文件，网页设计师工作中？
网页设计师工作中，一般常用哪些工具？
代码编辑
Cmd Markdown免费在线Markdown编辑器，一直再用，很不错。
反编译
dotPeekdotPeek 是 .NET 平台的一款免费的反编译工具，支持反编译 .NET 1.0 ~ 4.0 到 C# 代码。
JustDecompileTelerik 公司开发的 .NET 程序集反编译引擎，为反编译工具 JustDecompile 提供反编译功能。
调试
Fiddler一款免费且功能强大的数据包抓取软件。它通过代理的方式获取程序http通讯的数据，可以用其检测网页和服务器的交互情况，能够记录所有客户端和服务器间的http请求，支持监视、设置断点、甚至修改输入输出数据等功能。fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。所以无论对开发人员或者测试人员来说，都是非常有用的工具。
版本管理
SourceTreeSourceTree 是 Windows 和 OS X 下免费的 Git 和 Hg 客户端。支持创建、克隆、提交、push、pull 和合并等操作。
命令行工具
ConEmuConEmu是一个带标签的Windows终端，提供多标签支持和丰富的自定义选项，是Windows下不可多得的Console.
其它
TeamViewerTeamViewer是一个能在任何防火墙和NAT代理的后台用于远程控制，桌面共享和文件传输的简单且快速的解决方案。为了连接到另一台计算机，只需要在两台计算机上同时运行 TeamViewer 即可，而不需要进行安装（也可以选择安装，安装后可以设置开机运行）。该软件第一次启动在两台计算机上自动生成伙伴 ID。只需要输入你的伙伴的ID到TeamViewer，然后就会立即建立起连接。 可能被墙，访问不稳定，推荐用向日葵代替
向日葵向日葵远程控制软件是一款免费的集远程桌面,远程开机,远程监控,支持内网穿透的一体化远程控制软件! 与TeamViewer类似。
网络流量监测IP雷达IP雷达帮助你了解自己的电脑使用网络和读写硬盘的情况，显示哪些程序正在读写你的硬盘。实时显示本机上网流量，详细到每个远程IP的流量，及其域名、位置，显示各类网速已经流量排名。4.0版本增加显示网络游戏流量，硬盘繁忙程度，支持将记录的IP地址保存到文件。 很久未更新，可用Windows自带的资源监视器替代。
FileZillaFileZilla 客户端是一个快速可靠的、跨平台的FTP,FTPS和SFTP客户端。具有图形用户界面(GUI)和很多有用的特性。
VS扩展
Web EssentialsVS2022,VS2022,VS2022,VS2022 Adds many useful features to Visual Studio for web developers. If you ever write CSS, HTML, JavaScript, Markdown, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier.
Bundler MinifierVS2022 A Visual Studio extension that let's you configure bundling and minification of JS, CSS and HTML files.
Web CompilerThe easiest and most powerful way to compile LESS, Scss,, Stylus, JSX and CoffeeScript files directly within Visual Studio or through MSBuild.
Image OptimizerVS2022,VS2022,VS2022 Lossless optimization of JPEG, PNG and Gifs - including animated Gifs.
Web AnalyzerVS2022 Provides static analysis directly in Visual Studio for JavaScript, TypeScript, JSX, CSS and more.
Microsoft SQL Server Data ToolsVS2022,VS2022,VS2022 为数据库开发人员提供了一个集成的环境，让他们可以在 Visual Studio 内为任何 SQL Server 平台（无论是内部还是外部）执行所有数据库设计工作。数据库开发人员可以在 VS 中使用 SQL Server 对象资源管理器轻松创建或编辑数据库对象和数据，或执行查询。
分享结束！
你为什么选择React而不选择Vue？
前端领域，选择框架是根据使用场景、业务需求、技术实现等综合因素考虑的，选择最适合的才能发挥最大效果。
目前前端三大主流框架有：React、Vue、Angular，他们在各自特定的场景下使用都非常出色。其中，Vue是不错的渐进式JavaScript库，更易于样式开发构建UI。而我更倾向于选择React，因为React具有独特优势：
React函数式编程理念使代码更优雅和合理严谨的单向数据流设计，方便构建大型复杂稳定的单页面应用丰富的技术生态圈，拥有世界范围内各大技术社区支持方便配合ReactNative开发跨终端应用React的函数式编程理念使代码更优雅和合理函数式编程设计思想。函数式编程是用函数的组合来进行编程。先声明函数，然后调用函数，每一步都有返回值，通过抽出每一步逻辑运算抽象，封装在函数中。再将函数组合来编写程序。例如：计算平均值百分比，我们可以拆分为三个函数，一个是计算平均值，一个是计算百分比，一个是综合调用的函数，通过函数嵌套函数的方式，使得代码更优雅，更有利于复用。
React使用函数式编程思想使代码更优雅和合理，更有利于组件化、模块化开发。React的每个组件就是函数生成，页面的渲染过程本质就是函数的嵌套调用过程。React的这种设计对于使用来说非常方便，例如以下子组件嵌套子组件再嵌套子组件示例：子组件中嵌套子组件调用模式始终都是相同的。父组件调用子组件都只需要考虑传递的参数props，而子组件只需要考虑传入的参数。
严谨的单向数据流设计，方便构建大型复杂稳定的单页面应用React的数据流始终是单向设计的，严格遵照数据驱动DOM。这样的好处是，降低了组件互相通信的代码耦合度，数据流更清晰，调试更方便。大型复杂单页面应用一直是企业的难题，传统方式开发都不能够很好的维护。而使用React为基础的技术栈，能够方便地拆分模块、组件，再配合Redux数据流管理，能够高效构建应用。事实证明，这种React、Redux的大型复杂单页面项目构建方案，已经在各大互联网公司得到应用和发展。
丰富的技术生态圈，拥有世界范围内各大技术社区支持React是由Facebook公司开发的高品质现代化前端框架，具有很高的权威性和专业性，在世界范围内得到各大技术社区支持，包括国内的技术社区。比如，npm官网、淘宝cnpm社区等都有很丰富的生态。众多的开发者共同添砖加瓦，开源共享，丰富了技术生态圈，让我们方便学习和使用基于React的组件、插件，减少开发成本，提高开发效率。在国内，由阿里巴巴公司开发的基于React基础开发的Antd组件库深受各大互联网企业好评，开箱即用，为加速国内中小企业的中台化、信息化推进起到了重要作用。
方便配合ReactNative开发跨终端应用当前互联网公司的一个重要难题问题是：如何减少成本、高效的进行跨终端应用开发。也就是说，互联网公司都希望能够开发iOS、Android、H5应用。React配合ReactNative库能够方便地开发跨终端应用。ReactNative设计原理上和React一致，使用了React技术栈，就已经有了基础，再配合ReactNative就能一套代码，编译生成多端应用。ReactNative方便众多公司快速高效开发App，降低研发成本，提高了生产力，减少了开发时间。
React、Vue发展趋势React的发展趋势更注重函数式编程。当前从16.7版本以后，出现了Hook函数钩子的思想，只能是React函数式的组件才能使用。这一特性很明显，React希望将函数式编程发挥极致，更优更好地项目开发。有趣的是，这里出现了useMemo函数，像极了Vue中的computed的作用，这里React就是借鉴了Vue的动态监听变量的模式。
Vue的发展趋势为更注重了项目标准化、严谨化。在Vue3中已经开始使用了TypeScript替代不够严格的JavaScript写法。而引入TypeScript这一点是借鉴了React的能够深度融合TypeScript更严谨开发的经验。
React、Vue发展趋势表明，两种框架互相汲取，取长补短，都是为了能够更好地进行应用开发。
如何正确选择框架面对React、Vue，我们应该怎么选。这里提供一些思路：
小型偏重于项目如果是偏重于UI展现，更多的样式开发，推荐使用Vue。发挥Vue模板样式的优势。具有复杂的数据逻辑应用如中台化项目，建议使用React。单向数据流的模式能够避免数据逻辑错误。大型复杂单页面项目，推荐React。再配合如Redux、Mbox等状态管理库，组件化、模块化开发，有效管理。写在最后React、Vue都是出色的前端框架，都有各自的一席之地。React框架的函数式编程理念、严谨的单向数据流设计、丰富的技术生态圈以及方便开发跨终端应用具有更大优势。我们只有根据使用场景、业务需求、技术实现等综合因素选择最适合的框架，才能发挥最大的优势，提高生产力。
以上是我的观点，希望对你有所帮助。
如何设置前端编译工具babel的配置？
在使用babel之前，我们一般需要设置一些配置，那么babel有哪些地方可以设置配置呢？
我们以@babel/core中的transform方法为例
var babel = require('@babel/core');
let code = `var a: string = "";`;
const result = babel.transform(code, {
babelrc: true,
caller: {
name: "my-custom-tool",
supportsStaticESM: true
},
test: function(path, obj) {
return true;
},
filename: 'index.js',
// extends: 'ajv'
// configFile: 'babelrc'
parserOpts: {
plugins: ['typescript']
},
plugins: [],
presets: []
});
这个配置很重要，因为后面的一些配置文件是根据这里的配置寻址的，如果这里不配置，后面的配置文件可能找不到，我们可能把它当做基础配置。
前端编译器babel
配置configFile有两种情况：
1、如果不配置（configFile!==false）
babel会自动在工程的根目录下寻找一个babel.config.js文件，那么我们就可以在这个文件中配置
2、如果configFile是一个字符串，字符串会被当做包名，那么babel就会在进程运行目录下寻找这个包，这个包就可以当做配置。
使用pkgjson的前提是在基础配置中设置filename属性，因为babel是以filename所在目录一层层向上寻找pkgjson的，找到的第一个pkgjson就被用来当做配置（和node寻找node_modules一样）。
我们可以在pkgjson中设置babel字段属性，在这个属性中我们可以设置babel的配置。
babel在寻址pkgjson文件时会记录向上寻找的每一个层级目录（直到找pkgjson那一层），那么在这些层级目录中可以配置.babelrc和.babelrc.js文件
有三点需要注意：
1、每一层只能配置一个文件，两个都配置会报错，会让你移除一个
2、只会使用寻址到的第一个配置文件，其他的就会被忽略
3、上面的pkgjson中的配置和这里的配置也是二选一，否则也会报错
另外在每个层级下还可以配置.babelignore，和上面一样只取寻址到的第一个
上面每个配置文件都可以设置env和overrides两个属性
babel可以根据运行环境env配置
module.exports = function(cache) {
let env = cache.env;
env();
return {
presets: ['@babel/env'],
plugins: [
['@babel/transform-react-jsx', {
a: 1
}, 'test'],
['@babel/ala', {
b: 2
}]
],
passPerPreset: true
env : {
development: {
presets: [],
plugins: []
},
production: {
presets: [],
plugins: []
}
},
overrides: []
};
}
也可以在overrides中配置，这个属性是个数组，数组每个元素中又可以配置env。
总结
babel运行的时候会把上面每个配置都走一遍，最终会把寻找到的所有配置合在一起！
jx是什么文件？
jx 文件是一种用于前端开发的 JavaScript 文件，通常用于创建自定义组件或组件的示例。这种文件格式是 React 官方推荐的，被称为 JSX(JavaScript XML)。在 JSX 中，开发人员可以使用类似于 XML 的语法来编写 JavaScript 代码，以便更好地表达组件的结构和外观。
JSX 文件通常以.jsx 为扩展名，可以使用文本编辑器或 IDE 创建和编辑。在创建 JSX 文件时，开发人员需要指定一个 JavaScript 主体，其中包含 React 的 createElement 函数，用于创建组件实例。JSX 文件可以使用 React 的编译器将其编译为纯粹的 JavaScript 代码，以便在运行时执行。
JSX 文件是前端开发中的重要工具，可以帮助开发人员更好地表达组件的结构和外观，并使代码更加易于维护和扩展。
app开发技术有哪些？
目前app开发有原生app开发，俗称native、web app开发以及混合app开发。
原生native app开发已经过了浪潮了。早期android开发和ios开发很火，程序员的工资很高。如果你想从事native app开发，android你掌握java就行，ios采用object-c开发和swift，现在基本都在切swift。
混合app就是原生+Html。布局采用css，数据交互采用js。然后外层套一个原生的壳子，可以使用原生app的特性。
webapp就说纯Html+css+js。响应式布局。借助手机浏览器就可以运行。
关于目前移动app业界已经成熟的开发框架，我推荐几个。
1、PhoneGapPhoneGap 及Cordova(同一个东西，不同的叫法)是一款移动应用开发框架。我早期用户他开发过一个电商类的app。它能使用系统的相机、定位、通讯录、指南针等功能。通过调用它的SDK将你的应用编译为不同平台上的app。这些平台包括ios、android、windowsphone等
Phonegap Build是它的打包具，可以把你的PhoneGap代码打包成app。业界很多主流的移动app开发框架均源于PhoneGap。较著名的有Worklight、appMobi、WeX5等；其中WeX5为国内打造，完全Apache开源，在融合Phonegap的基础上，做了深度优化，具备接近Native app的性能，同时开发便捷性也较好。
2、React NativeReact Native（简称 RN）是 Facebook 于 2022 年 4 月开源的跨平台移动应用开发框架，是 Facebook 早先开源的 UI 框架 。React 在原生移动应用平台的衍生产物，目前支持 iOS 和 Android 两大平台。它使用 JavaScript 语言、以及类似于 HTML 的 JSX 和 CSS 来开发移动应用，因此熟悉 Web 前端开发的技术人员只需很少的学习即可快速上手。国内很多公司也对 React Native 做了很多研究，并有相应的产出，如一些基于 React Native 发展出来的跨三端（Android/iOS/Web）的技术。
3、WeexWeex是阿里无线前端的产品。致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和流行的前端框架（如 Vue.js 和 Rax）来开发移动应用。
Weex 的另一个主要目标是跟进当代先进的 Web 开发和原生开发的技术，使生产力和性能共存。在开发 Weex 页面就像开发普通网页一样；在渲染 Weex 页面时和渲染原生页面一样。
Weex 在很大程度上借鉴了 React Native 的思想和方式。目标都是通过 JS 语法渲染 Native 页面，但由于起步比较晚，社区没有 React Native 活跃，资料和开源项目也相对较少。
4、H5+HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。
最后我提一下微信小程序
微信小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户在微信里扫一扫或搜一下即可打开应用。
小程序开发用的技术就是HTML + CSS + JS。但微信基于此定义了自己的一套逻辑JS/WXML/WXSS/JSON来开发和渲染页面
目前微信小程序发布的数量已经很多。但是微信小程序有包的大小限制。所以目前我觉得开发一些小的应用还是最佳选择。开发的成本很低。但是对于大型app开发，微信小程序可以作为引流的工具。小程序中开发一些基础版功能，将用户引流到app上。
