Reactjs 如何在HTML中使用react应用程序而不使用npm start或类似命令_Reactjs

Reactjs 如何在HTML中使用react应用程序而不使用npm start或类似命令

reactjs

Reactjs 如何在HTML中使用react应用程序而不使用npm start或类似命令,reactjs,Reactjs,我对ReactJS有点陌生，甚至不知道这是否可能，但我希望我的ReactJS应用程序在浏览器中从.html文件开始工作。不需要调用服务器，让它以这种方式工作。（显然，我不介意使用服务器来提供服务）只需要调用.html文件就可以了 public/index.html文件： <head> <meta charset="utf-8"> <script src="/my_library/my_library.min.js"

我对ReactJS有点陌生，甚至不知道这是否可能，但我希望我的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>

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;

这正是我想要改变的。如果有人能提供一些指导或帮助，非常感谢。

如果您只想在浏览器中的

HTML

文件中使用

React

，那么您可以将

React

库包含在

script

标记中，也可以将自定义React脚本包含在

script

标记中。他们有一个很好的例子，就是在

HTML

文件中使用React。我用下面的示例创建了一个代码框，其中like按钮使用react。但是，如果要使用

JSX

语法，则必须使用

Babel

，将

JSX

转换为本机

JavaScript

，并像这样链接库：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


一分钟内加入并反应
一分钟内加入并反应
本页演示如何在不使用构建工具的情况下使用React
React作为脚本标记加载

也许这就是您需要的。

This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>