Question

我是React的新手并尝试编写一些基本概念。但是很少有东西，我无法理解。为不同组件使用单独的文件时，为什么浏览器网络选项卡（组件js文件）中没有条目。如何反应加载组件js文件或文件内容并将其提供给浏览器。（例如，当使用＆＃34;脚本＆＃34;标记时，将会有该特定文件的请求条目。）

我正在使用npm开始运行

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './css/output.css';
import App from './App.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
import { Fragment } from 'react';
import logo from './logo.svg';
import Header from './Header';

class App extends Component {
  render() {
    return (
        <div>
            <Fragment>
                <Header/>
            </Fragment>
        </div>
    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';
import { Fragment } from 'react';

class Home extends Component {
  render() {
    return (
      <h1>
        Inside Home
      </h1>
    );
  }
}

export default Home;

Answer 1

看起来你正在使用＆＃34; create-react-app＆＃34;它实际上附带了很少的脚本来构建你的JS并在一个文件中创建JS的budnle（如果我没有记错的话）。

根据文档：https://github.com/facebookincubator/create-react-app

如果您开始使用React，请使用create-react-app进行自动化   你的应用程序的构建。没有配置文件，和   react-scripts是package.json中唯一的额外构建依赖项。   您的环境将拥有构建现代React所需的一切   应用程式：

React，JSX，ES6和Flow语法支持。超出ES6的语言附加功能   喜欢对象传播运算符。一个开发服务器，它可以解决常见问题   错误。直接从JavaScript导入CSS和图像文件。   Autoprefixed CSS，因此您不需要-webkit或其他前缀。 构建   使用源映射将JS，CSS和图像捆绑生产的脚本。   离线优先服务工作者和Web应用程序清单，满足所有需求   渐进式Web应用程序标准。

我认为有一个模板从/ dist文件夹加载构建JS。检查那里。此外，如果您打开构建的工件，您将看到由webpack构建生成的代码。

如何反应加载组件js文件

1 个答案: