3. Create & Open Project

Open your Terminal or Command Prompt and run:

npx create-react-app businesspro-react

4. Start the Application

cd businesspro-react
npm start

Browser will open: http://localhost:3000

5. Structure & Routing

6. Install React Router

React uses a library to handle multiple pages without reloading.

npm install react-router-dom

7. Setup Routing (App.js)

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Manage from "./Manage";
import Data from "./Data";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/manage" element={<Manage />} />
        <Route path="/data" element={<Data />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

8. Home Component (Home.js)

Replaces index.html. Includes useEffect for lifecycle management.

import React, { useEffect } from "react";
import { Link } from "react-router-dom";

function Home() {
  useEffect(() => {
    alert("Welcome to BusinessPro Solutions!");
  }, []);

  return (
    <div>
      <header>
        <h1>BusinessPro Solutions</h1>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/manage">Add/Edit Service</Link>
          <Link to="/data">Service List</Link>
        </nav>
      </header>
      <section id="hero">
        <h2>Welcome to the Future</h2>
        <img src="/assets/giphy-1.gif" width="100%" />
      </section>
      <footer>© {new Date().getFullYear()} BusinessPro</footer>
    </div>
  );
}
export default Home;

9. Manage Component (Manage.js)

Replaces manage.html. Uses useState to control form inputs.

import React, { useState } from "react";
import { Link } from "react-router-dom";

function Manage() {
  const [name, setName] = useState("");
  const [desc, setDesc] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    if (name.trim() === "" || desc.trim() === "") {
      alert("Please fill all required fields");
      return;
    }
    alert("Service Saved Successfully!");
  }

  return (
    <div>
      <Link to="/">Back to Home</Link>
      <h2>Add/Edit Service</h2>
      <form onSubmit={handleSubmit}>
        <input value={name} onChange={(e) => setName(e.target.value)} />
        <textarea value={desc} onChange={(e) => setDesc(e.target.value)} />
        <button type="submit">Save</button>
      </form>
    </div>
  );
}
export default Manage;

10. Data Component (Data.js)

Replaces data.html. Displays the service catalog table.

function Data() {
  return (
    <div>
      <h2>Service Catalog</h2>
      <table border="1">
        <thead>
          <tr>
            <th>ID</th><th>Name</th><th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>001</td><td>Web Dev</td><td>Active</td></tr>
        </tbody>
      </table>
    </div>
  );
}
export default Data;

14. HTML → React: What Changed?

13. Output Summary

• Navigation: Works instantly without reload.
• Pages: Home, Manage, and Data are now modular.
• Logic: Fully handled by React's state engine.