如何在Eclipse中运行React JS代码？配置及运行问题求助

Hey there! Let’s start by clearing up a key misunderstanding first: React is a pure front-end JavaScript library, so adding a react-1.4.jar file won’t help at all—you can safely remove that from your project. JAR files are for Java applications, not React.

Below are two reliable ways to set up and run React JS code in Eclipse, depending on your needs:

This is the easiest approach, as plugins add proper React/JSX syntax support, debugging tools, and integration with modern build tools.

• Step 1: Install a front-end plugin

  • Open Eclipse, go to Help > Eclipse Marketplace
  • Search for either Wild Web Developer (official Eclipse plugin for front-end dev) or CodeMix (popular third-party plugin with robust React support)
  • Click "Install" and follow the prompts to restart Eclipse once installation finishes

• Step 2: Create/Import a React Project

  • First, make sure you have Node.js and npm installed (check via terminal commands node -v and npm -v—if not, install them first)
  • To create a new React project, open your system terminal (not Eclipse’s yet) and run:

    npx create-react-app my-react-app
    

  • Back in Eclipse, go to File > Import > General > Existing Projects into Workspace
  • Navigate to the my-react-app folder you just created, select it, and finish the import

• Step 3: Run the React App

  • Open Eclipse’s terminal: Window > Show View > Terminal
  • In the terminal, navigate to your project root folder (use cd my-react-app if needed)
  • Run the command:

    npm start
    

  • Wait for the build to complete—your default browser will automatically open http://localhost:3000 with your React app running!

If you just want to test basic React code without build tools, you can use CDN links to load React directly in an HTML file:

• Step 1: Prepare the Project Structure

  • In Eclipse, create a new general project: File > New > Project > General > Project (name it something like SimpleReactDemo)
  • Right-click the project, create two folders: public and src
  • Inside public, create index.html with this content:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Simple React Demo</title>
    </head>
    <body>
        <div id="root"></div>
        <!-- Load React and ReactDOM via CDN -->
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <!-- Load Babel to transpile JSX -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <!-- Your React component -->
        <script type="text/babel" src="../src/App.js"></script>
    </body>
    </html>
    

  • Inside src, create App.js with a basic React component:

    function App() {
        return (
            <div>
                <h1>Hello React in Eclipse!</h1>
            </div>
        );
    }
    
    // Render the component to the DOM
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
    

• Step 2: Run the Demo

  • Right-click public/index.html in Eclipse, select Open With > Web Browser
  • Your browser will load the HTML file, and you’ll see your React component rendered!

Quick Notes #

• For production or complex projects, always use Method 1 with create-react-app (or Vite) — it handles bundling, transpilation, and dev server setup automatically.
• If Eclipse’s terminal can’t find npm, check that Node.js is added to your system’s environment variables, and restart Eclipse.

内容的提问来源于stack exchange，提问作者usha e b