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. 使用Clion优雅的完全远程自动同步和远程调试c++

    摘要:在linux上用vim写C++的时候,通常用gdb进行调试,不能随心所欲的看代码和跳转代码以及加watch(也有可能是因为我还没有get正确的使用方法).为此我发现Clion可以做到自动同步本场 ...

  2. Sitecore 9 您应该了解的所有新功能和变化

    信不信由你,当我谈论Sitecore时,我感到非常兴奋.这是一个充满潜力和机遇的伟大平台 如果你能想象一个刚刚进行过一次双重训练的人,一个特大号的星巴克,并且刚刚在创纪录的时间内完成了中国忍者勇士的障 ...

  3. 【题解】Luogu P5301 [GXOI/GZOI2019]宝牌一大堆

    原题传送门 首先先要学会麻将,然后会发现就是一个暴力dp,分三种情况考虑: 1.非七对子国士无双,设\(dp_{i,j,k,a,b}\)表示看到了第\(i\)种牌,一共有\(j\)个\(i-1\)开头 ...

  4. 集合单列--Colletion

    集合 学习集合的目标: 会使用集合存储数据 会遍历集合,把数据取出来 掌握每种集合的特性 集合和数组的区别 数组的长度是固定的.集合的长度是可变的. 数组中存储的是同一类型的元素,可以存储基本数据类型 ...

  5. IP地址和MAC地址绑定的必要性

    计算机网络是一个共通的网络,世界上任何计算机都可以互相访问. 实现的原理基于网络通讯的互联网交互五层模型. 计算机网络的历史发展 当计算机网络技术初始利用的时代,几台计算机通过集线器连接,就可以实现网 ...

  6. .net core mvc启动顺序以及主要部件4-MVC

    前面三章已经把MVC启动过程以及源代码做了讲解,本章开始正式MVC,mvc全称叫model view controller,也就是把表现层又细分三层,官网的图片描述: 默认创建了一个.net core ...

  7. .NET / C# 时间与时间戳的转换

    时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数. 我们在计算时间戳时应为1970年01月01日到指定时间. 应当注 ...

  8. php调用webservice接口,java代码接收不到参数

    前段时间做了一个项目的二次开发,有个功能是需要php调用java实现的webservice接口,并传递一些参数给接口,然后按照对方提供的接口说明文档进行传参调用,java那边有接收到请求,但是参数总是 ...

  9. python基础05--深浅copy, set,bytes

    1.1 深浅 copy 1. =  赋值操作, lis1=[1,2,3]  list2 = list1  list1.append(4)  则list1,list2都变 赋值都指向同一个地址,改变一个 ...

  10. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...