Setting Up a Basic React Application with Routing

Introduction

we will walk through setting up a basic React application with routing using react-router-dom. We'll cover creating a simple folder structure, defining routes, and integrating them into the main application component.

Folder Structure

We'll start by organizing our files in a logical structure.

Routing/Main.js
App.js
index.js

Setting up Routes in Routing/Main.js

First, we'll define the routes for our application.

import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import Contactus from "../pages/Contactus";
function Main() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Contactus" element={<Contactus />} />
        </Routes>
    );
}
export default Main;

Explanation

Imports:
- React is imported to create components.
- Routes and Route from react-router-dom are used to define routes.
- Home and Contactus components are imported from the pages directory.
Main Component:
- The Main component defines the routes for the application.
- It includes two routes
  - / which render the Home component.
  - /Contactus which renders the Contactus component.

Creating the Main Application Component in App.js

Next, we'll set up the main application component, including the header, footer, and routing components.

import React from 'react';
import Header from './pages/Header';
import Footer from './pages/Footer';
import Main from './Routing/Main';
import { BrowserRouter } from 'react-router-dom';
import './App.css';
function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Header />
                <Main />
                <Footer />
            </BrowserRouter>
        </div>
    );
}
export default App;

Explanation

Imports:
- React for creating components.
- Header, Footer, and Main components.
- BrowserRouter from react-router-dom provides routing context to the app.
- ./App.css for styling.
App Component:
- This is the root component of the application.
- It wraps the entire application in BrowserRouter to enable routing.
- It includes Header, Main, and Footer components inside a div with the class name App.

Entry Point in index.js

Finally, we'll set up the entry point of the React application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

Explanation

Imports
- React for creating components.
- ReactDOM for rendering the React component tree to the DOM.
- ./index.css for global styles.
- App component which is the root of the application.
- reportWebVitals for measuring performance metrics.
Root Element
- ReactDOM.createRoot(document.getElementById('root')) initializes the React root.
- root. render renders the App component wrapped in React.StrictMode to the DOM element with the id root.
Performance Measurement
- reportWebVitals can be used to measure and log performance metrics of the application.

Summary

In this article, we've set up a basic React application with routing. We organized our files, defined routes in Main.js, created the main application component in App.js, and set up the entry point in index.js. This structure provides a clean and scalable foundation for building a React application with routing capabilities.