我想知道是否可以在非反应网页中呈现整个反应应用程序 . 我尝试了很多链接,它建议代码片段如下所示,它只显示一个组件,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
<h1>POC</h1>
</body>
<script type="text/babel">
class Application extends React.Component {
render() {
//debugger
console.log('hi there')
return (
<div>
<h1>hello world</h1>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('root'));
</script>
</html>
但我想知道是否有可能让我的反应应用程序在同一条路径中,如,
- htdocs
- plainhtmljswebapp.html
- react-app-folder
- index.html
- main.js
- src
- components
- actions
- reducers
- package.json
- webpack.config.js
作为我的网络应用程序并加载/导入它并传递一些值作为道具,如果可能的话 . 我之前从未做过这样的整合,对其可行性/方法的任何帮助都将不胜感激 .
非常感谢
1 回答
有关此答案的更多背景,请参阅有关问题的评论
index.html
index.js
app.js
这只有redux集成,因为它创建了一个商店并将应用程序包装在_282089中,但我看不出有什么理由不能正常工作 .
我使用webpack对bundle和webpack-dev-server进行了测试 .