首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

由create- React -app创建的react页面在IE上不起作用。巴别塔不是很有用吗?

由create-React-app创建的React页面在IE上不起作用是因为create-React-app默认不支持IE浏览器。create-React-app是一个用于快速搭建React应用的脚手架工具,它默认使用了一些现代浏览器支持的特性,而IE浏览器对这些特性的支持较差。

巴别塔(Babel)是一个广泛使用的JavaScript编译器,可以将新版本的JavaScript代码转换为旧版本的代码,从而实现在不支持新特性的浏览器中运行。在React项目中,可以使用Babel来转换React代码,使其在不同浏览器中兼容。

要解决create-React-app创建的React页面在IE上不起作用的问题,可以进行以下步骤:

  1. 安装必要的依赖:在项目根目录下运行以下命令安装Babel相关依赖:
代码语言:txt
复制
npm install @babel/preset-env @babel/preset-react --save-dev
  1. 配置Babel:在项目根目录下创建一个名为.babelrc的文件,并添加以下内容:
代码语言:txt
复制
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
  1. 修改package.json:在package.json文件中的browserslist字段中添加IE浏览器的支持,例如:
代码语言:txt
复制
"browserslist": [
  ">0.2%",
  "not dead",
  "IE 11"
]
  1. 重新启动项目:重新启动React项目,运行以下命令:
代码语言:txt
复制
npm start

这样配置后,create-React-app创建的React页面将会通过Babel进行转换,使其在IE浏览器中正常运行。

巴别塔(Babel)是一个非常有用的工具,它可以帮助开发者解决不同浏览器之间的兼容性问题,使得开发者可以使用最新的JavaScript语法和特性,同时保证在旧版本浏览器中的兼容性。巴别塔广泛应用于前端开发中,特别是在React项目中,帮助开发者更好地支持不同浏览器。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),详情请参考腾讯云CDN产品介绍。腾讯云CDN可以加速网站内容分发,提高页面加载速度,同时具备缓存、压缩、加速等功能,适用于各类网站和应用场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

react思维

一个计数器 先用官方脚手架create-react-app创建项目: create-react-app aaacd aaanpm start 写一个点击计数器:...即使现在,HTML中直接使用onclick很不专业,原因如下:· •onclick添加事件处理函数是全局环境下执行,这污染了全局环境,容易产生意料不到后果;•给很多DOM元素添加onclick...——而上面说这些问题,JSX中都不存在。 jsx事件特点: •挂载事件处理函数,作用域只作用在组件范围内。...拆解create- react-app 前端最喜欢npm语句应该是npm start,看下官方脚手架命令脚本: "scripts": { "start": "react-scripts...src目录,这段代码表示,所有js|mjs|jsx|ts|tsx后缀文件,全部babel-loader处理。

1.3K20

『Ant Design』使用

也就是说它帮我们封装了一些常用 UI 企业开发中它可以帮助我们提升开发效率 那么简单来理解这个『Ant Design』,它其实就是 React 版本 Element UI 2....总结下来就是:如果你不是做政府项目的话是不用去考虑 三、Ant Design 使用 市面上非常多 UI 框架,总不能全部都去学习一遍,所以我们使用时候直接去打开官方文档按照对应步骤来抄写即可,...官方文档地址: https://ant.design/index-cn 点击 开始使用,会默认跳转到组件页面,再点击 研发: 创建过程我这里也贴一下我正好也是创建一个项目,我这里创建项目名称是 antd-demo..., 首先安装 create-react-app: npm install -g create-react-app 使用 create-react-app 创建项目: create-react-app antd-demo...; 如上代码采用 这种写法,这种写法叫做 Fragment,它是 React 16.2 之后才有的,它作用就是可以不增加额外节点情况下,让 render() 方法中返回多个元素。

21531
  • 2020 年 JavaScript 后起之秀

    是一个通过 HTML 页面上添加一个标记来检查页面的标签,不需要构建过程,所有事情都可以从 HTML 标记中直接完成,因此,如果开发者想快速增强现有 Web 页面而又不增加任何内容的话...,是一个理想解决方案。...和作用域插槽都不是最佳选择) 它具有更好 TypeScript 支持 查看迁移指南以获取有关版本 3 引入更改更多详细信息。...版本 10 和 11 今年晚些时候问世。 Angular 9 即将发布:改进 Ivy 编译和渲染管道 Angular 10 正式发布,不再支持 IE9/10!...现在,塞斯蒂安·麦肯齐(Sebastian McKenzie)罗马全职工作,将统一 JavaScript 工具努力将走多远。它可能是处理编译,测试,整理...

    2.4K20

    【微前端】10分钟学会乾坤大挪移

    虽然麻烦,但是前端工程师还是把这个问题解决了,而这个将多个 SPA 合并成一个 Web App 解决方案就是微前端。 为什么要微前端 “多个 SPA 合并成一个 Web App?”... 本质上是页面的硬隔离,所以如果你有个遮罩层,可能只能在那一小片区域才展示遮罩层 页面之间通信麻烦 每次都要加载子应用,速度很慢 而微前端正好可以补足上面的缺点。...主应用 VS 子应用 首先,要知道现在项目并不是只有一个了,而是区分出 主应用 和 子应用,关系如下: 两者区别: 主应用 概念:就是要统治各个子应用应用,也即合并结果页面 负责子应用注册、路由分发...可以简单理解为 React.js 和 Vue.js 里 App 组件,主要做一些初始化、路由注册、全局状态注册、销毁时动作 子应用 概念:各个 SPA 应用,可以理解为 SPA 里页面组件 负责暴露一些函数...首先用 create-react-app创建子应用: create-react-app baidu src 目录下新增 public-path.js: if (window.

    1.2K50

    React常见面试题

    许多包含预配置工具,例如:create- react app 和 next.js 在其内部也引入了jsx转换。 旧 JSX转换会把jsx 转换为 React.createElement调用。...(Page) 页面元素级别: 组件渲染性能追踪 页面复用 全局常量(通过接口请求),能过hoc抽离 //也可以通过全局状态管理来获取 对当前页面的一些事件默认执行做阻止(比如:阻止app默认下拉事件...页面和状态通信 # 如何创建自己hooks?...,patch(batching批处理)过程中尽可能地一次性将差异更新到DOM中,降低更新DOM频率 **【数据驱动程序】**使用数据驱动页面,而不是操作DOM形式 【跨平台】:node层没有DOM...结论:有时表现出同步,有时表现出“异步“ 表现场景: 同步:setTimeout,原生事件; 异步:合成事件,钩子函数( 生命周期 ); react异步说明: setState 异步并不是说内部代码异步代码实现

    4.1K20

    这 5 个前端组件库,可以让你放弃 jQuery UI

    以下讲解Kendo UI几件事情以及如何使用Kendo UI来创建炫酷交互元素。 首先这些组件是Telerik开发。...这是一个使用UI元素从头创建完整系统,能够完美匹配你Angular项目。如果你想要使用Angular,那么Kendo UI已经支持了。 需要注意是,Kendo UI不是一个免费框架。...有趣一点是,Wijmo 5构建在更现代化标准之上,因此IE8上不起作用,此时就需要Wijmo旧版本。Wijmo 3是基于jQuery,所以它支持直到IE6上使用。...选择新框架时,如果有较好文档会变得非常好。如果你查想Wijmo图表模块(和代码示例),那么可以demo page页面找到FlexChart demo,以便了解它是如何工作。...EasyUI是一个扩展jQuery部件集合,用于创建新式,交互式网站和web app交互。使用EasyUI,你可以使用HTML标记或者JavaScript来创建常用UI元素。

    5.2K20

    React Router V6详解

    基于React前端架构中,React是不附带路由库,所以要管理多个路由页面就需要使用到第三方库,比如React Router。...事实上,react-router并不是一个库,包含3个库:react-router、react-router-dom和react-router-native,分别用来适配浏览器环境和手机原生环境。...npm:npm install react-router-dom@6 //或者 yarn:yarn add react-router-dom@6 1.3 路由模式 页面应用中,为了实现切换页面不刷新浏览器功能在...4.1 基本概念 正式讲解之前,我们先看一下路由中一些概念: URL:地址栏中URL; Location:React Router基于浏览器内置window.location对象封装而成特定对象...: 4.6 导航函数 V6版本中,我们可以使用useNavigate钩子函数来导航到某个页面

    7.9K50

    React服务端渲染-next.js

    默认情况下服务器呈现 自动代码拆分可加快页面加载速度 客户端路由(基于页面) 基于 Webpack 开发环境,支持热模块替换(HMR) 官方文档 中文官网-带有测试题 初始化项目 方式1:手动撸一个...react react-dom next // 安装依赖 mkdir pages //创建pages,一定要做,否则后期运行会报错 然后打开 next-demo 目录下 package.json 文件并用以下内容替换...特点3:_app.js和_document.js _app.js可以认为是页面的父组件,可以做一些统一布局,错误处理之类事情,比如: 页面布局 当路由变化时保持页面状态 使用componentDidCatch...具体配置参考上面官网给例子。 踩坑3:接口鉴权 SPA项目中,接口一般都是componentDidMount中调用,然后根据数据渲染页面。...这时,你只能在特定页面(如果只有某个页面的某个接口需要鉴权),或者_app.js这个全局组件上添加登录态判断:componentDidMount中调用登录态接口,并根据当前用户状态做是否重定向到登录页操作

    4K21

    2018 最值得关注前端技术

    人在进步,技术发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人判断进行一个预测判断,希望能对大家起到一个参考作用!...2.PWA PWA(Progressive Web Apps)谷歌提出,用前沿技术开发,让网页使用如同App体验一系列方案。...资料参考: PWA 入门: 写个非常简单 PWA 页面 【转载】你首个 Progressive Web App 【转载】下一代Web应用模型:Progressive Web App 3....vue2017年火,但在2018年vue潜力不容小觑如下图(有1.2W人想使用vue)。虽然超过react可能性不是很大,但是位置依然会提升 ?...如果极端得不学js,直接上手框架,会吃力,容易懵。 7.人工智能和大数据 人工智能和大数据,不是一门技术,而是一个领域,最近两年都很火,也不止于前端。我也觉得是互联网下一波红利。

    1.1K31

    React新特性——Protals与Error Boundaries

    虽然能解决前面2个问题,但是使用 Redux 除了多引入一些包之外,这也不是一种“自然”实现方式。...所以我们依然可以按照冒泡方式处理Protals组件事件。 看个代码例子,我们定义两个组件——App、Pop。 App是整个页面的框架,负责将Pop弹窗中输入内容显示到页面中。...当组件使用过程中出现某个异常没有被任何 componentDidCatch 方法捕获,那么 React 将会卸载掉整个 虚拟Dom树。这样结果是任何未处理异常都导致用户看到一个空白页面。...还可以专门设定一个服务器接口来收集页面客户端运行时出现异常。 优化异常堆栈 新版本React优化了异常输出,能够更清晰跟踪到出错位置。...异常日志输出内容将会比之前React丰富很多,除了输出JavaScript异常信息,还会清晰定位到错误出现组件: 如果你项目使用最新版本 create-react-app 创建,那么这一项功能已经存在了

    1K40

    一文带你梳理React面试题(2023年版本)

    或prop),数据驱动视图更新虚拟DOM浏览器渲染流水线可知,DOM操作是一个昂贵操作,耗性能,因此产生了虚拟DOM。...如果组件首字母为小写,它会被当成字符串进行传递,创建虚拟DOM时候,就会把它当成一个html标签,而html没有app这个标签,就会报错。...事件设计动机(作用):底层磨平不同浏览器差异,React实现了统一事件机制,我们不再需要处理浏览器事件机制方面的兼容问题,在上层面向开发者暴露稳定、统一、与原生事件相同事件接口React把握了事件机制主动权...,实现了对所有事件中心化管控React引入事件池避免垃圾回收,事件池中获取或释放事件对象,避免频繁创建和销毁React事件机制和原生DOM事件流有什么区别虽然合成事件不是原生DOM事件,但它包含了原生...thisreact组件会被编译为React.createElement,createElement中,它this丢失了,并不是组件实例调用,因此需要手动绑定this为什么不能通过return false

    4.3K122

    回顾 babel 6和7,来预测下 babel 8

    点击上方“魔术师卡颂”,选择“设为星标” 专注React,学不会你打我! babel 最开始叫 6to5,顾名思义,功能是 es6 转 es5。...babel 来自典故: 当时人类联合起来兴建希望能通往天堂高塔,为了阻止人类计划,上帝让人类说不同语言,使人类相互之间不能沟通,计划因此失败,人类自此各散东西。...这座就是。 这个典故符合 babel 转译器定位。 ? babel 编译流程 babel 从最初到现在一直目的都很明确,就是把源码中新语法和 api 转成目标浏览器支持。...它集合是这样: ? 是不是比起 babel 6 更简单了。 (preset-react不是 es 标准语法,也没有啥变化,就不包括在里面了)。...这样就不再污染全局环境了,而是使用一个唯一标识符来引入。 看起来,babel 7 好像已经完美了,可以打 90 多分了? 不是的,babel 7 有 babel 7 问题。

    78640

    2018前端值得关注技术

    人在进步,技术发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人判断进行一个预测判断,希望能对大家起到一个参考作用!...2.PWA PWA(Progressive Web Apps)谷歌提出,用前沿技术开发,让网页使用如同App体验一系列方案。...资料参考: PWA 入门: 写个非常简单 PWA 页面 【转载】你首个 Progressive Web App 【转载】下一代Web应用模型:Progressive Web App 3.typeScript...如果极端得不学js,直接上手框架,会吃力,容易懵。 7.人工智能和大数据 人工智能和大数据,不是一门技术,而是一个领域,最近两年都很火,也不止于前端。我也觉得是互联网下一波红利。...但是就在17年第四季度还是年末,微信先后宣布可以内嵌html5页面,也可以开发小游戏。让我看过了小程序又有了刚发布热度。18年,小程序发展如何,我是否会接触和学习开发小程序,走着瞧。

    1.6K150

    React 手写笔记

    全局安装create-react-app $ npm install -g create-react-app 创建一个项目 $ create-react-app your-app 注意命名方式 Creating...ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它作用了。...,组件自己设置和更改,也就是说组件自己维护,使用状态目的就是为了不同状态下使组件显示不同(自己管理) 定义state 第一种方式 import React, { Component } from...MVC只是看起来很美 MVC框架数据流理想,请求先到Controller, Controller调用Model中数据交给View进行渲染,但是实际项目中,又是允许Model和View直接通信...其实FluxReact应用就类似于Vue中Vuex作用,但是Vue中,Vue是完整mvvm框架,而Vuex只是一个全局插件。

    4.8K20

    前端开发面试题

    一个页面很多个 Box 组成,元素类型和 display 属性,决定了这个 Box 类型。...fixed元素是相对整个页面固定位置,你屏幕上滑动只是移动这个所谓viewport, 原来网页还好好在那,fixed内容也没有变过位置, 所以说并不是iOS不支持fixed,只是fixed...闭包是指有权访问另一个函数作用域中变量函数,创建闭包最常见方式就是一个函数内创建另一个函数,通过另一个函数访问这个函数局部变量,利用闭包可以突破作用链域,将函数内部变量和方法传递到外部。...3、新创建对象 this 所引用,并且最后隐式返回 this 。 var obj = {}; obj....高阶组件就是一个 React 组件包裹着另外一个 React 组件 并不是父子关系组件,如何实现相互数据通信?

    5.1K52

    React框架介绍

    一、recat介绍1、是什么用于构建用户界面的JavaScript库(只关注视图)是一个将数据渲染为HTML视图开源JavaScript库2、谁开发Facebook开发,且开源3、为什么要学3.1...4、React特点4.1.采用组件化模式、声明式编码,提高开发效率及组件复用率。4.2.React Native中可以使用React语法进行移动端开发。....使用Jsx创建虚拟dom(重点) JSX是一种JavaScript语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是JavaScript内部实现。...此处一定不要写引号,因为不是字符串 */Hello,React)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,...5.1.3.作用:复用js, 简化js编写, 提高js运行效率5.2.组件 5.2.1.理解:用来实现局部功能效果代码和资源集合(html/css/js/image等等) 5.2.2

    39020

    webpack2 终极优化

    应用有多个页面的场景下提取出所有页面公共代码减少单个页面的代码,不同页面之间切换时所有页面公共代码之前被加载过而不必重新加载。这个方法可以非常有效提升应用性能。...,开发环境时最好关闭因为它们耗时。...webpack-dev-server内置模块热替换,配置起来也方便,下面以react应用为例,步骤如下: 启动webpack-dev-server时候带上--hot参数开启模块热替换,开启--hot...自动生成html webpack只做了资源打包工作还缺少把这些加载到html里运行功能,庞大app里手写html去加载这些资源是繁琐易错,我们需要自动正确加载打包出资源。...├── A.js ├── B.js └── index.html 管理多页面 虽然webpack适用于单页应用,但复杂系统经常是多个单页应用组成,每个页面一个功能模块。

    57020

    webpack2 终极优化

    应用有多个页面的场景下提取出所有页面公共代码减少单个页面的代码,不同页面之间切换时所有页面公共代码之前被加载过而不必重新加载。这个方法可以非常有效提升应用性能。...,开发环境时最好关闭因为它们耗时。...webpack-dev-server内置模块热替换,配置起来也方便,下面以react应用为例,步骤如下: 启动webpack-dev-server时候带上--hot参数开启模块热替换,开启--hot...自动生成html webpack只做了资源打包工作还缺少把这些加载到html里运行功能,庞大app里手写html去加载这些资源是繁琐易错,我们需要自动正确加载打包出资源。...├── A.js ├── B.js └── index.html 管理多页面 虽然webpack适用于单页应用,但复杂系统经常是多个单页应用组成,每个页面一个功能模块。

    1.1K110

    2021前端面试题及答案_前端开发面试题2021

    2)、跨浏览器兼容:虚拟 DOM 帮助我们解决了跨浏览器问题,它为我们提供了标准化 API,甚至 IE8 中都是没问题。...4)、单向数据流:Flux 是一个用于 JavaScript 应用中创建单向数据层架构,它随着 React 视图库开发而被 Facebook 概念化。...更重要是,你不能保证组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试一个未挂载组件上调用 setState,这将不起作用。...15除了构造函数中绑定 this,还有其它方式吗 你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持。...回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新回调。

    1.3K30
    领券