<React: Up and Running>阅读笔记 — JSX

最新推荐文章于 2022-09-02 17:42:45 发布
VIP文章 最新推荐文章于 2022-09-02 17:42:45 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/colorapp/article/details/49720305
版权

Transpiling JSX


transpilation是获取source code， 然后使用老版本浏览器可以理解的JavaScript来重写的过程，这两个版本之间的语法不一样，但是功能是一样的。

这个JavaScript的polyfills是不一样的，polyfill是完全JavaScript-land的，比如解决JavaScript新老版本API兼容的问题，把高版本的API通过polyfill使低版本也能使用。但是当有新的语法引入时，比如新版本JavaScript中出现的class关键字，这个是无法通过polyfill进行兼容的。因此在把要想在browser上面使用这些新语法，必须先对source code进行compilation(transpilation)，通过这种方式我们就可以直接使用很多ES6的新特性。


Client-side


在浏览器中进行transpilation是最简单的实现方式，但是这个会给用户带来性能方面的不利影响，因此对真实用户来说，不推荐使用这种方式，而是推荐在服务器进行编译。但是这种方式对我们日常开发来说却是非常有利的，不需要设置一大堆的编译步骤。

要在Client-side使用JSX，需要做两件事：1) 包含client JSX transpilation script 2) 使用JSX来标记scripts脚本

在老版本的React中，使用的JSX build脚本是JSXTransformer，新版本使用的是babel(v0.14)。两者使用的方式和语法是基本上来说差异不大，babel除了支持JSX之外，还支持最新的JavaScript版本的各种特性到低版本的JavaScript中。

如果没有JSX build脚本的情况下，在浏览器中包含JSX语法会直接报错的。添加build脚本之后，build脚本会查找并transiles代码中tag类型为”text/jsx”的中的script，将其中的语法从JSX变为正常的JavaScript语法，然后把转换后的JavaScript代码auto-insert到document的<head>中。例如下图这样，可以看出，生成的script同时还包含一个对debug非常有帮助的source map(a mapping of before/after the transformation)。


在上面的例子中是直接使用inline scripts，我们同时还可以使用external scripts，原理和用法跟上面的过程是一样的，例如下面：
最低0.47元/天 解锁文章
lihei12345
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
React 笔记--高级指引--深入 JSX
xiangxiang07的博客
06-03 239
React 笔记--高级指引--深入 JSX
React实战 | JSX的空格与换行不显示问题的解决方案
qq_35536883的博客
08-07 1万+
空格显示不正常 这是因为浏览器显示机制，会将连续多个空格显示成1个空格。 在这些示例中，HTML和JSX中的空格是一样的 <div>Hello•World</div> <div>•Hello•World</div> <div>••Hello•World</div> <div>•••Hello•World•••&lt...
React - Up & Running - Building Web Applications
01-07
Hit the ground running with React, the open-source technology from Facebook for building rich web applications fast. With this practical guide, Facebook web developer Stoyan Stefanov teaches you how to build components--React's basic building blocks--and organize them into maintainable, large-scale apps. If you're familiar with basic JavaScript syntax, you're ready to get started. Once you understand how React works, you'll build a complete custom Whinepad app that helps users rate wines and keep notes. You'll quickly learn why some developers consider React the key to the web app development puzzle. Set up React and write your first "Hello world" web app Create and use custom React components alongside generic DOM components Build a data table component that lets you edit, sort, search, and export its contents Use the JSX syntax extension as an alternative to function calls Set up a lean, low-level build process that helps you focus on React Build a complete custom app that lets you store data on the client Use ESLint, Flow, and Jest tools to check and test your code as your app evolves Manage communication between components with Flux
在JSX语句中插入空格
Wancc123的博客
08-06 478
JSX中无法直接使用 ‘ ’ 来直接插入空格, 使用 {’\u00A0’}来插入一个空格, 如果想插入多个空格复写 \u00A0即可, 如: 若插入三个空格可写作{’\u00A0u00A0u
react + antD 在JSX语句中插入空格
wangbaobao512的博客
09-02 1884
react + antD 在JSX语句中插入空格。
tslint-react：与TSLint的React＆JSX相关的Lint规则
02-06
与React＆JSX相关的Lint规则。 用法 tslint-react对TSLint和TypeScript具有同级依赖。 要将这些lint规则与默认预设一起使用，请通过extends关键字使用配置继承。 这是一个示例配置，其中tslint.json与node_modules...
React Up and Running Building Web Applications 无水印pdf
10-06
React Up and Running Building Web Applications 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有...
html-to-jsx:将HTML代码转换为React JSX
05-19
html-to-jsx 一个基本的Visual Studio Code插件，可将html文本转换为JSX字符串 您可以选择html文本并使用快捷键ctrl + alt + x 有很多事情要做 添加功能以验证html代码 添加支持以格式化结果字符串 添加支持以将...
React Quickly: Painless web apps with React, JSX, Redux, and GraphQL
01-10
This book is intended to cure the troubles of front-end developers, make their lives more meaningful and happier, and help them earn more money by introducing them to React.js and doing so in a fast ...
React Up and Running
08-20
React Up and Running - Building Web application 预发布 英文版
es6-module-clean-transpilation:将ES6模块与现有代码库一起使用
05-19
ES6模块清洁移植 为什么？ 理念是“编写一次，然后对任何依赖项管理进行干净地编译”。 这样做的想法是即使您不打算发布支持所有依赖关系的库/代码，也能够将其编译为所有依赖项管理（AMD，CJS，全局变量）。 其次，生成的代码应可由现有的AMD和全球人员使用代码库使用。 因此，这需要进行一些折衷和代码约定。 仅支持当前ES6模块语法的一个子集。 具体来说，仅支持默认导入和默认导出。 不包括命名的导入，多个导出和裸导入（有关更多信息，请参阅此页面的后面）。 因此，必须遵守以下约定：所有JS文件都应导出默认对象，并且在导入时仅使用default import 。 用法 可以从命令行直接使用transpiler： node transpiler.js -t amd -i src/ -o dist/ 这是基本用法： Usage: node transpiler.js [options
React-tools
chiyiqian1915的博客
03-17 391
react-tools 可以帮助React 将JSX在发布前编译成JS原生写法的. 安装: npm -g install react-tools G:\ProjectsPractice\React\react01>npm install -g react-tools npm WAR...
JSX语法详解
热门推荐
王浴昊
12-02 8万+
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
<React: Up and Running>阅读笔记 — The life of a component & Excel: a fancy table component
lihei12345的专栏
11-08 1971
Properties 要把Component的this.props属性认为是可读的，properties用来从parent component传递configuration给children。 proptypes 可以通过在components中添加一个叫做 propTypes 的property，这个property的值是一个列表，这个列表中定义了component可以接受
（WEB.JS）React离线（预）编译JSX
没见过熊蹦迪哒
10-13 1270
工具：npm，react-tools。 OS：Window7.64b打开CMD（命令提示符）：
React基础入门
前端漫漫兮
05-15 237
1.react使用一般需要jsx语法。 2.但是jsx语法的话，写成类似js，引入。但是chrome不识别。那么此时就需要进行转换。npm install -g react-tools 3.然后切换到react目录下，然后jsx –watch src/ build/ 进行jsx/babel语法转换。同时在html中不在引入jsxtransform，直接引入react.js即可。chromeok
countUp.js在react中的应用
alexsaurora的博客
03-02 7112
公司项目需要做一个数字显示器，让我找到一个有趣的项目——CountUp.js。它是一个免费的轻量级javaScript工具，可用于快速创建动画，以更有趣的方式显示数字数据。作用：动画显示数字，千位分隔符，添加前后缀等等。 demo在查看CountUp.js工具demo github在countUp的GitHub， 已经有四千多的Star了，但是只有两条issues，这说明什么，几乎所有人都可...
const App: React.FC = () => ( <Card title="Card title" bordered={false} style={{ width: 300 }}> <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card> );这种写法useState该怎么写
最新发布
05-25
<button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }; ``` 在上面的代码中，我们调用了`useState`，并传入了初始状态值`0`。`useState`返回一个数组，其中第一个元素是当前状态值，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值