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