In the tutorial’s last part, we discussed about ReactJs and how to run a simple react app on a web browser. In this part, we will dig more into some interesting stuff, such as creating a home, about us, and contact pages.

Click here for the first part – Create a Simple ReactJs Application – Part 1

Hello World!!

If you have only one page to view in the application, then that’s not a big task, simply changing the App.js does wonders.

We will print a simple “Hello World!!” on our application.

Navigate to src/App.js in your project directory. Open the file with your favorite editor. You will find a code like this which is shown below;

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; 

Now, delete the unwanted lines from the code and add the necessary part.

import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
	<h1>Hello World!!</h1>
</div>
);
}
}
export default App;

Save this file in your directory, and run the command npm start

If you have to view two or more webpages, we will be using React Router to navigating to the various components.

We will use React Router to navigate various components in the react application. It allows changing the browser URLs and keeping in sync with the URL. We will create three components: a home component, an about us component, and a contact component, i.e., each component for each page.

Installing React Router

Navigate to your project location, run the following command to install the React Router. It is installed via the npm.

npm install react-router-dom

After the successful installation of the react-router-dom package, you have to create four different files in your components folder in the src folder. Follow the folder structure as below,

|src
  |--components
     |--index.js
     |--home.js
     |--contactus.js
     |--aboutus.js
 

Copy the following code in your respective files:

• home.js

import React from 'react';
const Home = () => {
    return (
        <div>
            <h1>Welcome to IoTEDU</h1>
            <p>Home Page</p>
        </div>
    );
};
export default Home;

• contactus.js

import React from 'react';

function Contact() {
    return <address>
        You can write to:<br />
        info@iot4beginners.com<br />
    </address>
}

export default Contact;

• aboutus.js

import React from 'react';
const Aboutus = () => {
    return (
        <div>
            <h1>About us</h1>
            <p>We are committed to writing blogs and tutorials on IoT, from basic to advanced topics to make the learners understand easily. IoTEDU is considered a one-stop for blogs, tutorials, projects, the latest software, and hardware update for the learners to motivate them to learn more and more to enrich their knowledge. Started in 2019, we proudly say that we achieved a place in the IoT learners community.</p>
        </div>
    );
};
export default Aboutus;

• index.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './home';
import Aboutus from './aboutus';
import Contactus from './contactus';


class App extends Component {
    render() {
        return (
            <Router>
                <div className="App">
                    <ul className="App-header">
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/aboutus">About Us</Link>
                        </li>
                        <li>
                            <Link to="/contactus">Contact Us</Link>
                        </li>
                    </ul>
                    <Routes>
                        <Route exact path='/' element={< Home />}></Route>
                        <Route exact path='/aboutus' element={< Aboutus/>}></Route>
                        <Route exact path='/contactus' element={< Contactus />}></Route>
                    </Routes>
                </div>
            </Router>
        );
    }
}

export default App;

After creating these files, modify the App.js file

import Webpages from './components';
function App() {
return (

);
}
export default App;

Run your Application

npm start

You can view your routed links and pages in your application on the browser (localhost).

Home page

About Us Page

Contact Page

You can also add some CSS and add in the app.css file. Finally, you can also build the project and host it on any server. We will discuss about the hosting in the next part of our tutorial, Happy learning!