CODEWITHSUNDEEP
reactjswebpackreact-routersingle-page-application
Treefish Zhang
Treefish Zhang

Reputation: 1161

How can I tell if a react application is a single page application?

I am not certain whether to call a certain app Single Page Application (SPA) or Multi Page Application (MPA). The app utilizes react, redux, and react-router which uses a <switch /> to route to a couple of <Route />s, with each wrapping a React component. The app looks and feels to some as traditional MPA as each page looks distinct, with one 'page' "next" to another. However, the fact of there being a single store, javascript controlling the urls, and there being a single entry point in webpack.config.js makes me think of it as an SPA. How is the line drawn between SPA and MPA?

Upvotes: 1

Views: 1875

Answers (2)

ashwintastic
ashwintastic

Reputation: 2312

If you use react you have to install its dependency first.

If you are using create-react-app YourReactProject command you will notice there is only one html generated at YourReactProject/public/index.html which has only one div with id = root and your index.js at YourReactProject/src/index.js uses this div as the parent node for the react by this line of code.

ReactDOM.render(<App />, document.getElementById('root'));

So whenever you click some url the root div will remain in the page but the new page content will become root node's children. So technically you have only one div id=root but its children gets replaced. Hope you got the answer.

Upvotes: 4

Rudithus
Rudithus

Reputation: 303

Spa is not really about how it feels, but more about how it works.

Usually, if the routing is handled by the front end, it's an spa.

Of course this is over simplifying but for modern applications it's usually true.

Upvotes: 2

Related Questions