我是ReactJS的新手，甚至不知道它是否可行，但我希望我的反应应用程序能够在.html文件的浏览器中工作。无需调用服务器并拥有它，只有这样工作。 （我不介意让服务器显然服务它）只需要能够通过调用.html文件
public / index.html文件：
<head>
<meta charset="utf-8">
<script src="/my_library/my_library.min.js"></script> <!-- needed for the project in the same folder the index.html is -->
<title>Demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
index.js（在src文件夹中）：
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
);
src文件夹中的App.jsx
import * as React from 'react';
import './App.css';
import { MyContainer } from './components/MyContainer/index';
class App extends React.Component {
render() {
return (
<div className={ 'App' }>
<header className={ 'App-header' }>
<h1 className={ 'App-title' }>
</h1>
</header>
<MyContainer />
</div>
);
}
}
export default App;
PS：我已经能够将React添加到我的文件中......但是我想添加的这个特殊组件只适用于NPM Start。正如您在上面显示的index.html文件中所看到的那样
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
这正是我的目标。如果任何人可以提供一些指导或帮助，将不胜感激。
如果你只是想在浏览器中的React文件中使用HTML，你可以只包含带有React标签的script库以及带有script标签的自定义React脚本。他们的documentation有一个很好的例子，只是在HTML文件中使用React。我创建了一个Codebox及其下面的示例示例，其中like按钮正在使用react。但是，如果你想使用JSX语法，你将不得不使用Babel，将JSX转换为本地JavaScript，并链接库如下：
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
create_react_app为您提供了大量的花里胡哨，因此您不必担心使用webpack，babel，eslint等工具设置构建配置。但这意味着您可以在构建应用程序方面领先一步您可以专注于应用程序本身而不是配置设置。在幕后它使用webpack-dev-server来提供你的应用程序，但对于你的用例，我认为最好只将React作为script标签添加到现有的HTML页面
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>希望这有帮助！