Search code examples
reactjsarchitectureprogram-entry-pointentry-point

React main entry point

I don't understand the structure of most boilerplates out there. I always see 2 files named "index" (one js file and an other html file). I want to understand how the main entry point works. I often see web pack for this job but my main concern is, why do am I using an index.html file when I can (I guess) do all my work in js file?

Solution

  • Well I structure my React apps like this:

    index.js - calls ReactDOM.render() on app.jsx, which is the root React component.

    bundle.js - This file is where index.js and all the JSX components are merged after being compiled into regular JavaScript using Webpack (hence bundle).

    index.html - bundle.js is imported into the body of this html file through script tag, this is the entry point.