react实现

发表于 2025-04-07 更新于 2025-04-14 阅读次数：

我在page.pug内插入了
div#react-root // 这是 React 组件的挂载点

block scripts
// 引入 React 打包后的文件
script(src=’/js/bundle.js’)

创建了有关index.js在src里面（src也是为创建的）
还创建了一个webpack.config.js和react.babelrc

装了这些
npm install react react-dom
npm install –save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli babel-loader
npm install –save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader
然后还要在layout.pug里面加上
//- 弹窗通知
!=partial(‘includes/popup/index’, {}, {cache: true})

block scripts（加上这句话，与上面弹窗通知对齐！）就可以实现react了
我将bundle.js从"C:\Users\86198\myblog\world-map-widget\node_modules\ajv\scripts\bundle.js"移动到了source/js
我在source/js里加了一个world-map.js
在about里的index.md里面加了
<world-map data-dots='[{"start":{"lat":34.0522,"lng":-118.2437},"end":{"lat":40.7128,"lng":-74.0060}},{"start":{"lat":51.5074,"lng":-0.1278},"end":{"lat":48.8566,"lng":2.3522}}]'></world-map>

cao,就是加载不出来地图
我删除了一个index.js
内容/在 index.js 中编写你的 React 组件代码。例如：/
import React from ‘react’;
import ReactDOM from ‘react-dom’;

function App() {
return

Hello from React!

;
}

ReactDOM.render(, document.getElementById(‘react-root’));

我从source/js里把echarts.min.js移动到桌面了
我删除了page.pug里的
block scripts
// 引入 React 打包后的文件
script(src=’/public/js/bundle.js’)