どのように反応コンポーネントjsファイルをロードする

Question

私は反応し、いくつかの基本的な概念をコードしようとするのが初めてです。しかし、私は理解できません、いくつかのものがあります。なぜなら、コンポーネントごとに別々のファイルを使用する場合、ブラウザのネットワークタブ（コンポーネントjsファイル用）にエントリがない理由です。 どのように反応してコンポーネントの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の1つのファイルを作成するスクリプトはほとんどありません。ドキュメントを1として

：https://github.com/facebookincubator/create-react-app

あなたが始めるしている場合は反応して、 のアプリのビルドを自動化するために作成反応するアプリを使用しています。設定ファイルはありません。 react-scriptsはpackage.json内の唯一の追加ビルド依存です。 あなたの環境には、最新のReact アプリを構築するために必要なものがすべて含まれています：

React、JSX、ES6、およびFlow構文のサポート。オブジェクト拡張オペレータのようなES6 を超える言語のエクストラ。共通のためのlintsのdevサーバ。 エラー。 JavaScriptから直接CSSファイルと画像ファイルをインポートします。 自動プレフィクスされたCSSなので、-webkitや他のプレフィックスは必要ありません。 build プロダクション用のJS、CSS、およびイメージをソースマップとともにバンドルするスクリプト。 オフラインで最初のサービスワーカーとWebアプリケーションマニフェストが、すべて プログレッシブWebアプリケーション基準を満たしています。

私は思う/ distフォルダからビルドJSを読み込むテンプレートがあります。そこにチェックしてください。また、構築された成果物を開くと、Webpackビルドによって生成されたコードが表示されます。