jsx

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript，尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎，但此后也看到了其他实现。 TypeScript支持嵌入，类型检查和直接编译JSX到JavaScript。 基本用法 要使用JSX，您必须做两件事。 1. 使用.tsx扩展名命名您的文件 2. 启用jsx选项 TypeScript附带三种JSX模式：preserve, react 和 react-native。 这些模式仅影响编译阶段 - 类型检查不受影响。 preserve模式将保持JSX作为输出的一部分，以便由另一个变换步骤（例如Babel）进一步编译。 此外，输出将具有.jsx文件扩展名。 react模式将编译React.createElement，在使用之前不需要经过JSX转换，输出将具有.js文件扩展名。 react-native模式相当于保留，因为它保留了所有JSX，但输出将具有.js文件扩展名。 Mode Input Output Output File Extension preserve .jsx react React.createElement(“div”) .js react-native .js 您可以使用–jsx命令行标志或tsconfig

reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高... 1、语法 arr. reduce (callback ,[initialValue] ) reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。 callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、array （调用 reduce 的数组） initialValue （作为第一次调用 callback 的第一个参数。） 2、实例解析 initialValue 参数 先看第一个例子： var arr = [ 1 , 2 , 3 , 4 ] ; var sum = arr . reduce ( function ( prev , cur , index , arr ) {

react一般使用 jsx 语法（优点：如防止 XSS 攻击等）， jsx 中的属性名和 js 中大部分写法一样，即 camelCase （小驼峰）， 除className代替class，htmlFor代替for等 ，空标签一般使用单标签 组件名 首字母大写 或者使用 C amelCase ( 大驼峰) 将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象（“props”对象）传递给组件。 组件中的 props 对象包括所接收的属性及子组件 来源： oschina 链接： https://my.oschina.net/liyoungs/blog/3216196

ReactJSX JSX允许我们 javascript代码中写HTML，而 不是用HTML包含JavaScript。 JSX介绍 JSX由来 React是通过JavaScript生成用户界面。如果通过JavaScript语法写HTML代码，那将是一个灾难。JSX出现就是为了让我们可以在JavaScript代码中书写HTML语法来提高我们的开发效率。 JSX是什么 JSX = JavaScript XML是一种在React组件内部构 建标签的类XML语法。 在不使用JSX，情况下我们需要通过React.createElement方法来创建标签。 React.createElement('h3',{className:'title'},'你好，卓易!') 如果使用了JSX,上述的函数调用就变为了非常熟悉的HTML标签： <h3 className='title'>你好，卓易！</h3> React中JSX基本原理就是把JSX中出现的html标签自动转换成React.createElement，这样就转换成了js代码。我们也可以通过React.createElement去创建组件，这样可以不必使用JSX，但是这样相对复杂。 JSX赋予了React强大的表现力，使得我们在开发中利用JSX可大大的提高开发效率。 为什么使用JSX 使用JSX有着非常多的好处，而这些好处会随着项目的日益增大

列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。 渲染存放 JSX 元素的数组 假设现在我们有这么一个用户列表数据，存放在一个数组当中： const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: 'Lily', age: 19, gender: 'female' }, { username: 'Lucy', age: 20, gender: 'female' } ] 如果现在要把这个数组里面的数据渲染页面上要怎么做？开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？ ... class Index extends Component { render () { return ( <div> {[ <span>React.js </span>, <span>is </span>

React 是由 Facebook 公司推广的一套框架，已经应用 instagram 等产品 React 就是为了提供应用程序性能而设计的一套框架 在以前学的 angular 中，对 dom 提供了一些指令，让 dom 具有一些功能，例如 ng-repeat 让 dom 具有动态循环渲染的功能， ng-show 让 dom 元素具有动态显隐的功能等等 比如将页面比作一辆汽车， Angular 的实现就是为汽车添加一些装饰，增加一些功能，让汽车看上去很高大尚，这样势必要加大油门 React 的实现就是重新制造一辆汽车，是有四个轱辘，即可启动，不要很大的油门 React 有三大创新 虚拟 dom 组件开发 多端适配 一处开发，处处适用 体验 react https://github.com/ facebook/react 在 0.13 版本后， react 做了一个处理 将 react 文件分成两个部分（创建虚拟 dom ， 渲染虚拟 dom 的） React.js 核心库文件（创建虚拟 dom 的，核心模块，写的应用程序可以兼容所有端） React-dom.js 在浏览器端渲染虚拟 dom 创建虚拟 dom 由 react 对象提供的一个方法 createElement 第一个参数表示虚拟 dom 的名称，例如 div 有时我们还可以传递组件 第二个参数是一个对象，表示虚拟 dom

1.如果需要传参，在函数中加一个 props 参数来接受，并且必须向外return一个合法的jsx创建的虚拟DOM。 //1. 组件名首字母为大写 2. 必须return 合法的jsx // 这里就可以相当于子组件 function Hellow (props){ //props为父组件传过来的数据 //如果打印props的话，只要子组件用的到东西都会打印出来,在这里没有用到父组件中的a数据，因此只会打印出前三个来。 return <div> 姓名: {props.name}, 性别: {props.sex}, 年龄: {props.age} </div> } // 这里就想当于父组件 const person = { name: 'zs', sex: 'gener', age: 12, a: 2 } //将组件渲染到页面上来 // 有两个参数分别为,1.填写组件，2. 将组件渲染到指定的位置，也就是指定的DOM元素上。 ReactDOM.render(<div> //1. 使用ES6的展开运算符 <Hellow {...person}/> //2. 直接赋值 <Hellow name='zs' sex='gener' age={12}/> //3. 使用`.`的形式，父组件 <Hellow name={person.name} sex={person.sex} age=

3 月，跳不动了？>>> ####一、简介 通过在ps执行脚本将当前编辑的素材生成各种不同尺寸的png图标。下面例子在cs6下测试通过。 参考： http://coolketang.com/psscript/menu8lesson12.php ####二、脚本jsx //调用[File]的[openDialog]命令，弹出文件选择窗口，提示用户选择png图标，并将文件存储在变量[bigIcon]中。 //var bigIcon = File.openDialog("请选择一张png图片：", "*.png", false); //var strArr = bigIcon.name.split("."); //var iconName = strArr[0]; //打开用户选择的图标文件，并将打开后的文档，赋予变量[pngDoc]。 //var pngDoc = open(bigIcon, OpenDocumentType.PNG); //ps当前文档 var pngDoc = app.activeDocument; //保存名字为当前文档名字 var iconName = pngDoc.name.split(".")[0] + ".png"; //调用[Folder]的[selectDialog]命令，弹出文件夹选择窗口，提示用户选择输出iOS图标的文件夹。 /