When working with ReactJS, we often build Single Page Applications. Now, What is a Single Page Application? 

With React we can literally control the entire front end of web applications easily. This means we use React for everything we see on the screen even for switching pages.

So when we click on a link and reload it on the page, React doesn’t request for a new HTML page to the server instead React uses JavaScript to control what is being visible on the viewport (screen).

Hence we can do everything on a single page without doing the work on separate HTML pages.

Create a Single Page React Application Step By Step

Step1:

First, we have to go to the folder, where we want to create our React application. After getting to the folder, click the left mouse button in the file path (which can be found at top of the screen).

After clicking on the file path, it should look like this,

Then type cmd here and hit enter.

After hitting enter, the command prompt will open.

Step2:

Type npx create-react-app hello-react and hit enter.

It will start creating the React application and download the dependencies that are needed to build the application.

It might take a few minutes to complete downloading and creating the application.

After creating the React App, type cd hello-react and hit enter to go to the folder.

Now we are in hello-react folder.

Type code . and hit the enter button to open this newly created folder to Visual Studio Code Editor or you can just open this folder from the Visual Studio Code in the very first place.

After that type npm start in the command prompt and hit enter to start and run the web application. Make sure you are in the right directory before doing it.

After some time, the web application will automatically start in your default web browser.

Step3:

Now we are in Visual Studio Code. From the folder structure of Visual Studio Code, open the App.js file. You can find App.js in src > App.js .

And it should look like this.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

As we can see, this looks like just basic HTML syntax with a little bit of JavaScript coating. There are some tags that we are familiar with if we already know HTML tags such as <div> , <img> , <p>, <header> and <a> tag. From here, we have to remove the whole <header> tag with its child tags (<img>, <p>, <a>). We can look at the below code syntax to get a better idea about what should we remove.

// This is the header tag with its childs. We should remove this to continue work with our React project

<header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
</header>

Now, all there is left just a <div>...</div> tag. Which is a block element as we already know by now.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
     // we will continue our process to manage the react project here. Here we can create all the other tags of HTML and work with       them
    </div>
  );
}

export default App;

Now the application is ready to be used. If we make any changes here, it should be visible to the opened tab in the browser. We can add and work with any HTML code inside of the <div>...</div> tag. Even though these syntaxes may look like markup language (HTML), it actually is not. It is JSX (JavaScript XML).

To know more about JSX, Click Here.