How react loads component js files

Question

I am new to React and trying to code some basic concepts. But there are few things, I am not able to understand. Why there is no entry in browser network tab (for component js files) when using separate files for different components. How react loads the components js files or the file content and served it to the browser.(Like when using "script" tag there will be a request entry for that particular file.)

I am using npm start to run

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

It looks like you are using "create-react-app" it actually comes with few scripts that build your JS and create budnle of JS in one file (if I am not mistaken).

As per docs: 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.

There is a template that loads the build JS from /dist folder I think. Check there. Also if you open the built artifact you will see the code as produced by the webpack build.