React main entry point

reactjs architecture main entry-point
popo63301 picture popo63301 · May 28, 2017 · Viewed 15.2k times · Source

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?

Answer

NKJo28 picture NKJo28 · May 28, 2017

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.

Related questions

React / Redux and Multilingual (Internationalization) Apps - Architecture

I'm building an app that will need to be available in multiple languages and locales. My question is not purely technical, but rather about the architecture, and the patterns that people are actually using in production to solve this problem. …

Read More
In Flux architecture, how do you manage Store lifecycle?

I'm reading about Flux but the example Todo app is too simplistic for me to understand some key points. Imagine a single-page app like Facebook that has user profile pages. On each user profile page, we want to show some …

Read More
Nested redux reducers

Is it possible to combine reducers that are nested with the following structure: import 'user' from ... import 'organisation' from ... import 'auth' from ... // ... export default combineReducers({ auth: { combineReducers({ user, organisation, }), auth, }, posts, pages, widgets, // .. more state here }); Where the state has …

Read More