如何修改App.js以在React项目中显示HTML后台模板？

Let’s break down exactly what’s happening here: when your app first loads, the browser renders the static HTML from public/index.html (that’s the login page you see briefly). But once React finishes initializing, it replaces everything inside the root DOM element (usually a <div id="root">) with whatever your App.js component is rendering. Since your App.js is still using the default React starter content, that’s why you end up seeing the "Welcome to React" page instead of your template.

Here’s how to fix this, step by step:

1. Update src/App.js to render your template content #

Instead of the default JSX, you need to either convert your login page HTML to React-compatible JSX, or adjust App.js so it doesn’t overwrite your template temporarily.

Option A: Quick test to stop overwriting #

If you just want to confirm this is the issue, modify App.js to render nothing. This will leave your static HTML from index.html intact:

function App() {
  return null; // React renders nothing into the root div
}

export default App;

Option B: Proper integration (long-term fix) #

Convert your login page HTML to JSX (remember to change class attributes to className, self-close tags like <img>, and fix any other HTML-to-JSX differences). For example:

function App() {
  return (
    <div className="login-container">
      <h2>Admin Login</h2>
      <form className="login-form">
        <input type="email" className="form-input" placeholder="Your Email" />
        <input type="password" className="form-input" placeholder="Your Password" />
        <button type="submit" className="submit-btn">Sign In</button>
      </form>
    </div>
  );
}

export default App;

2. Adjust public/index.html to avoid conflicts #

The most common mistake here is putting your template HTML inside the <div id="root"> element. React will erase everything inside this div when it mounts.

Fix: #

• If you’re using Option B above, clear the content inside #root so React has a clean space to render your App component:

<body>
  <div id="root"></div> <!-- Leave this empty -->
</body>

• If you want to keep parts of your static template and only let React replace a section, add a new div (e.g., <div id="react-content"></div>) where you want React to render, then update index.js to target this new div instead of #root.

3. Verify src/index.js is targeting the right element #

Double-check that your index.js is pointing to the correct DOM element. The default setup looks like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

If you added a new div in index.html (like react-content), update the getElementById argument to match that ID.

Final Notes #

Once you’ve made these changes, React will render your login page (from App.js) instead of the default welcome message, and you won’t see that flash of static HTML followed by the default page. As you build out your admin dashboard, you can continue converting more of your template to JSX components.

内容的提问来源于stack exchange，提问作者Akshay Shrivastav