如何用Visual Studio 2017（非VS Code）创建可F5运行的自定义React应用

Got it, let's walk through setting up a clean React app in Visual Studio that you can run directly with F5—no messy official C#/TypeScript template required. Here's how to build a solid foundation for your fat client (API-only) app:

First, we'll start with a completely empty project to avoid any unwanted template bloat:

• Open Visual Studio and select "Create a new project"
• Search for and choose Empty Project (make sure it's not the C# web template)
• Name your project, pick a save location, and click "Create"

Next, we'll use the standard React CLI to set up a clean, JS-based React app (no TypeScript forced here):

• Go to View > Terminal to open Visual Studio's integrated terminal
• Run this command to initialize the React app in your project directory:

  npx create-react-app .
  

  The dot (.) tells the CLI to use the current folder instead of creating a new subfolder. This gives you a minimal, front-end-only React setup with just the essential dependencies.

Now we need to set up F5 to trigger the React development server:

1. First, make sure you have the Node.js Development workload installed in Visual Studio (go to Tools > Get Tools and Features to check/install if needed)
2. Right-click your project in the Solution Explorer > Properties
3. Go to the Debug tab:
   • Under "Start Action", select Start external program
   • Paste the path to your Node.js executable (e.g., C:\Program Files\nodejs\node.exe — you can find this by running where node in the terminal)
   • In "Command line arguments", enter:

     npm start
     

4. Click "Apply" then "OK"

Alternatively, if you've installed the Node.js workload, you can right-click your project > Add > New Item > select Node.js JavaScript File (this tells Visual Studio it's a Node.js project), then go back to Debug settings and select Start project with the command set to npm start — either way works.

Now let's strip out the default demo content and set up a structure tailored to your fat client needs:

• Delete the default logo.svg, App.test.js, and setupTests.js from the src folder (you won't need these for an API-focused app)
• Rewrite src/App.js to be a minimal starting point, e.g.:

  import './App.css';
  import ApiService from './services/api';
  
  function App() {
    const fetchData = async () => {
      const data = await ApiService.getSomeData();
      console.log(data);
    };
  
    return (
      <div className="App">
        <h1>My Fat Client App</h1>
        <button onClick={fetchData}>Fetch API Data</button>
      </div>
    );
  }
  
  export default App;
  

• Create a src/services folder to house your API call logic (keeps your UI components clean):
  • Add api.js to this folder, using fetch or axios (install axios with npm install axios if you prefer it):

    // Example using fetch
    const BASE_URL = 'https://your-api-endpoint.com';
    
    const ApiService = {
      getSomeData: async () => {
        const response = await fetch(`${BASE_URL}/data`);
        if (!response.ok) throw new Error('Failed to fetch data');
        return response.json();
      }
    };
    
    export default ApiService;
    

• Add additional folders like src/components (for reusable UI components), src/utils (for helper functions), and src/hooks (for custom React hooks) as your app grows.

Hit the F5 key in Visual Studio — it should launch the Node.js process, run npm start, and open your default browser to the React development server (usually at http://localhost:3000). You can now start building out your fat client, making API calls without any unwanted server-side code or dependencies.

内容的提问来源于stack exchange，提问作者A.J