Single-page apps are websites that have pages that load inline within the same page. Read on to find how you can create a single page application using React.<\/p>\n\n\n\n
A single page application (SPA) is essentially a webpage that interacts with the web browser dynamically by rewriting the current web page with the data obtained from the webserver. Hence, in a single page application, the webpage does not reload the page during its runtime and instead works within a browser. <\/p>\n\n\n\n
Reloading<\/strong>: Single-page applications work inside a browser and do not require page reloading during webpage executing. <\/p>\n\n\n\n UI\/UX<\/strong>: Offers outstanding user experience by imitating a natural environment with the browser by eliminating wait time and page reloads. It consists of a single web page that loads all content using JavaScript. It requests the markup and data independently and renders pages straight to the browser. <\/p>\n\n\n\n Examples<\/strong>: Gmail, Google Maps, Facebook, GitHub.<\/p>\n\n\n\n Reloading<\/strong>: Multi-page applications work in the traditional way where every change, like displaying the data or submitting data back to the server, renders new pages from the server.<\/p>\n\n\n\n UI\/UX<\/strong>: Multi-page applications are larger applications with huge chunks of content, so the user experience is limited compared to single-page applications. <\/p>\n\n\n\n Examples<\/strong>: eBay and Amazon <\/p>\n\n\n\n The benefits of choosing single-page applications (SPA) are:<\/p>\n\n\n\n While SPA does have its advantages, there are certain cases when it is not suitable to use it:<\/p>\n\n\n\n To build a single page app using React, follow the steps mentioned below:<\/p>\n\n\n\n 1. Create a react app in your desired location using the following command:<\/p>\n\n\n\n A directory called app-name<\/em> is created with the following default files:<\/p>\n\n\n\n app-name<\/p>\n\n\n\n \u251c\u2500\u2500 README.md<\/p>\n\n\n\n \u251c\u2500\u2500 node_modules<\/p>\n\n\n\n \u251c\u2500\u2500 package.json<\/p>\n\n\n\n \u251c\u2500\u2500 .gitignore<\/p>\n\n\n\n \u251c\u2500\u2500 public<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 favicon.ico<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 index.html<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 logo192.png<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 logo512.png<\/p>\n\n\n\n \u2502 \u251c\u2500\u2500 manifest.json<\/p>\n\n\n\n \u2502 \u2514\u2500\u2500 robots.txt<\/p>\n\n\n\n \u2514\u2500\u2500 src<\/p>\n\n\n\n \u251c\u2500\u2500 App.css<\/p>\n\n\n\n \u251c\u2500\u2500 App.js<\/p>\n\n\n\n \u251c\u2500\u2500 App.test.js<\/p>\n\n\n\n \u251c\u2500\u2500 index.css<\/p>\n\n\n\n \u251c\u2500\u2500 index.js<\/p>\n\n\n\n \u251c\u2500\u2500 logo.svg<\/p>\n\n\n\n \u2514\u2500\u2500 serviceWorker.js<\/p>\n\n\n\n 2. Install react-router-dom<\/em> for routing requests by executing the following command:<\/p>\n\n\n\n 3. Wrap the App<\/em> component.<\/p>\n\n\n\n There are two types of React routers, BrowserRouter<\/em> (makes URLs like example.com\/about) and HashRouter<\/em> (makes URLs like example.com\/#\/about). We re using BrowserRouter<\/em> in this example and use it to wrap the App<\/em> component.<\/p>\n\n\n\n Your src\/index.js<\/em> file should include the following code:<\/p>\n\n\n\n 4. Create a file named src\/pages\/HomePage.js<\/em> with the following code:<\/p>\n\n\n\n 5. Create a file named src\/pages\/UserPage.js<\/em> with the following code:<\/p>\n\n\n\n 6. Decide and incorporate the routers that you want to use using Switch<\/em> and Route<\/em>. Switch<\/em> groups all routes together and ensures that they take the precedence from top-to-bottom. Route,<\/em> on the other hand, defines individual routes.<\/p>\n\n\n\n Your App.js <\/em>file should include the decided routes.<\/p>\n\n\n\n \/\/ We will create these two pages in a moment<\/p>\n\n\n\n The above code matches the root route (\/) to HomePage<\/em> and matches other pages dynamically to UserPage<\/em>. <\/p>\n\n\n\n 7. Link to a page within the SPA using Link. <\/p>\n\n\n\n In the src\/pages\/HomePage.js<\/em> file, include the following code:<\/p>\n\n\n\nMulti-page App<\/h3>\n\n\n\n
Why choose a single-page app?<\/strong><\/h2>\n\n\n\n
When not to use single-page app?<\/strong><\/h2>\n\n\n\n
How to build a single-page app using React?<\/strong><\/h2>\n\n\n\n
npx create-react-app app-name<\/em><\/pre>\n\n\n\n
npm install react-router-dom <\/em><\/pre>\n\n\n\n
import React from \u2018react\u2019\nimport { render } from \u2018react-dom\u2019 \nimport { BrowserRouter } from \u2018react-router-dom\u2019 \nimport App from \u2018.\/App\u2019 \nrender( \n \u00a0\u00a0<BrowserRouter> \n \u00a0\u00a0\u00a0\u00a0<App \/> \n \u00a0\u00a0<\/BrowserRouter>, \n \u00a0\u00a0document.querySelector(\u2018#root\u2019) \n) <\/pre>\n\n\n\nimport React from \u201creact\u201d;\nexport default function HomePage() { \n return ( \n <> \n <h1>Hey from HomePage<\/h1> \n <p>This is your awesome HomePage subtitle<\/p> \n <\/> \n ); \n}<\/pre>\n\n\n\nimport React from \u201creact\u201d;\nimport { useParams } from \u201creact-router-dom\u201d; \nexport default function UserPage() { \n let { id } = useParams(); \n return ( \n <> \n <h1>Hello there user {id}<\/h1> \n <p>This is your awesome User Profile page<\/p> \n <\/> \n ); \n}<\/pre>\n\n\n\nimport React from \u2018react\u2019 \nimport { Route, Switch } from \u2018react-router-dom\u2019 <\/pre>\n\n\n\nimport HomePage from \u2018.\/pages\/HomePage\u2019\nimport UserPage from \u2018.\/pages\/UserPage\u2019 \nexport default function App() { \n \u00a0\u00a0return ( \n \u00a0\u00a0\u00a0\u00a0<Switch> \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Route exact path=\u201d\/\u201d component={HomePage} \/> \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Route path=\u201d\/:id\u201d component={UserPage} \/> \n \u00a0\u00a0\u00a0\u00a0<\/Switch> \n \u00a0\u00a0) \n}<\/pre>\n\n\n\nimport React from \u2018react\u2019\nimport { Link } from \u2018react-router-dom\u2019\nexport default function HomePage() { \n \u00a0\u00a0return ( \n \u00a0\u00a0\u00a0\u00a0<div className=\u201dcontainer\u201d> \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Home <\/h1> \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p> \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Link to=\u201d\/your desired link\u201d>Your desired link.<\/Link> \n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p> \n \u00a0\u00a0\u00a0\u00a0<\/div> \n \u00a0\u00a0) \n}<\/pre>\n\n\n\n