Question

我对ReactJS还是陌生的，甚至不知道是否可行，但是我希望我的react应用能够从.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.

这正是我要更改的目标。如果有人可以提供一些指导或帮助，将不胜感激。

Answer 1

如果您只想在浏览器中的React文件中使用HTML，则可以只包含带有React标签和自定义的script库还使用script标签来反应脚本。他们的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，{{1}等工具设置构建配置 }，babel等。但这意味着您可以开始构建应用程序，因此您可以专注于应用程序本身而不是配置设置。在幕后，它使用webpack-dev-server来服务您的应用程序，但是对于您的用例，我认为最好将eslint作为React标签添加到现有HTML中页面

script

'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);

希望有帮助！

如何在没有npm start或类似命令的情况下在HTML中使用React应用

1 个答案: