javascript - react如何加载组件js文件

Question

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

我正在使用 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;

首页.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 bundle (如果我没记错的话)。

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

If you’re getting started with React, use create-react-app to automate the build of your app. There is no configuration file, and react-scripts is the only extra build dependency in your package.json. Your environment will have everything you need to build a modern React app:

React, JSX, ES6, and Flow syntax support. Language extras beyond ES6 like the object spread operator. A dev server that lints for common errors. Import CSS and image files directly from JavaScript. Autoprefixed CSS, so you don’t need -webkit or other prefixes. A build script to bundle JS, CSS, and images for production, with sourcemaps. An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

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