个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 05:11:21 25 4
gpt4 key购买 nike

我是 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.

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

最佳答案

如果您只想在浏览器的 HTML 文件中使用 React，也许您可​​以只包含 React 库和 script 标签以及带有 script 标签的自定义 React 脚本。他们的documentation有一个很好的例子，就是在 HTML 文件中使用 React。我为此创建了一个带有示例示例的代码框，其中“赞”按钮正在使用 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>

希望对您有所帮助!

关于reactjs - 如何在没有 npm start 或类似命令的情况下在 HTML 中使用 React 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55519908/

25 4 0
文章推荐： cmake - CMake中两个子目录之间的依赖关系
文章推荐： loops - 具有动态变量的 Ansible 循环任务
文章推荐： python - Wand python 使用 GIF 获取像素颜色
文章推荐： Python ReportLab 段落计数打印的行数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com