react script标签
时间: 2023-07-23 18:34:36 浏览: 47
React是一个用于构建用户界面的JavaScript库,它可以通过script标签引入到HTML文档中。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Example</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
// 在这里编写React代码
</script>
</body>
</html>
```
在这个示例中,我们通过script标签引入了React和React DOM的生产版本。在script标签中,我们可以编写React组件和应用逻辑。请注意,这只是一个简单的示例,实际的React应用通常会使用构建工具来管理依赖关系和构建过程。
相关问题
react webpack script标签引入js文件
如果要在React项目中使用Webpack,并且想要在HTML文件中使用script标签引入打包后生成的JS文件,可以按照以下步骤进行操作:
1. 在Webpack配置文件中,添加以下配置:
```javascript
module.exports = {
// ...其他配置
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
}
};
```
这里通过output配置指定了打包后生成的JS文件的输出路径和文件名,以及publicPath配置,这个配置用于指定Webpack生成的资源文件(比如打包后的JS文件)在浏览器中的访问路径。
2. 在HTML文件中使用以下代码引入打包后的JS文件:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
```
这里通过script标签的src属性指定了Webpack生成的JS文件的访问路径,这个路径就是在Webpack配置中指定的publicPath。
3. 在React项目中,可以通过ReactDOM.render()方法将组件渲染到页面上。
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
```
这里使用ReactDOM.render()方法将一个React元素渲染到页面上,具体的渲染内容可以根据实际需求修改。最后,在浏览器中打开HTML文件,即可看到渲染后的内容。
react中如何引入script
在React中引入外部的JavaScript脚本可以使用以下方法:
1. 在public/index.html文件中添加script标签,将外部脚本文件的链接放在src属性中。
```html
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="path-to-external-js-file.js"></script>
</body>
</html>
```
2. 在React组件中使用ES6的import语句引入外部脚本文件。
```jsx
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
const script = document.createElement('script');
script.src = 'path-to-external-js-file.js';
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);
return (
<div>
// Your component content
</div>
);
}
export default MyComponent;
```
这里使用了useEffect钩子函数,它会在组件渲染完成后执行,传递一个空的依赖项数组[]可以保证它只运行一次。在useEffect内部,创建一个script元素并将其附加到文档的body上,然后在组件卸载时删除该元素。