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 ...
随机推荐
- AKKA Router路由
路由概念 大量的actor在并行工作的时候,处理到来的消息流,这时候就需要一个组件或者东西来引导消息从源到目的地Actor,这个组件或者东西就是Router在Akka中,router也是一种actor ...
- etcd备份与恢复
目录 备份 恢复 备份 通常而言,etcd都是集群部署,其实并不需要额外备份,但实在是架不住猪队友误操作. 写一个简单的etcd备份脚本如下: #!/bin/bash set -e exec > ...
- Git命令之tag差异比较
比较两个tag的区别有以下几种方式: 例如两个tag分别为v1.0. v2.0 1. git log v2.0 ^v1.0 查看v2.0上有,而v1.0上没有的部分: 2. git log v1.0. ...
- 【转帖】nmap命令总结
nmap命令总结 https://www.cnblogs.com/chenqionghe/p/10657722.html 一.nmap是什么 nmap是一款网络扫描和主机检测的非常有用的工具,不局限于 ...
- netty心跳机制解决
直接看别个的源码:https://blog.csdn.net/xt8469/article/details/84827443>>https://blog.csdn.net/xt8469/a ...
- Java随堂笔记三
今天学习了Java运算符的最后一部分 public static void main(String[] args) { //算数运算符:+ - * / % ++ -- // ...
- Docker 搭建简单 LVS
LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现了基 ...
- Ubiq:A Scalable and Fault-tolerant Log Processing Infrastructure
Abstract 互联网应用通常会产生大量的时间日志需要进行分析和处理.本文介绍Ubiq的架构,它是一个分布式系统,用于处理不断增长的日志文件,具有可扩展性.高可用.低延迟的特性.Ubiq框架容忍基础 ...
- Prometheus 监控linux服务器
Prometheus 监控linux服务器 node_exporter:用于*NIX系统监控,使用Go语言编写的收集器. 使用版本 node_exporter 0.17.0 相关文档 使用文档:htt ...
- Java之利用Freemarker模板引擎实现代码生成器,提高效率
https://blog.csdn.net/huangwenyi1010/article/details/71249258 java模板引擎freemarker代码生成器 更多 个人分类: 一步一步 ...