React为什么需要babel?

图灵完备者
• 阅读 2588

首先标题是假命题。

react作为一个UI库是不需要babel的,使用的原因是因为jsx的语法问题。使用jsx语法可以使React的书写更简单、优雅。

jsx

class HelloWorld extends React.Component {    
    render() {
        return (
            <h1>Hello World</h1>
        );
    }  
}

js

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}
点赞
收藏
评论区
推荐文章
冴羽 冴羽
2年前
React 之 createElement 源码解读
React与Babel元素标签转译用过React的同学都知道,当我们这样写时:jsx<divid"foo"bar</divBabel会将其转译为:javascriptReact.crea
Stella981 Stella981
3年前
React的Element的创建和render
React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容。在React中构建Element 有两种方式:1、JSX的方式,JSX不是React的必用技术,但它可以用来产生一个React“element”.constelement(<h1className"
可莉 可莉
3年前
06. react 初次见面
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)    例如,传统的HTML:<buttononclick"activateLas
Stella981 Stella981
3年前
React 入门及学习笔记
React构建用户界面的JavaScript库,主要用于构建UI界面。Instagram,2013年开源。特点:1.声明式的设计2.高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。3.灵活,跟其他库灵活搭配使用。4.JSX,俗称JS里面写HTML,JavaScript语法的扩展。5.组件化,模
Stella981 Stella981
3年前
2020前端面试系列之JSX是什么
前言众所周知ReactNative开发中,页面View书写布局采用了React的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。JSX的定义JSX到底是什么?我们先看看\React官网\(https://reactjs.org/docs/g
Stella981 Stella981
3年前
React语法 [0]
React练习笔记reprintemps20200711语法分析:1.标签属性需要遵循规则:毕竟是替你转译,所以并不是真的在写标签;涉及JSX语法的部分,浏览器无法识别,必须转译,所以<scripttype'text/babel'/
Wesley13 Wesley13
3年前
02. react 初次见面
1、JSX简介我们来观察一下声明的这个变量:constelement<h1Hello,world!</h1;这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML.它被称为JSX,一种JavaScript的语法扩展。我们推荐在React中使用JSX来描述用户界面。JSX乍
Stella981 Stella981
3年前
React 第一个小游戏(井字棋)知识关键点
1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件2、render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特
可莉 可莉
3年前
2020前端面试系列之JSX是什么
前言众所周知ReactNative开发中,页面View书写布局采用了React的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。JSX的定义JSX到底是什么?我们先看看\React官网\(https://reactjs.org/docs/g
Stella981 Stella981
3年前
React对state的初级理解
props是参数,个个Class之间传值用的。state则为某个Class的内部状态,Class需要根据这个state是否改变而做出改变;<div id"content"</div    <script type"text/babel"      var CommentForm  React.createC
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(