在index.html中使用来自cdn链接的React组件
，是指在前端开发中利用React框架的组件库来构建用户界面。React是一个由Facebook开发的用于构建用户界面的JavaScript库，它具有高效、灵活和可维护等特点。在使用React组件之前，我们需要引入React的相关库文件。
首先，在index.html中添加如下代码，引入React库和React DOM库：
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>然后，在index.html中添加如下代码，引入要使用的React组件：
<script src="https://cdn.jsdelivr.net/npm/[组件库名称]"></script>其中，[组件库名称]可以根据具体需求替换为相应的组件库名称，如：
- 如果要使用Ant Design的React组件库，可以使用以下CDN链接：
<script src="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.css" />- 如果要使用Material-UI的React组件库，可以使用以下CDN链接：
<script src="https://cdn.jsdelivr.net/npm/material-ui@next/dist/umd/material-ui.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-ui@next/dist/umd/material-ui.production.min.css" />引入React组件后，我们可以在index.html中使用这些组件来构建界面。具体的使用方法和示例代码可以参考各个组件库的官方文档。
总结一下，使用来自CDN链接的React组件可以方便快捷地在前端开发中构建用户界面。通过引入相关的React库文件和组件库文件，我们可以使用各种优秀的React组件来提升开发效率，并实现丰富的用户交互体验。腾讯云在React组件库方面可能没有专门的产品和推荐链接，但可以借助腾讯云的云计算服务来部署和托管使用React开发的应用程序，例如使用腾讯云云服务器（CVM）来搭建网站，并使用腾讯云对象存储（COS）来存储静态资源文件等。具体腾讯云产品和服务的介绍可以参考腾讯云官方网站。
相关·内容
我的应用程序运行成功，但是在使用ant设计的几个组件后，我在浏览器控制台上得到了这个错误。当我安装ant d时，我执行以下步骤
npm安装antd
将antd.compact.min.css的链接标记添加到index.html
向index.html添加了/antd/4.13.1/antd.min.js的脚本标记
向index.html添加了/antd/4.13.1/antd-with-locales.min.js的脚本标记
Uncaught TypeError: Cannot read property 'Component' of undefined
浏览 7提问于2021-03-19得票数 1
回答已采纳
我想在我的react项目中使用外部js，比如jQuery、lighterjs和其他js。 我不知道如何在我的项目中包含js。
浏览 18提问于2019-05-23得票数 0
回答已采纳
1回答
所以我一直在练习反应，现在我发现自己学会了反应--自我引导。当我的设置看起来正确的时候，我不能让它工作。
Ⅰ克隆了一个反应锅炉板
$ create-react-app myapp
然后我安装了引导程序
$ npm install --save react-bootstrap
然后我添加了一个<Button>
import React, { Component } from 'react';
import './App.css';
import Button from 'react-bootstrap/lib/Button';
cl
浏览 0提问于2017-05-02得票数 2
回答已采纳
用Reason和React构建一个组件总是会给我一个" React“的模块导入语句，如果React是从CDN中包含的，就找不到了。对此有解决方案吗？我曾尝试在index.html中定义window.react = React，但没有成功。es6-global设置不会更改任何内容。 我没有使用像webpack那样的捆绑程序。 编辑:可能来自原因论坛的相关帖子：https://reasonml.chat/t/can-one-load-reasonml-es6-modules-without-a-bundler/2219 类似问题(未解决)：can one load reasonml es
浏览 28提问于2020-11-06得票数 1
回答已采纳
1回答
我目前正在构建我的第一个app应用程序使用router和反应性路由器，因为我想开发一个单一的页面应用程序。我只是用react路由器做了第一个例子，并试图在两条路由之间切换，但是我无法让它工作。目标是拥有一个非常简单的html页面，其中包含一个链接列表，并在视图之间使用swicht。
当呈现index.html时，我看到了链接列表，但是当我单击链接时，我看到url路径正在改变，但是页面的内容没有变化，难道不应该反应-路由器js应该处理这个问题吗？我遗漏了什么？
守则如下：
我的index.html：
<!DOCTYPE html>
<html>
<head lang
浏览 5提问于2015-11-21得票数 0
回答已采纳
我有个Gatsby博客。我正在写一组教程帖子，用于在create-react-app中编写游戏。在我的Gatsby帖子标记中，我试图链接到同一服务器上该帖子的演示react应用程序的构建版本，但Gatsby总是给我一个404页面。
我正在使用nginx。由gatsby build产生的公用文件夹中的所有内容都位于我的All服务器的var/www/html目录中。
create-react-app构建位于var/www/html/tutorials/01/内部，并且有自己的index.html文件。
在我的标记中，我尝试了这两种格式的链接：view the code [here](/tutori
浏览 0提问于2019-11-02得票数 1
我在项目中使用了react ckeditor，这是load，ok。但是我需要在页面中使用ckeditor完整版本作为编辑器。
我怎样才能使用react ckeditor完整版本而不是标准版本？
浏览 0提问于2019-07-15得票数 2
回答已采纳
我正在学习本教程：。我打赌本教程本身与我的问题无关。在本教程中，它直接在ReactDOM文件中从.html文件中显示了ReactDOM和CDN的两个导入。
我的问题是，如何让包管理器(npm或yarn)下载这些文件(用RequireJS)导入浏览器，就像它是直接从CDN获取的？我用这个命令yarn add react react-dom安装了它们。
我的第一个猜测是，我需要导入两个文件，react.js和react-dom.js与RequireJS。所以，我现在的index.html是这样的：
<!doctype html>
<html>
<head>
浏览 1提问于2017-10-28得票数 3
我运行了create-react-app，并得到了public、src和javascript文件的通常结构。都很好。
现在我想将Bootstrap3添加到其中，但是我想要添加普通的css/js/字体文件夹，并创建自己的使用Bootstrap的组件。
问题是，我应该把文件放在哪里？
在public文件夹中或在src中
我假设我只是简单地通过在<script>和<link>标记中添加public/index.html来引用它们。
谢谢。
浏览 6提问于2017-05-04得票数 3
回答已采纳
4回答
反应引导元件不显示
、、、、
我试着测试旋转木马，但是当我加载页面时，它是空白的。
我用npm安装了react引导程序。
carousal代码来自。我查看了我的网络控制台，我也没有任何警告或错误。
carousal.js
import React, { Component } from 'react';
import {Carousel} from 'react-bootstrap';
class carousel extends Component {
render() {
return (
<Carousel>
浏览 2提问于2016-11-12得票数 1
回答已采纳
1回答
我想在我的React应用程序中使用默认的引导组件，所以我使用的是React-package。但我在一开始就坚持住了:我不能使用任何，尽管我只是从官方文档中复制非常简单的示例。每次我使用引导带样式的组件时，我都会得到基本的组件没有样式.例如，下面的代码呈现一个没有样式的<button>，而不是<Button bsStyle="danger">。
import React from "react";
import ReactDOM from "react-dom";
import {Provider} from 're
浏览 0提问于2016-11-24得票数 2
回答已采纳
我看过两种关于反应的教程--靴带。
有时，教程展示了如何用React-Bootstrap和引导安装npm install react-bootstrap bootstrap，然后在index.html中添加用于引导的CDN链接。
然后在其他教程中，它只是npm install react-bootstrap + CDN，用于index.html中的Bootstrap
例如，名为Brice的Youtuber有一段视频：，
在那里，他制作一个网站反应，反应-引导，反应-路由器和样式-组件。
在视频中，他同时安装了React-Bootstrap和Bootstrap，然后添加了CDN链接。
在Re
浏览 2提问于2020-02-13得票数 0
回答已采纳
我正在创建一个网络应用程序使用节点和反应。与其分离Node和React应用程序，不如将其集成到其中。因此，我尝试将react导入到index.html中，而不是一个react应用程序。我的服务器为index.html提供了很好的服务，但是在react组件中出现了一个错误。
这是我的index.html
<html>
<head>
<meta charset="utf-8">
<title>React Powered chat App</title>
</head>
<scr
浏览 0提问于2017-12-31得票数 3
回答已采纳
有哪些选项可以将外部javascript sdk绑定到React组件中？
我尝试过在index.html中包含javascript，并通过window.xyz引用它。它工作得很好，但我不能进行产品构建，因为javascript不是以这种方式打包的。
有没有一种方法可以简单地将javascript文件导入React组件定义中？
附言: React菜鸟在这里！
浏览 3提问于2018-10-11得票数 12
2回答
响应引导选项卡自定义类无法工作
、、、、
我使用react引导tabs组件，但是当我在这个nav-link中使用一个自定义父类指示符时，它不起作用。
<Tabs
defaultActiveKey="signup_renter"
id="uncontrolled-tab-example"
className="mb-3 approval-details-tab"
>
<Tab eventKey="signup_renter" title="About Car">
浏览 9提问于2022-04-25得票数 0
我试图在父站点上使用，并通过iframe嵌入一个基本的react页面。在父站点的index.html中，我添加了以下代码：
<iframe frameborder="0" id="sizetracker" src="http://localhost:3001" width="100%"
style="position: fixed; z-index: 1000; bottom: 0; right: 0"></iframe>
<script src="https://cd
浏览 9提问于2022-01-13得票数 0
我正在处理一个现有的应用程序。我在React Js中写了一些它的视图。现在，我想使用jquery load将这些视图加载到其他页面中。有没有可能。
假设leave.html包含react代码。现在，我想使用jquery load在index.html中加载leave.html。index.html没有react代码。如何完成此操作
浏览 2提问于2017-03-06得票数 1
引导表标题与数据不对齐，是否缺少任何样式？我在用
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
我在所附的图片中标记了this.setState不在私有方法中运行的函数。
浏览 0提问于2018-06-21得票数 0
回答已采纳
嗨，我是新的reactjs，当我从终端运行server.js文件时，它会显示浏览器上的空白页。index.html文件的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/babel-
core/5.8.23/browser.min.js"></script>
<script
src="https://cdn
浏览 0提问于2017-10-22得票数 1
回答已采纳
是否有一个CDN链接，用于新的遗留代理脚本，可以用于嵌入客户端react应用程序的index.html中？或者，我应该获取javascript内容并保存在一个文件中，然后在index.html中引用该文件吗？
浏览 10提问于2022-02-01得票数 0
我使用react-js-pagination在应用程序中显示页码。Bootstrap被添加到public/index.html文件中，并且可以在其他组件中使用className进行访问。
对于分页组件，我需要显式地添加引导样式吗？我看到的所有示例都自动应用了该样式。
代码-
import Pagination from "react-js-pagination";
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={3}
totalItemsCo
浏览 65提问于2018-09-01得票数 0
我正在尝试包含我的react js应用程序的cdn链接。什么将是包括材料用户界面的链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
&l
浏览 0提问于2017-11-08得票数 1
我试图用包含Firebase在内的颤振源构建一个扩展。发生CSP错误。
我该怎么办？有办法解决这个问题吗？或者BP的例子？
颤振建网(OK)
web扩展构建( CSP错误)
修改manifest.json，index.html用于web扩展构建(参考文献。
浏览 1提问于2022-11-08得票数 0
我试图将CDN链接包含到index.html文件中的React应用程序中。
在下面的代码中，这是我最近尝试过的。仍然记录错误：
无法获取依赖项，请在几秒钟内重试：(中间值)(.).then(.).finally不是函数
<body>
<!-- <noscript>
You need to enable JavaScript to run this app.
</noscript> -->
<div id="root"></div>
<script
浏览 4提问于2021-08-11得票数 0
回答已采纳
我对React非常陌生，我正在尝试将与我在render()中创建的表一起使用。到目前为止，我的代码看起来像这样- searchForm.js：
componentDidMount() {
$(this.refs.table).DataTable({});
}
render() {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<div>
<form onSubm
浏览 3提问于2017-03-15得票数 1
我是第一次接触reactjs，并且正在尝试理解reactjs应用程序的架构。我用react代码创建了两个不同的js文件( spc.js和index.js)，spc.js文件包含所有可重用的组件定义，而index.js包含调用组件和reactDom函数。这两个文件都是从index.html文件调用的。请找到下面的代码。
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Investor Relations<
浏览 0提问于2015-12-29得票数 1
我有一个项目，在那里我使用了react和节点(express)。当我链接到使用src="“等进行反应时。在项目中使用react与JSX没有问题，但是当我尝试像这样导入时：
import React from "react";
我得到了错误:未定义的ReferenceError: require没有定义这种“障碍”，因为我想使用像axios之类的模块。
我不使用任何模块绑定器
谢谢你的帮助！
浏览 2提问于2018-11-20得票数 1
回答已采纳
3回答
我正在尝试使用Muicss设置一个应用程序，用于在React js应用程序中设置我的组件样式。
下面是一个非常简单的例子的代码，但当我打开我的浏览器时，按钮中没有样式，我不知道我是否遗漏了什么，我以前使用过Material Design，没有任何问题。
import React from 'react';
import Button from 'muicss/lib/react/button';
export default class Example extends React.Component {
render() {
return (
浏览 2提问于2017-11-25得票数 2
1回答
我在我的基于react的项目中使用了。我提供了一个nodejs和一个浏览器版本的库。浏览器版本可以从获得，这也是我将这个库添加到我的react应用程序中的方式-我只需在index.html的脚本标记中包含poweredup.js。
我可以看到node-poweredup模块在其dist/browser文件夹(node_modules/node-poweredup/dist/browser/poweredup.js)中有一个相同的文件。如何在运行yarn build时将此js文件复制到我的构建目录中，以便可以使用此文件而不是CDN中的文件？
我有一个用create-react-app创建的标准r
浏览 1提问于2019-12-12得票数 0
我在后端使用django，在前端使用react和create-react-app。
我在我的网页上有不同的应用程序，它们在某种程度上是相互独立的：
mydomainname/home
mydomainname/foo
mydomainname/bar
它们在某种程度上是相连的，但在逻辑上完全不同，这就是我将它们分开的原因。
在build文件夹中只有一个create-react-app和一个index.html文件就可以处理吗？以及针对不同应用程序的浏览器路由器包？
例如，如果我查看Facebook主页(如果我想用React构建它)，我知道我的新闻提要、我的个人资料页面和其他人的页面都是连接在一
浏览 1提问于2020-05-29得票数 0
我是reactJS的新手。我有一个简单的react应用程序，可以独立运行。
现在我正在从现有的HTML页面调用它，并希望将一个参数传递给react应用程序，并在react应用程序中使用该参数。
我用谷歌搜索了一下，发现可以在react应用程序中设置和选择窗口环境变量。
我该怎么做？有什么想法或样品吗？
谢谢!
Here is my scenario,
<html>
...
<body>
...
<a href="http://server.com/reactapp/index.html">call react app</a>
&
浏览 1提问于2018-08-22得票数 0
我正在使用AWC CodeDeploy部署一个react app，下面的结构是由npx create-react-app npm build生成的
/var/www/my-website
.
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
├── css
│ ├── main.2be1a5a0.css
│ └── main.2be1a5a0.css.m
浏览 11提问于2022-09-04得票数 0
我在reactJS中使用bootstrap时遇到问题。我使用npm安装了bootstrap，并在public.html中包含了bootstrap css，但我只能获得一个没有任何样式的按钮。public.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale
浏览 0提问于2017-08-03得票数 0
2回答
我有一个React应用程序，可以通过导航栏设置路由。理想情况下，它应该切换，但路由不会切换。我是不是遗漏了什么？ App.js： import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import NavigationBar from './navigation/NavigationBar';
import { Routes } from './navigation/Routes';
export class App exten
浏览 14提问于2021-02-11得票数 0
回答已采纳
我在我的react项目中使用google analytics，即使我在线，它也没有显示任何活跃用户。我尝试了网上找到的不同方法，但似乎都不起作用。我只在本地主机上尝试过，没有在已部署的网站上尝试，但我认为它应该仍然可以工作。
这是我的代码。
我的app.js
import React, { Suspense, useEffect } from "react";
import "./App.css";
import IntroPage from "./containers/IntroPage/IntroPage";
import Layout fr
浏览 5提问于2020-08-30得票数 6
2回答
在react应用程序中，我如何添加和使用引导类而不安装它？没有安装就可以使用引导程序吗？如果是，那我怎么用呢？
请帮助我实现这一目标。
浏览 7提问于2020-11-19得票数 0
回答已采纳
这种情况:我有主页index.html。我不会对它使用React。但是在主页上有一个我使用React的游戏页面的链接。
我需要在游戏页面上创建应用程序，但webpack(我认为)可以渲染应用程序只在index.html.上我有渲染在游戏页面上的容器。但是react忽略了它。另一方面，当我在主页上为rander创建容器时，一切都是正常的。
代码的和平：
import React from 'react';
import ReactDOM from 'react-dom';
import ElectronApp from './components/E
浏览 1提问于2018-12-17得票数 0
我开发了react + meteor应用程序，然后出现了这样的错误，
我尝试添加导航，在本教程中获取数据。我试着用下面的方式添加这个const
MainComponent
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
i
浏览 0提问于2017-07-06得票数 5
回答已采纳
我是一个反应JS的初学者，并试图在应用程序中进行基本的路由。应用程序可以很好地使用npm服务器和serve -s build进行开发。
--在生产中使用'npm运行构建‘创建的build/index.html，最初使用的是空白页。
关于添加“主页”：“.，它仅服务于主页中的组件(此处为index.js)。
ERR_FILE_NOT_FOUND：导航栏中的链接(home.js、about.js和contact.js)没有加载错误消息-无法访问文件的-
点击主页链接：：
点击“关于”链接的：
index.html
<!DOCTYPE html>
<ht
浏览 2提问于2021-12-28得票数 0
1回答
现在已经一个小时了，我甚至在看了无数页之后也搞不懂如何导入Router、Route和Switch。
我的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import './NavImages.css'
ReactD
浏览 6提问于2021-07-14得票数 1
回答已采纳
1回答
我在React.js上学习了Facebook的教程，为了这个教程，他们在一个页面上做了他们的例子。
我想知道如何将组件分离到单独的文件中，并将它们导入到我的主应用程序中。如下所示。
/components
------>component1.js
------>component2.js
------>component3.js
/css
app.js
index.html
从在线示例中，有些需要组件，另一些则需要导入它们。
目前做这件事的最好方法是什么，我是否有一个好的样板/榜样？
浏览 4提问于2015-11-22得票数 1
回答已采纳
我的用例是将headwayapp.co集成到我的反应性应用程序中。
我正在尝试通过react组件注入js。
headwayapp的代码如下
<script src="//cdn.headwayapp.co/widget.js"></script>
<script>
var config = {
selector: ".CHANGE_THIS",
account: "ACCOUNT_ID"
};
Headway.init(config);
</script>
尽管我尝试用倍
浏览 0提问于2019-08-24得票数 4
回答已采纳
如何在React js中使用Font Awesome？如果我在我的项目中使用它，它不会出现。这是我的代码： import React ,{Component} from 'react'
import './category.css'
import axios from 'axios'
import Course from './courses/course.js'
import Searchfilter from './search/search.js'
class Category extends Compo
浏览 18提问于2020-09-07得票数 0
祝对这篇文章感兴趣的人一天好！
嗨，我一直在做一个react应用程序，很高兴能做一个bootstrap模板集成的事情是，一切都很好，但模板的响应性，它没有任何动画，它只是外观。
工作索引示例：
不工作的react-component示例：
索引代码是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%
浏览 0提问于2021-02-03得票数 0
这是我在index.html文件中引用的timeline.min.js文件。请注意，我还没有包含完整的代码。 function timeline(e, v) {
var g = [],
p = "Timeline:",
t = window.innerWidth,
i = void 0,
o = 0,
b = {
forceVerticalMode: { type: "integer", defaultValue: 600 },
horizontalStartPosition: { typ
浏览 107提问于2021-02-11得票数 1
2回答
我正在开发几个像下面这样的反应项目。
index.js
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM.render(<App />, getElementById("root"));
App.js
import React from 'react';
const App = () => (
<div className="App">
<header>header<
浏览 0提问于2019-06-06得票数 2
回答已采纳
2回答
单一spa集成问题与材料ui风格
、、、、
我们正在尝试整合单一水疗与反应和材料用户界面。我们有两个使用实质性UI的React应用程序：
根容器。
微锋(水疗应用)。
当我们集成这两个组件时，会出现以下错误：
在这个应用程序中，似乎有几个初始化的@material-ui/styles 实例。这可能会导致主题传播问题、损坏的类名、特性问题，并使您的应用程序在没有充分理由的情况下变得更大。有关更多信息，请参见 .
配置文件如下所示：
使用此配置的webpack.config.，我们希望将其外部化，以便它使用根容器应用程序中存在的物质ui依赖项。
index.js.我们正在注册微区。
index.html
浏览 2提问于2021-03-23得票数 2
1回答
从6.0.0版本开始，将mobx-react作为UMD从CDN加载会导致错误。有解决办法吗？
示例
const { observer } = mobxReact;
const App = observer(() => <div>Example</div>);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/re
浏览 1提问于2020-12-21得票数 0
回答已采纳
1回答
是否可以在一个React App中同时使用Functional和Class组件？我正在用React构建一个网站UI，后端已经用NodeJS构建。我使用的模板是用Class Components构建的，其中我介绍的新组件是带Context API的函数式组件。它们可以协同工作吗?还是有必要将所有的Class组件转换为函数？
浏览 1提问于2020-08-11得票数 0
我用Svelte和FullCalendar在我前面做了一个日历。我用了这样的代码
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth&#
浏览 12提问于2022-12-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
