Create-react-app - how does index.html read React application code?

Question

I'm new to React and I used this explanation to build a basic React app: https://facebook.github.io/react/docs/installation.html

I opened a new project by:

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

index.html file is located in hello-world/public and here is the content of it:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">

    </div>
  </body>
</html>

However, all the "React stuff" is placed in hello-world\src directory. It looks that 'hello-world\src\index.js' activates the components.

What I don't understand is how index.html "reads" the content of index.js. index.html has no html tag that leads to index.js.

I can start this application by doing "npm start". What this command does is raising a server running on localhost:3000. How can I see the application without using "npm start"?

it's because react put itself between that <div id="root"> </div>. — Zorig
– Zorig, Commented Aug 7, 2017 at 6:54
I undersand it. What I want is just to double click index.html and see the entire application (without setting up a server using 'npm start') — CrazySynthax
– CrazySynthax, Commented Aug 7, 2017 at 6:55
@CrazySynthax to view your content by clicking just on index.html,You should use tools like webpack which will build all your react components code in a single file,which may named as bundle.min.js and then you just need to include that bundle.min.js in your index.html — Vinit Raj
– Vinit Raj, Commented Aug 7, 2017 at 7:01

Sundar Rajan Muthuraj · Accepted Answer · 2017-08-07 07:48:22Z

If we look at the DOM rendered on the browser (for npm start), it has the below script node injected:

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

Similarly, for the production builds (npm run build), there is an index.html file under build folder that has a similar script node injected.

Example in my case:

<script type="text/javascript" src="./static/js/main.440dcd65.js">

Therefore, I tend to think that the script node injection is done by the react-scripts library or from one of it's dependencies.

Also, to run the app without a web server, the below should work:

Have "homepage": "./" defined in the package.json
Run a production build (npm run build)
Launch the index.html directly from the build folder.

Edited:

The configurations under ./node_modules/react-scripts/config appears to takes care of the <script> node injection.

Example: ./node_modules/react-scripts/config/webpack.config.dev.js has,

// Generates an index.html file with the <script> injected.
new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
}),

Vinit Raj · Accepted Answer · 2017-08-07 07:28:46Z

You just need to bundle all your codes in single js file,for doing that you can use tools like webpack.

Suppose You have project structure like this:-

Project
-src
    -app.js
-index.html
-package.json
-node-modules

You need to add webpack.config.js :- in your root directory which will contain some certain configurations to bundle your codes.

webpack.config.js will look alike this:-

var path = require('path');
var webpack = require('webpack');

BUILD_DIR = path.resolve(__dirname,'dist');
DEV_DIR = path.resolve(__dirname,'src');

var config = {
    entry:DEV_DIR + '/app.js',
    output:{
        path:BUILD_DIR,
        filename:'bundle.min.js',
    },
    module:{
        loaders:[
            {
                test:/\.jsx?/,
                include:DEV_DIR,
                loader:'babel-loader',
                exclude:/node_modules/,
            }
        ]
    },
};
module.exports = config;

Add a .babelrc file in your root directory:-

{
"presets": ["react","es2015","stage-1"]
}

after that In your root directory run command:-webpack that will create a dist folder which will contain your bundle.min.js.

Edits in your index.html :-

<script src = "dist/bundle.min.js"></script>

package.json

"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.4.1",
},

I know this is quite a big but in my opinion you will have to go through this process while developing in react,so better to go through this in the beginning.

Collectives™ on Stack Overflow

Create-react-app - how does index.html read React application code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related