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的更多相关文章

  1. babel 无法解析jsx (webpack react )

    webpack.config.js的配置如下图: 报错: 修改webpack.config.js文件,如下即可:

  2. 使用Webpack和Babel来搭建React应用程序

    用Webpack(npm install -g webpack)代码打包,Webpack大致需要知道三件事: 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3 ...

  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 ...

  4. React系列文章:Babel编译JSX生成代码

    上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...

  5. React Native 开发之 (06) JSX

    一 React 1 React定义 React的GitHub地址是 https://github.com/facebook/react.它的官方介绍是 A JavaScript Library for ...

  6. React之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...

  7. react基于webpack和babel以及es6的项目搭建

    项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...

  8. 在React+Babel+Webpack环境中使用ESLint

    ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...

  9. 2. React JSX语法及特点介绍

    什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...

随机推荐

  1. Javascript的闭包(上)

    了解了预编译和作用域的相关知识以后我们来看一下开发中常见的工具——闭包.还是来看一个实例. function a(){ function b() { ; console.log(aa); } ; re ...

  2. 解决www.coursera.org可以登录但无法播放视频

  3. JSON ------ 创建与访问

    JSON (Java Script Object Notation, js对象表示法)    是存储和交换文本信息的语法,类似  XML JSON的文件类型是 “.json” 优点:    比XML ...

  4. Adobe Audition cc 修改音频 --- 淡出、淡入,合并、裁剪

    ​1.导入音频到Adobe Audition cc中支持多个音频操作 也可以使用鼠标把音频放入其中 2.淡出淡入: 红色圈中的就是淡出淡入的控制符 左手按住ctrl 或者 shift 键  右手按住鼠 ...

  5. ASP.NET-------gridview 进行编辑的时候,给出提示

    在使用gridview 控件的时候,控制修改人的操作行为,并给出合理的提示, 比如 在执行编辑操作的时候  不允许姓名为空,并显示出提示,姓名不可以为空 操作: 前台页面,对一些字段的解释 一定要注意 ...

  6. 016 Vuetify框架

    1.Vuetify优点 官方网站:https://vuetifyjs.com/zh-Hans/ 原因如下: Vuetify几乎不需要任何CSS代码,而element-ui许多布局样式需要我们来编写 V ...

  7. spring Valid @Pattern 常见的验证表达式

    1 匹配首尾空格的正则表达式:(^\s*)|(\s*$)   2 整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 3 只能输入数字:"^[0-9]*$". 4 只 ...

  8. 移相器——K波段有源移相器设计

    博主之前在做一款K波段有源移相器,所用工艺为smic55nmll工艺,完成了几个主要模块的仿真,现对之前的工作做个总结. K波段的频率范围是18G——27GHz,所设计移相器的工作频率范围是19G—— ...

  9. 【题解】Luogu P4284 [SHOI2014]概率充电器

    原题传送门 我们知道,每个电器充电对充电电器数的贡献都是相等的1,所以若第\(i\)个电器有\(p_i\)的概率充电时 \[E=\sum_{i=1}^np_i\] 我们考虑如何求\(p_i\),根据树 ...

  10. Bagging 和RF的区别

    跑训练无聊看了看别人的面经,发现自己一时半会答不上来,整理一下. 一.Bagging介绍 先看一个Bagging的一个概念图(图来自https://www.cnblogs.com/nickchen12 ...