How to Create and Add Static Pages to Your React App

React is a powerful JavaScript library commonly used for building dynamic single-page applications (SPAs). While React is dynamic by nature, many applications still require static pages for content such as “About Us,” “Contact,” and “Privacy Policy.” Understanding how to create and add static pages to a React app can improve navigation and user experience.

Setting Up the React App

Before adding static pages, it’s essential to have a working React application. Developers can create a new React project using Create React App:

npx create-react-app my-app
cd my-app

Once inside the project directory, start the React development server:

npm start

With the application running, the next step is to add static pages.

Creating Static Pages

Static pages in React are typically implemented as separate components. This ensures they can be easily imported and rendered by the main application.

To create a static page, follow these steps:

1. Inside the src folder, create a new folder named pages.
2. Inside the pages folder, create a new file for the static page, such as About.js.
3. Add the following React component to About.js:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is a static About page for the React application.</p>
    </div>
  );
};

export default About;

This function defines a simple static page with a heading and a paragraph.

Adding React Router for Navigation

To access static pages through navigation, it is recommended to use React Router. First, install React Router by running:

npm install react-router-dom

After installation, update App.js to include routing functionality:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Now, navigating to /about in the browser will display the About page.

Adding More Static Pages

Developers can create more static pages by following the same steps as above.

Example: A “Contact” page located at src/pages/Contact.js:

import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>This is a static Contact page.</p>
    </div>
  );
};

export default Contact;

Then, update App.js to include the new page:

import Contact from './pages/Contact';

<Route path="/contact" element={<Contact />} />

This allows users to visit /contact to access the Contact page.

Adding a Navigation Menu

For ease of navigation, a basic navigation menu can be added to the app:

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

This component should be added inside the main App.js to ensure it appears on every page.

Conclusion

Static pages are an essential part of many web applications, providing users with consistent information. React makes it easy to create static pages using functional components and manage them with React Router for better organization and navigation. By following these steps, developers can build efficient and structured static pages within their React applications.

Frequently Asked Questions (FAQ)

1. Can static pages in React still use dynamic data?

Yes. Even though the pages are considered static, they can include dynamic data through props, context, or API calls.

2. Do static pages affect React’s performance?

No, adding static pages does not negatively impact performance. Since they are simple components, they load quickly and efficiently.

3. How can I add SEO optimization to my static pages?

For SEO-friendly static pages, consider using libraries like react-helmet to update metadata such as page titles and descriptions.

4. Can I create a multi-page React website without React Router?

Yes, but managing navigation without React Router requires additional custom implementations or relying on server-side solutions.

5. How can I deploy a React app with static pages?

React apps, including static pages, can be deployed using hosting services like Vercel, Netlify, or GitHub Pages.