Single Page Application vs Multi Page Application
Lets compare these two kinds of application;

Single Page Application
UI/UX: Single Page Applications (SPA) are a great way to create a fantastic user experience on mobile devices.

They consist of a single web page that loads all content using JavaScript. They request the markup and data independently and render pages straight to the browser.

Reloading: Single-page applications are web pages that only require a single HTML page to load.

They are generally used to perform actions that would take too long to load via traditional web pages, such as downloading files or rendering images.

A single-page application comprises HTML and JavaScript, usually including a server-side language (such as PHP) that processes data and returns the results.

Multiple Page Applications
UI/UX: Multi-page applications are helpful because they allow users to access more information in one place.

However, the user experience can be limited because the user must load multiple pages and navigate between them. This cannot be very clear to the user.

Reloading: The multi-page application (MPA) design pattern is a common approach to building web applications. It provides an easy way for users to navigate multiple pages without re-submit their data each time.

The example of MPA is our React Admin Dashboard Template

Advantages of SPAs
A single page application has several advantages over traditional web applications. Here are some of the most notable:

Simplicity: SPAs are easier to develop and maintain than traditional web applications. Developers only need to build a single HTML file for the SPA. No server-side changes are necessary.

Reusability: You can reuse the same JavaScript, CSS, and HTML code for multiple pages, and there are tools that allow developers to package these components into reusable modules.

Security: SPAs make it easier to secure web pages, because they can be protected by a firewall or require login credentials.

Creating Single Page Application With React
You have to follow the steps below for building a react single page application;

Use your desired location to create the react app with the command below;
npx create-react-app app-name
App-name directory to be built in the following default files:

app-name
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
Execute the following command to install react-router-dom:
npm install react-router-dom
Wrapping The App Component
React Router has 2 types of routers: BrowserRouter and HashRouter. We’re using BrowserRouter in this example because it makes the URL’s look like example.com/about rather than example.com/#/about. React Router uses a hash (hash) at the end of the URL to determine what page to load.

You must include the code below in your src.index.js:

import React from "react"
import { render } from "react-dom"
import { BrowserRouter } from "react-router-dom"
import App from "./App"
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector("#root")
)
The following code should be used to create a file named src/pages/HomePage.js:
import React from "react";
export default function HomePage() {
return (
<>
<h1>Hey from HomePage</h1>
<p>This is your awesome HomePage subtitle</p>
</>
);
}
The following code should be used to create a file named src/pages/UserPage.js.
import React from "react";
import { useParams } from "react-router-dom";
export default function UserPage() {
let { id } = useParams();
return (
<>
<h1>Hello there user {id}</h1>
<p>This is your awesome User Profile page</p>
</>
);
}
Route and switch group all routes together to make sure that they take precedence over each other.
The following routes should be there in your App.js file:

import React from "react"
import { Route, Switch } from "react-router-dom"
// We will create these two pages in a moment
import HomePage from "./pages/HomePage"
import UserPage from "./pages/UserPage"
export default function App() {
return (
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/:id" component={UserPage} />
</Switch>
)
}
You can link to a page inside the SPA.
import React from "react"
import { Link } from "react-router-dom"
export default function HomePage() {
return (
<div className="container">
<h1>Home </h1>
<p>
<Link to="/your desired link">Your desired link.</Link>
</p>
</div>
)
}

When not to use single-page applications?
While SPA does have its advantages, there are certain cases when it is not suitable to use it:

SEO: It is difficult and tricky to optimize SPA for SEO since its content is loaded by AJAX (Asynchronous JavaScript and XML). Hence SPAs are not suitable for cases where SEO is critical for business success.
Javascript: It requires users to enable Javascript for proper application and action loading. So it is not suitable for instances where JavaScript might be disabled on the user side.
Security: SPA is also less secure in comparison to MPA, making it unsuitable for highly sensitive applications. SPA has a cross-site scripting (XSS) and allows attackers to inject client-side scripts into the web application.
Slow: While the user experience of SPAs on runtime is fast, it is slower to download and can also be slowed down if there are memory leaks in JavaScript. It is hence not suitable for very large applications with a lot of data.

React 33-40

Please learn about @SpringBootApplication also

@SpringBootApplication
public class Application {

public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}

}

### 6. Add a main controller

java
package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MainController {

@GetMapping("/")
public String index() {
return "Hello, World!";
}

}

### 7. Run the application

mvn spring-boot:run
`

### 8. Visit http://localhost:8080

You should see `Hello, World!`

@SpringBootApplication
public class App {

public static void main(String[] args) {
SpringApplication.run(App.class, args);
}

}
</code>
I have created a controller to test the basic rest call :
<code>package com.santhosh.rest.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HomeController {

@GetMapping("/")
public String home() {
return "Welcome to the world of rest";
}

}
</code>
When I hit the url <code>localhost:8080/</code> I am getting below error :
<code>Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue Apr 09 11:45:37 IST 2019
There was an unexpected error (type=Not Found, status=404).
No message available
</code>
Please help me to resolve this issue.


A:


verify if your application is running on the port 8080
check your mapping annotation
check if your application is not running multiple instances

if you are using eclipse, you can check the log console for more details about the error

Now you are end to end FullStack dev after completing this many things 😂😂

On Sunday if you guys are available I will conduct one masterclass for end to end FullStack related to the concept not for programming will clear each n every concept with real-time implementation of that particular keyword

Please let me update with your names n batch I will share Google meet link and Google forms

Do work on this part