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. Union 与 Union All 区别(抄的W3C School的,抄一遍就记住了!)

    Union ,UnionAll 俩都是用来合并两个或以上的查询结果集: Union操作符 :select语句中必须有相同的数列 (相等数量的列,不同结果集同一列的数据类型一致,列的顺序必须相同): u ...

  2. idea 2019.2 版本把菜单栏隐藏了恢复办法

    一不小心把idea的菜单栏给隐藏了(如图) ,搞了半天也恢复不了,网上也没有找到什么办法,可是搞得我焦头烂额呀,怎么找也找不到,也不见大神有过提示,最后没办法,想着去看看它的配置文件吧,于是便找到了默 ...

  3. 【剑指offer】构建乘积数组

    题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  4. Sitecore 8.2 安全性第2部分:安全性编辑器和Access Viewer

    在Sitecore中使用安全性时,您可以使用两个主要应用程序:安全编辑器和Access Viewer.从表面上看,这些工具看起来很相似,但它们扮演着截然不同的角色.让我们回顾一下每个应用程序以及它们的 ...

  5. 部署CentOS虚拟机集群

    1.在虚拟机中安装CentOS (1)使用CentOS-6.5-i386-minimal.iso.(2)创建虚拟机:打开Virtual Box,点击“新建”按钮,点击“下一步”,输入虚拟机名称为esh ...

  6. 基准测试工具:Wrk初识

    最近和同事聊起常用的一些压测工具,谈到了Apache ab.阿里云的PTS.Jmeter.Locust以及wrk各自的一些优缺点和适用的场景类型. 这篇博客,简单介绍下HTTP基准测试工具wrk的基本 ...

  7. “分而治之”,一种AI和动画系统的架构

    译者注:随着国内游戏研发水平的不断提高,对画面品质的不断提升,同时大量手游使用Unity和Unreal 4等成熟的工具开发,动作状态机已经不是什么陌生的概念了.我们在项目开发时也大量使用了动作状态机. ...

  8. C#安装和卸载windowsService的bat指令

    只需新建2个文本文档,将2个指令分别复制进去,再将txt格式改为bat格式,以管理员身份运行 安装指令 %SystemRoot%\Microsoft.NET\Framework\v4.0.30319\ ...

  9. Java IO---缓冲流和转换流

    一. 缓冲流 ​ 缓冲流是处理流的一种,也叫高效流,是对4个基本输入输出流的增强,它让输入输出流具有1个缓冲区,能显著减小与外部的IO次数,从而提高读写的效率,并且提供了一些额外的读写方法. ​ 因为 ...

  10. 分布式图片服务器FastDFS

    1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使 ...