react如何加载组件js文件

Question

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

我正在使用 npm start 运行

索引.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 之外的语言附加功能 像对象扩展运算符。一个开发服务器，它为常见的 lints 错误。直接从 JavaScript 导入 CSS 和图像文件。 自动前缀 CSS，因此您不需要 -webkit 或其他前缀。 构建 将 JS、CSS 和用于生产的图像与源映射捆绑在一起的脚本。 一个离线优先的服务工作者和一个网络应用清单，满足所有 Progressive Web App 标准。

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