首页
学习
活动
专区
工具
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() 方法中返回多个元素。

26231
  • Ant Design 组件库快速上手

    • 也就是说它帮我们封装了一些很常用的 UI • 在企业开发中它可以帮助我们提升开发效率 那么简单的来理解这个『Ant Design』,它其实就是 React 版本的 Element UI 2....创建过程我这里也贴一下我正好也是在创建一个项目,我这里创建的项目名称是 antd-demo, 首先安装 create-react-app: npm install -g create-react-app...使用 create-react-app 创建项目: create-react-app antd-demo 等待等待,漫长的等待即可。...; 如上代码采用 这种写法,这种写法叫做 Fragment,它是 React 16.2 之后才有的,它的作用就是可以在不增加额外节点的情况下,让 render() 方法中返回多个元素。...脚手架创建项目,在 React 项目中使用 Ant Design 组件 这篇文章的内容就介绍到这里,期待我们下次的相遇。

    10910

    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.3K50

    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.2K20

    这 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.3K20

    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对象封装而成的特定对象...: App> App> 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....vue在2017年很火,但在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 创建的,那么这一项功能已经存在了

    1.1K40

    回顾 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 的问题。

    79340

    一文带你梳理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

    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直接通信的...其实Flux在React里的应用就类似于Vue中的Vuex的作用,但是在Vue中,Vue是完整的mvvm框架,而Vuex只是一个全局的插件。

    4.9K20

    前端开发面试题

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

    5.1K52

    webpack2 终极优化

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

    57220

    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

    44120

    webpack2 终极优化

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

    1.2K110
    领券