React call sequence: index.html → index.js → components/

After a project is created, there will be two files: index.html and index.js.

HTML/SRC /index.js/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app/my-app You can only call it index, not anything else (unless you change the configuration file, read on).

Note: runnpm run ejectIt can be exposedwebpackWait for the configuration file. Note that the operation cannot be reversed.

For details on how the NPM run eject command works, see other blog posts.

After creating the project using the scaffolding tool create-react-app,

Node_modules is the location where each plug-in is stored. 2. Public is used to place static resources that do not participate in the build; 3. SRC is the source file, generally do development in this folder, will participate in the package construction;

Here’s the thing: in package.json: There are only three dependencies: React, react-dom, and react-scripts. There are only three dependencies: React, react-dom, and react-scripts. The creat React app supports the following commands by default:

  • startStart the project in development mode;
  • buildBuild the entire project;
  • testtest
  • eject, will be the originalcreat react apprightwebpack.babelSuch relevant configurations of the package ejection out, if to becreat react appThere is no place to modify the configuration file in the existing directory. At this point, you can go throughejectThe command ejects the command that was originally wrapped in scaffolding, and you can see many configuration files in the project directory.

Suggestion: After the installation, first git add. Then git commit -m “init” and then NPM run eject

After using the scaffolding tool create-react-app to create and start the project, open http://localhost:3000, F12 and view the source page

<script type="text/javascript" src="/static/js/bundle.js"></script>
Copy the code

The /static/js/bundle.js file path is not visible in the my-app project, and the configuration file webpack.config.js is not written.

HTTP server configuration, auto-open browser window, React, ES6 syntax compilation, babel-core, webpack, etc. In fact, React-Scripts does all of that.

Start the project by using the NPM run start command.

Open my – app \ package json

"scripts": {
    "start": "react-scripts start". }Copy the code

So react-scripts start is executed

Open your react-scripts.js file in the bin folder of your my-app\node_modules\react-scripts folder

const scriptIndex = args.findIndex(
  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
);
const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];

if (['build'.'eject'.'start'.'test'].includes(script)) {
  const result = spawn.sync(
    'node',
    nodeArgs
      .concat(require.resolve('.. /scripts/' + script))
      .concat(args.slice(scriptIndex + 1)),
    { stdio: 'inherit'});if (result.signal) {
    if (result.signal === 'SIGKILL') {
      console.log(
        'The build failed because the process exited too early. ' +
          'This probably means the system ran out of memory or someone called ' +
          '`kill -9` on the process.'
      );
    } else if (result.signal === 'SIGTERM') {
      console.log(
        'The build failed because the process exited too early. ' +
          'Someone might have called `kill` or `killall`, or the system could ' +
          'be shutting down.'
      );
    }
    process.exit(1);
  }
  process.exit(result.status);
} else{...Copy the code

In the code abovescriptThe variable value of isstart.



So performmy-app\node_modules\react-scripts\scriptsThe start.js file code under the folder

var webpack = require('webpack');

var WebpackDevServer = require('webpack-dev-server');  // Start HTTP server

var paths = require('.. /config/paths');  // The file path to compile and the build path, etc

const configFactory = require('.. /config/webpack.config');

const createDevServerConfig = require('.. /config/webpackDevServer.config');

// This is why the port number is 3000 instead of 8080.
// restart NPM run start to take effect
var DEFAULT_PORT = parseInt(process.env.PORT, 10) | |3000; 

detect(DEFAULT_PORT).then(port => {

  if (port === DEFAULT_PORT) {

    run(port); // Start running here

    return; }...function run(port) { 

// You can set the HTTP protocol, or you can run it in the CMD command window before NPM run start
// set HTTPS=true&& NPM start To change the HTTPS protocol

  var protocol = process.env.HTTPS === 'true' ? "https" : "http"; 

  var host = process.env.HOST || 'localhost';   

  setupCompiler(host, port, protocol);  // Compile the source code to generate the path

  runDevServer(host, port, protocol);  // Start HTTP server

}

// Configure the HTTP server

function runDevServer(host, port, protocol) {

  var devServer = new WebpackDevServer(compiler, {

   compress: true,   

    clientLogLevel: 'none',

    contentBase: paths.appPublic,   // Specify the application root directory (i.e. the directory where index.html is located) according to the imported Paths

    hot: true,

    publicPath: config.output.publicPath, // Specify the virtual directory according to the imported config variable.Automatically points to the path compilation directory (/assets/ => /build/js/). When referring to a JS file in HTML,// You must refer to this virtual path (but you are actually referring to an in-memory file, neither /build/js/ nor /assets/).
    quiet: true,
    watchOptions: {
      ignored: /node_modules/
    },

    // Enable HTTPS if the HTTPS environment variable is set to 'true'

    https: protocol === "https",

    host: host

  });

  /** * omit other code */
    // Open the browser and send the request to the server
    openBrowser(protocol + ': / /' + host + ':' + port + '/');   
  });

}

function setupCompiler(host, port, protocol) {
  // Run from the webpack.config.dev configuration file pointed to by the imported config variable
  compiler = webpack(config, handleCompile);

     /** * omit other code */

}
Copy the code

The start.js file imported webpack.config and paths.js in the my-app\node_modules\react-scripts\config folder

The paths.js code is excerpted below:

 // Get the path where NPM run start is running
var appDirectory = fs.realpathSync(process.cwd());  

function resolveApp(relativePath) {

  return path.resolve(appDirectory, relativePath);

}

module.exports = {

  appPath: resolveApp('. '),

  ownPath: resolveApp('node_modules/react-scripts'),

  appBuild: resolveApp('build'),

  appPublic: resolveApp('public'),
  
  // This is how we started our project using public/index.html as the default home page
  appHtml: resolveApp('public/index.html'),   

  // What filename should be used in the project, including the public folder
  // Include the SRC folder in the file name project of the compiled entry file
  appIndexJs: resolveApp('src/index.js'),  
  appPackageJson: resolveApp('package.json'),

  appSrc: resolveApp('src'),

  yarnLockFile: resolveApp('yarn.lock'),

  testsSetup: resolveApp('src/setupTests.js'),

  appNodeModules: resolveApp('node_modules'),

  // this is empty with npm3 but node resolution searches higher anyway:

  ownNodeModules: resolveOwn('node_modules'),

  nodePaths: nodePaths,

  publicUrl: getPublicUrl(resolveApp('package.json')),

  servedPath: getServedPath(resolveApp('package.json'))};/** * omit other code */
Copy the code

The webpack.config code is excerpted below:

var paths = require('./paths');  // Also imports paths.js in the same folder

module.exports = {  
entry: [    
require.resolve('react-dev-utils/webpackHotDevClient'),    
require.resolve('./polyfills'),    
paths.appIndexJs     // compile entry file],
output: {
	path: paths.appBuild,  
	pathinfo: true.This is what we see when we open the browser and press F12 at the beginning
	filename: 'static/js/bundle.js', 
publicPath: publicPath  },

 /** * omit other code */
}
Copy the code