React如何加载组件js文件

Question

我是React的新手，正在尝试编写一些基本概念。 但是有几件事，我听不懂。 当为不同的组件使用单独的文件时，为什么浏览器网络选项卡中没有条目（对于组件js文件）。 react如何加载组件js文件或文件内容并将其提供给浏览器。（就像使用“ script”标签时，该特定文件会有一个请求条目。）

我正在使用npm start运行

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

看来您正在使用“ create-react-app”，它实际上带有一些脚本来构建您的JS，并在一个文件中创建JS的花粉（如果我没有记错的话）。

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

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

React，JSX，ES6和Flow语法支持。 ES6以外的其他语言，例如对象传播运算符。 清除常见错误的开发服务器。 直接从JavaScript导入CSS和图像文件。 自动前缀CSS，因此您不需要-webkit或其他前缀。 一个构建脚本，用于将JS，CSS和图像用于生产，并带有源映射。 满足所有渐进式Web应用程序标准的脱机优先服务工作者和Web应用程序清单。

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