What is Babel?---JSX and React
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through @babel/polyfill)
- Source code transformations (codemods)
- And more! (check out these videos for inspiration)
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});
the-super-tiny-compiler, which also explains how Babel itself works on a high level.
JSX and React
Babel can convert JSX syntax!
Type Annotations (Flow and TypeScript)
Babel can strip out type annotations! Check out either our Flow preset or TypeScript preset to get started. Keep in mind that Babel doesn't do type checking; you'll still have to install and use Flow or TypeScript to check types.
https://babeljs.io/docs/en/index.html#jsx-and-react
Babel是React团队选择的在使用React过程中转换ES*和JSX为ES5语句的工具,可以从Babel handbook了解Babel详细的用法。
实际上,Babel的主要用途并非一个JSX语句转换器。Babel主要用途是一个JavaScript转换器,它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说,Babel主要会转换ES6和ES7语句为ES5语句,转换JSX看起来倒像是其的一个附加功能。
babel的浏览器版本为browser.js(未精简)和browser.min.js(已精简)
---------------------
作者:abloume
来源:CSDN
原文:https://blog.csdn.net/u013451157/article/details/78946375
版权声明:本文为博主原创文章,转载请附上博文链接!
What is Babel?---JSX and React的更多相关文章
- babel 无法解析jsx (webpack react )
webpack.config.js的配置如下图: 报错: 修改webpack.config.js文件,如下即可:
- 使用Webpack和Babel来搭建React应用程序
用Webpack(npm install -g webpack)代码打包,Webpack大致需要知道三件事: 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3 ...
- [React] Spread Component Props in JSX with React
You often find duplication between the name of a prop and a variable you will assign to the prop. JS ...
- React系列文章:Babel编译JSX生成代码
上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...
- React Native 开发之 (06) JSX
一 React 1 React定义 React的GitHub地址是 https://github.com/facebook/react.它的官方介绍是 A JavaScript Library for ...
- React之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...
- react基于webpack和babel以及es6的项目搭建
项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...
- 在React+Babel+Webpack环境中使用ESLint
ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...
- 2. React JSX语法及特点介绍
什么是JSX JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...
随机推荐
- python 基础 ---- 文件读写
文件是一种存储在存储存储媒介上的信息或数据 常用的文件类型 文件 的打开关闭 close() 关闭文件 文件的打开路径 绝对路径 : 文件在操作系统中标准的存放路径 相对路径: 与目前引用文件的相对位 ...
- Java 在 Word 文档中使用新文本替换指定文本
创作一份文案,经常会高频率地使用某些词汇,如地名.人名.人物职位等,若表述有误,就需要整体撤换.文本将介绍如何使用Spire.Doc for Java,在Java程序中对Word文档中的指定文本进行替 ...
- laravels 使用laravel-wechat 组件
一. laravels (5.4)使用 laravel-wechat (4.13),出现无法登陆的情况,显示没有code 错误,解决办法 前提:已经在laravels.php 的 cleaners 中 ...
- FusionInsight大数据开发学习总结(1)
FusionInsight大数据开发 FusionInsight HD是一个大数据全栈商用平台,支持各种通用大数据应用场景. 技能需求 扎实的编程基础 Java/Scala/python/SQL/sh ...
- sqlserver分布式事务
启动服务中的Distributed Transaction Coodinator后 创建链接服务器ender-pc\subx 设定连接服务器RPC OUT 以及RPC属性为True 实验一下代码 创建 ...
- React实例------红绿灯
概述 一个react的demo的实例,适合初学react的新手练习. 效果 用webpack打包后的目录结构 index.html react的封装,复用与Java的类似,面向对象的编程思想.所以in ...
- (10)ASP.NET Core 中的环境(Environments:dev, stage, prod)
1.环境变量配置 ASP.NET Core在应用程序启动时读取环境变量(Properties\launchSettings.json)ASPNETCORE_ENVIRONMENT,并将该值存储在IHo ...
- 面试题 js重写原生函数(以push为例)
先说明一下为什么要写这个,因为最近在面试,面试的时候面试官问了这个问题,当时是真的没有答上来,回来之后自己考虑了一下,现在给大家分享 要求如下: 重写js push函数,使其能够在push的同时打印出 ...
- SQL Server中临时表是在什么schema下的(转载)
Specifying schema for temporary tables 问: I'm used to seeing temporary tables created with just the ...
- C#读写修改设置调整UVC摄像头画面-滚动
有时,我们需要在C#代码中对摄像头的滚动进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...