Tutoriel : Créer une application Node.js et React dans Visual StudioTutorial: Create a Node.js and React app in Visual Studio

Visual Studio vous permet de créer facilement un projet Node.js et de tirer parti d’IntelliSense et d’autres fonctionnalités intégrées prenant en charge Node.js.Visual Studio allows you to easily create a Node.js project and leverage IntelliSense and other built-in features that support Node.js. Dans ce tutoriel pour Visual Studio, vous créez un projet d’application web Node.js à partir d’un modèle Visual Studio.In this tutorial for Visual Studio, you create a Node.js web application project from a Visual Studio template. Vous créez ensuite une application simple avec React.Then, you create a simple app using React.

Dans ce didacticiel, vous apprendrez à :In this tutorial, you learn how to:

  • Créer un projet Node.jsCreate a Node.js project
  • Ajouter des packages npmAdd npm packages
  • Ajouter du code React à votre applicationAdd React code to your app
  • Transpiler du code JSXTranspile JSX
  • Attacher le débogueurAttach the debugger

PrérequisPrerequisites

  • Au préalable, vous devez avoir installé Visual Studio et la charge de travail de développement Node.js.You must have Visual Studio installed and the Node.js development workload.

    Si vous n’avez pas encore installé Visual Studio, installez-le gratuitement ici.If you haven't already installed Visual Studio, install it for free here.

    Si vous devez installer la charge de travail mais que vous avez déjà Visual Studio, cliquez sur le lien Ouvrir Visual Studio Installer dans le volet gauche de la boîte de dialogue Nouveau projet.If you need to install the workload but already have Visual Studio, click the Open Visual Studio Installer link in the left pane of the New Project dialog box. Visual Studio Installer est lancé.The Visual Studio Installer launches. Choisissez la charge de travail Développement Node.js, puis choisissez Modifier.Choose the Node.js development workload, then choose Modify.

  • Le runtime Node.js doit être installé.You must have the Node.js runtime installed.

    Si vous ne l’avez pas déjà fait, installez la version LTS à partir du site web Node.js.If you don't have it installed, install the LTS version from the Node.js website. En règle générale, Visual Studio détecte automatiquement le runtime Node.js installé.In general, Visual Studio automatically detects the installed Node.js runtime. S’il ne détecte aucun runtime installé, vous pouvez configurer votre projet pour référencer le runtime installé dans la page de propriétés (après avoir créé un projet, cliquez avec le bouton droit sur le nœud de projet, puis choisissez Propriétés).If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node and choose Properties).

    Ce tutoriel a été testé avec la version 8.9.4.This tutorial was tested with version 8.9.4.

Créer un projetCreate a project

Commencez par créer un projet d’application web Node.js.First, create a Node.js web application project.

  1. Ouvrez Visual Studio 2017.Open Visual Studio 2017.

  2. Dans la barre de menus supérieure, choisissez Fichier > Nouveau > Projet....From the top menu bar, choose File > New > Project....

  3. Dans la boîte de dialogue Nouveau projet, dans le volet gauche, développez JavaScript, puis choisissez Node.js.In the New Project dialog box, in the left pane, expand JavaScript, and then choose Node.js. Dans le volet central, choisissez Application web Node.js vide, tapez le nom NodejsWebAppBlank, puis choisissez OK.In the middle pane, choose Blank Node.js Web Application, type the name NodejsWebAppBlank, and then choose OK.

    Si vous ne voyez pas le modèle de projet Application web Node.js vide, vous devez d’abord installer la charge de travail Développement Node.js.If you don't see the Blank Node.js Web Application project template, you must first install the Node.js development workload.

    Visual Studio crée la solution et ouvre votre projet.Visual Studio creates the new solution and opens your project.

    Projet Node.js dans l’Explorateur de solutions

    • Votre projet mis en gras, avec le nom que vous avez donné dans la boîte de dialogue Nouveau projet.Highlighted in bold is your project, using the name you gave in the New Project dialog box. Dans le système de fichiers, ce projet est représenté par un fichier .njsproj au sein de votre dossier de projet.In the file system, this project is represented by a .njsproj file in your project folder. Vous pouvez définir les propriétés et les variables d’environnement associées au projet en cliquant avec le bouton droit sur le projet et en choisissant Propriétés.You can set properties and environment variables associated with the project by right-clicking the project and choosing Properties. Vous pouvez effectuer des allers-retours avec d’autres outils de développement, car le fichier projet n’apporte pas de changements personnalisés à la source de projet Node.js.You can do round-tripping with other development tools, since the project file does not make custom changes to the Node.js project source.

    • Au niveau le plus élevé figure une solution, qui a par défaut le même nom que votre projet.At the top level is a solution, which by default has the same name as your project. Une solution, représentée par un fichier .sln sur le disque, est un conteneur pour un ou plusieurs projets connexes.A solution, represented by a .sln file on disk, is a container for one or more related projects.

    • Le nœud npm montre tous les packages npm installés.The npm node shows any installed npm packages. Vous pouvez cliquer avec le bouton droit sur le nœud npm pour rechercher et installer des packages npm à l’aide d’une boîte de dialogue.You can right-click the npm node to search for and install npm packages using a dialog box.

    • Les fichiers projet tels que server.js s’affichent sous le nœud de projet.Project files such as server.js show up under the project node. server.js est le fichier de démarrage du projet.server.js is the project startup file.

Ajouter des packages npmAdd npm packages

Cette application nécessite un certain nombre de modules npm pour s’exécuter correctement.This app requires a number of npm modules to run correctly.

  • reactreact
  • react-domreact-dom
  • expressexpress
  • pathpath
  • ts-loaderts-loader
  • typescripttypescript
  • webpackwebpack
  • webpack-cliwebpack-cli
  1. Dans l’Explorateur de solutions (volet droit), cliquez avec le bouton droit sur le nœud npm du projet, puis choisissez Installer de nouveaux packages npm.In Solution Explorer (right pane), right-click the npm node in the project and choose Install New npm Packages.

    Dans la boîte de dialogue Installer de nouveaux packages npm, vous pouvez choisir d’installer la version de package la plus récente ou une version spécifique.In the Install New npm Packages dialog box, you can choose to install the most current package version or specify a version. Si vous choisissez d’installer la version actuelle de ces packages, mais que vous rencontrez plus tard des erreurs inattendues, vous devrez peut-être installer les mêmes versions de package que celles décrites plus loin au cours de ces étapes.If you choose to install the current version of these packages, but run into unexpected errors later, you may need to install the exact package versions described later in these steps.

  2. Dans la boîte de dialogue Installer de nouveaux packages npm, recherchez le package react, puis cliquez sur Installer le package pour installer ce dernier.In the Install New npm Packages dialog box, search for the react package, and click Install Package to install it.

    Installer des packages npm

    La fenêtre Sortie indique la progression de l’installation du package.The Output window shows progress on installing the package. Une fois installé, le package apparaît sous le nœud npm.When installed, the package appears under the npm node.

    Le fichier package.json du projet est mis à jour à l’aide des informations relatives au nouveau package, notamment sa version.The project's package.json file is updated with the new package information including the package version.

  3. Au lieu d’utiliser l’IU pour rechercher et ajouter les packages restants, un par un, collez le code suivant dans le fichier package.json.Instead of using the UI to search for and add the rest of the packages one at a time, paste the following code into package.json. Remplacez la section dependencies par ce code :Replace the dependencies section with this code:

    "dependencies": {
      "express": "4.16.2",
      "path": "0.12.7",
      "react": "16.2.0",
      "react-dom": "16.2.0",
      "ts-loader": "4.0.1",
      "typescript": "2.7.2",
      "webpack": "4.1.1",
      "webpack-cli": "2.0.11"
    }
    
  4. Cliquez avec le bouton droit sur le nœud npm de votre projet, puis choisissez Installer les packages npm manquants.Right-click npm node in your project and choose Install Missing npm Packages.

    La fenêtre Sortie indique la progression de l’installation des packages.The Output window shows the progress on installing the packages.

    Voici les modules npm tels qu’ils apparaissent dans l’Explorateur de solutions après leur installation.Here are the npm modules as they appear in Solution Explorer after they are installed.

    packages npm

    Note

    Si vous préférez installer les packages npm à l’aide de la ligne de commande, cliquez avec le bouton droit sur le nœud de projet, puis choisissez Ouvrir l’invite de commandes ici.If you prefer to install npm packages using the command line, right-click the project node and choose Open Command Prompt Here. Utilisez les commandes Node.js standard pour installer les packages.Use standard Node.js commands to install packages.

Ajouter des fichiers projetAdd project files

Au cours de ces étapes, vous devez ajouter quatre nouveaux fichiers à votre projet.In these steps, you add four new files to your project.

  • app.tsxapp.tsx
  • webpack-config.jswebpack-config.js
  • index.htmlindex.html
  • tsconfig.jsontsconfig.json

Pour cette application simple, vous ajoutez les nouveaux fichiers projet à la racine du projet.For this simple app, you add the new project files in the project root. (Dans la plupart des applications, vous ajoutez généralement les fichiers aux sous-dossiers, et vous changez ensuite les références de chemin relatives correspondantes.)(In most apps, you typically add the files to subfolders and adjust relative path references accordingly.)

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet NodejsWebAppBlank, puis choisissez Ajouter > Nouvel élément.In Solution Explorer, right-click the project NodejsWebAppBlank and choose Add > New Item.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, choisissez Fichier TypeScript JSX, tapez le nom app.tsx, puis cliquez sur OK.In the Add New Item dialog box, choose TypeScript JSX file, type the name app.tsx, and click OK.

  3. Répétez ces étapes pour ajouter webpack-config.js.Repeat these steps to add webpack-config.js.

  4. Répétez les mêmes étapes pour ajouter index.html au projet.Repeat the same steps to add index.html to the project. Au lieu d’un fichier JavaScript, choisissez Fichier HTML.Instead of a JavaScript file, choose HTML file.

  5. Répétez les mêmes étapes pour ajouter tsconfig.json au projet.Repeat the same steps to add tsconfig.json to the project. Au lieu d’un fichier JavaScript, choisissez Fichier config JSON TypeScript.Instead of a JavaScript file, choose TypeScript JSON Configuration file.

Ajouter du code d’applicationAdd app code

  1. Ouvrez server.js et remplacez le code par le code suivant :Open server.js and replace the code with the following code:

    'use strict';
    var path = require('path');
    var express = require('express');
    
    var app = express();
    
    var staticPath = path.join(__dirname, '/');
    app.use(express.static(staticPath));
    
    // Allows you to set port in the project properties.
    app.set('port', process.env.PORT || 3000);
    
    var server = app.listen(app.get('port'), function() {
        console.log('listening');
    });
    

    Le code précédent utilise Express pour démarrer Node.js en tant que serveur d’applications web.The preceding code uses Express to start Node.js as your web application server. Ce code permet d’affecter au port le numéro de port configuré dans les propriétés du projet (par défaut, le port 1337 est configuré dans les propriétés).This code sets the port to the port number configured in the project properties (by default, the port is configured to 1337 in the properties). Pour ouvrir les propriétés du projet, cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions, puis choisissez Propriétés.To open the project properties, right-click the project in Solution Explorer and choose Properties.

  2. Ouvrez app.tsx, puis ajoutez le code suivant :Open app.tsx and add the following code:

    declare var require: any
    
    var React = require('react');
    var ReactDOM = require('react-dom');
    
    class Hello extends React.Component {
        render() {
            return (
                <h1>Welcome to React!!</h1>
            );
        }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'));
    

    Le code précédent utilise la syntaxe JSX et React pour afficher un message simple.The preceding code uses JSX syntax and React to display a simple message.

  3. Ouvrez index.html et remplacez la section body par le code suivant :Open index.html and replace the body section with the following code:

    <body>
        <div id="root"></div>
        <!-- scripts -->
        <script src="./dist/app-bundle.js"></script>
    </body>
    

    Cette page HTML charge app-bundle.js, qui contient le code JSX et React transpilé en JavaScript brut.This HTML page loads app-bundle.js, which contains the JSX and React code transpiled to plain JavaScript. Pour le moment, app-bundle.js est un fichier vide.Currently, app-bundle.js is an empty file. Dans la section suivante, vous allez configurer les options de transpilation du code.In the next section, you configure options to transpile the code.

Configurer webpack et les options du compilateur TypeScriptConfigure webpack and TypeScript compiler options

Au cours des étapes précédentes, vous avez ajouté webpack-config.js au projet.In the previous steps, you added webpack-config.js to the project. Vous devez ajouter ensuite le code de configuration de webpack.Next, you add webpack configuration code. Vous allez ajouter une configuration de webpack simple qui spécifie un fichier d’entrée (app.tsx) et un fichier de sortie (app-bundle.js) pour permettre le regroupement et la transpilation du code JSX en JavaScript brut.You will add a simple webpack configuration that specifies an input file (app.tsx) and an output file (app-bundle.js) for bundling and transpiling JSX to plain JavaScript. Pour la transpilation, vous pouvez également configurer certaines options du compilateur TypeScript.For transpiling, you also configure some TypeScript compiler options. Ce code est une configuration de base conçue comme une introduction à webpack et au compilateur TypeScript.This code is a basic configuration that is intended as an introduction to webpack and the TypeScript compiler.

  1. Dans l’Explorateur de solutions, ouvrez webpack-config.js et ajoutez le code suivant.In Solution Explorer, open webpack-config.js and add the following code.

    module.exports = {
        devtool: 'source-map',
        entry: "./app.tsx",
        mode: "development",
        output: {
            filename: "./app-bundle.js"
        },
        resolve: {
            extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
        },
        module: {
            rules: [
                {
                    test: /\.tsx$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'ts-loader'
                    }
                }
            ]
        }
    }
    

    Le code de configuration de webpack indique à Webpack d’utiliser le chargeur TypeScript pour transpiler le code JSX.The webpack configuration code instructs Webpack to use the TypeScript loader to transpile the JSX.

  2. Ouvrez tsconfig.json et ajoutez le code suivant pour spécifier les options du compilateur TypeScript :Open tsconfig.json and add the following code, which specifies the TypeScript compiler options:

    {
      "compilerOptions": {
        "noImplicitAny": false,
        "module": "commonjs",
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "jsx": "react"
      },
      "exclude": [
        "node_modules"
      ],
      "files": [
        "app.tsx"
      ]
    }
    

    app.tsx est spécifié en tant que fichier source.app.tsx is specified as the source file.

Transpiler le code JSXTranspile the JSX

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud de projet, puis choisissez Ouvrir l’invite de commandes ici.In Solution Explorer, right-click the project node and choose Open Command Prompt Here.

  2. À l’invite de commandes, tapez la commande suivante :In the command prompt, type the following command:

    node_modules\.bin\webpack app.tsx --config webpack-config.js

    La fenêtre d’invite de commandes affiche le résultat.The command prompt window shows the result.

    Exécuter webpack

    Si vous voyez des erreurs à la place de la sortie précédente, vous devez les corriger pour permettre à votre application de fonctionner correctement.If you see any errors instead of the preceding output, you must resolve them before your app will work. Si les versions de votre package npm sont différentes de celles présentées dans ce tutoriel, cela peut constituer une source d’erreurs.If your npm package versions are different than the versions shown in this tutorial, that can be a source of errors. Vous pouvez éventuellement corriger les erreurs en utilisant les versions exactes indiquées au cours des étapes précédentes.One way to fix errors is to use the exact versions shown in the earlier steps. De plus, si une ou plusieurs de ces versions de package sont dépréciées et génèrent des erreurs, vous devrez peut-être installer une version plus récente pour corriger ces erreurs.Also, if one or more of these package versions has been deprecated and results in an error, you may need to install a more recent version to fix errors.

  3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud de projet. Choisissez Ajouter > Dossier existant, choisissez le dossier dist, puis cliquez sur Sélectionner un dossier.In Solution Explorer, right-click the project node and choose Add > Existing Folder, then choose the dist folder and click Select Folder.

    Visual Studio ajoute le dossier dist au projet, lequel contient app-bundle.js et app-bundle.js.map.Visual Studio adds the dist folder to the project, which contains app-bundle.js and app-bundle.js.map.

  4. Ouvrez app-bundle.js pour voir le code JavaScript transpilé.Open app-bundle.js to see the transpiled JavaScript code.

  5. Si vous êtes invité à recharger des fichiers modifiés de façon externe, cliquez sur Oui pour tout.If prompted to reload externally modified files, click Yes to All.

    Charger des fichiers modifiés

Chaque fois que vous apportez des changements à app.tsx, vous devez réexécuter la commande webpack.Each time you make changes to app.tsx, you must rerun the webpack command.

Exécuter l'applicationRun the app

  1. Vérifiez que Chrome est sélectionné en tant que cible de débogage actuelle.Make sure that Chrome is selected as the current debug target.

    Sélectionner Chrome en tant que cible de débogage

  2. Pour exécuter l’application, appuyez sur F5 (Déboguer > Démarrer le débogage) ou sur le bouton fléché vert.To run the app, press F5 (Debug > Start Debugging) or the green arrow button.

    Une fenêtre de console Node.js s’ouvre et affiche le port sur lequel le débogueur est à l’écoute.A Node.js console window opens that shows the port on which the debugger is listening.

    Visual Studio démarre l’application en lançant le fichier de démarrage, server.js.Visual Studio starts the app by launching the startup file, server.js.

    Exécuter React dans le navigateur

  3. Fermez la fenêtre du navigateur.Close the browser window.

  4. Fermez la fenêtre de console.Close the console window.

Définir un point d’arrêt et exécuter l’applicationSet a breakpoint and run the app

  1. Dans server.js, cliquez dans la marge située à gauche de la déclaration de staticPath pour définir un point d’arrêt :In server.js, click in the gutter to the left of the staticPath declaration to set a breakpoint:

    Définir un point d’arrêt

    Les points d'arrêt constituent une fonctionnalité élémentaire et essentielle de toute procédure de débogage fiable.Breakpoints are the most basic and essential feature of reliable debugging. Quand vous définissez un point d'arrêt, Visual Studio interrompt l'exécution du code à l'emplacement du point d'arrêt pour vous permettre d'examiner les valeurs des variables, le comportement de la mémoire ou encore la bonne exécution ou non d'une branche de code.A breakpoint indicates where Visual Studio should suspend your running code so you can take a look at the values of variables, or the behavior of memory, or whether or not a branch of code is getting run.

  2. Pour exécuter l’application, appuyez sur F5 (Déboguer > Démarrer le débogage).To run the app, press F5 (Debug > Start Debugging).

    Le débogueur s’arrête au point d’arrêt que vous avez défini (l’instruction active est marquée en jaune).The debugger pauses at the breakpoint you set (the current statement is marked in yellow). Vous pouvez maintenant inspecter l’état de votre application en pointant sur les variables situées dans la portée et en utilisant les fenêtres du débogueur, notamment les fenêtres Variables locales et Espion.Now, you can inspect your app state by hovering over variables that are currently in scope, using debugger windows like the Locals and Watch windows.

  3. Appuyez sur F5 pour continuer l’exécution de l’application.Press F5 to continue the app.

  4. Pour utiliser les outils de développement Chrome, appuyez sur F12.If you want to use the Chrome Developer Tools, press F12. Vous pouvez utiliser ces outils pour examiner le DOM et interagir avec l’application à l’aide de la console JavaScript.You can use these tools to examine the DOM and interact with the app using the JavaScript Console.

  5. Fermez le navigateur web et la console.Close the web browser and the console.

Définir et atteindre un point d’arrêt dans le code React côté clientSet and hit a breakpoint in the client-side React code

Dans la section précédente, vous avez attaché le débogueur au code Node.js côté serveur.In the preceding section, you attached the debugger to server-side Node.js code. Pour attacher le débogueur depuis Visual Studio et atteindre des points d’arrêt dans du code React côté client, vous devez aider le débogueur à identifier le processus approprié.To attach the debugger from Visual Studio and hit breakpoints in client-side React code, the debugger needs help to identify the correct process. Voici une façon d’y parvenir.Here is one way to enable this.

  1. Fermez toutes les fenêtres de Chrome.Close all Chrome windows.

  2. Ouvrez la commande Exécuter à partir du bouton Démarrer de Windows (cliquez avec le bouton droit de la souris et choisissez Exécuter), puis entrez la commande suivante :Open the Run command from the Windows Start button (right-click and choose Run), and enter the following command:

    chrome.exe --remote-debugging-port=9222

    Chrome démarre avec l’activation du débogage.This starts Chrome with debugging enabled.

  3. Passez à Visual Studio et définissez un point d’arrêt dans le code d’app-bundle.js, dans la fonction render(), comme indiqué dans l’illustration suivante :Switch to Visual Studio and set a breakpoint in app-bundle.js code in the render() function as shown in the following illustration:

    Définir un point d’arrêt

  4. Chrome étant sélectionné comme cible de débogage dans Visual Studio, appuyez sur Ctrl + F5 (Déboguer > Exécuter sans débogage) pour exécuter l’application dans le navigateur.With Chrome selected as the debug target in Visual Studio, press Ctrl + F5 (Debug > Start Without Debugging) to run the app in the browser.

    L’application s’ouvre dans un nouvel onglet du navigateur.The app opens in a new browser tab.

  5. Choisissez Déboguer > Attacher au processus.Choose Debug > Attach to Process.

  6. Dans la boîte de dialogue Attacher au processus, choisissez Code WebKit dans le champ Attacher à, puis tapez chrome dans la zone de filtre pour filtrer les résultats de la recherche.In the Attach to Process dialog box, choose Webkit code in the Attach to field, type chrome in the filter box to filter the search results.

  7. Sélectionnez le processus Chrome et le port d’hôte approprié (1337 dans cet exemple), puis cliquez sur Attacher.Select the Chrome process with the correct host port (1337 in this example), and click Attach.

    Attacher au processus

    Vous savez que le débogueur est correctement attaché quand l’Explorateur DOM et la console JavaScript s’ouvrent dans Visual Studio.You know the debugger has attached correctly when the DOM Explorer and the JavaScript Console open in Visual Studio. Ces outils de débogage sont similaires aux outils de développement Chrome et aux outils F12 pour Edge.These debugging tools are similar to Chrome Developer Tools and F12 Tools for Edge.

    Note

    Si le débogueur ne s’attache pas et que vous voyez le message « Impossible de s’attacher au processus.If the debugger does not attach and you see the message "Unable to attach to the process. Une opération n’est pas légale dans l’état actuel. »,An operation is not legal in the current state." utilisez le Gestionnaire des tâches pour fermer toutes les instances de Chrome avant de démarrer Chrome en mode débogage.then use the Task Manager to close all instances of Chrome before starting Chrome in debugging mode. Les extensions Chrome peuvent être en cours d’exécution et empêcher le mode débogage complet.Chrome Extensions may be running and preventing full debug mode.

  8. Dans la mesure où le code avec le point d’arrêt s’est déjà exécuté, actualisez la page de votre navigateur pour atteindre le point d’arrêt.Because the code with the breakpoint already executed, refresh your browser page to hit the breakpoint.

    Pendant que l’exécution du débogueur est en pause, vous pouvez examiner l’état de votre application en pointant sur les variables et en utilisant les fenêtres du débogueur.While paused in the debugger, you can examine your app state by hovering over variables and using debugger windows. Vous pouvez faire avancer le débogueur en exécutant pas à pas le code (F5, F10 et F11).You can advance the debugger by stepping through code (F5, F10, and F11).

    Vous pouvez éventuellement atteindre le point d’arrêt dans app-bundle.js ou son emplacement mappé dans app.tsx, en fonction de votre environnement et de l’état du navigateur.You may hit the breakpoint in either app-bundle.js or its mapped location in app.tsx, depending on your environment and browser state. De toute façon, vous pouvez exécuter pas à pas le code et examiner les variables.Either way, you can step through code and examine variables.

    • Si vous devez arrêter l’exécution du code dans app.tsx et que vous n’y parvenez pas, utilisez Attacher au processus comme décrit dans la procédure précédente pour attacher le débogueur.If you need to break into code in app.tsx and are unable to do it, use Attach to Process as described in the previous steps to attach the debugger. Ouvrez ensuite le fichier app.tsx généré dynamiquement à partir de l’Explorateur de solutions en ouvrant Documents de script > app.tsx, définissez un point d’arrêt et actualisez la page dans votre navigateur.Then open the dynamically generated app.tsx file from Solution Explorer by opening Script Documents > app.tsx, set a breakpoint, and refresh the page in your browser.

      Sinon, si vous devez arrêter l’exécution du code dans app.tsx et que vous n’y parvenez pas, essayez d’utiliser l’instruction debugger; dans app.tsx, ou définissez des points d’arrêt dans les outils de développement Chrome à la place.Alternatively, if you need to break into code in app.tsx and are unable to do it, try using the debugger; statement in app.tsx, or set breakpoints in the Chrome Developer Tools instead.

    • Si vous devez arrêter l’exécution du code dans app-bundle.js et que vous n’y parvenez pas, supprimez le fichier de mappage de source, app-bundle.js.map.If you need to break into code in app-bundle.js and are unable to do it, remove the sourcemap file, app-bundle.js.map.

      Conseil

      Une fois que vous avez effectué l’attachement au processus la première fois en suivant ces étapes, vous pouvez rapidement effectuer un rattachement au même processus dans Visual Studio 2017 en choisissant Déboguer > Rattacher au processus.Once you attach to the process the first time by following these steps, you can quickly reattach to the same process in Visual Studio 2017 by choosing Debug > Reattach to Process.

Étapes suivantesNext steps

Dans ce tutoriel, vous avez appris à créer une application Node.js et React, à transpiler du code JSX et à effectuer du débogage.In this tutorial, you learned how to create a Node.js and React app, transpile JSX, and debug. Pour en savoir plus sur Node.js Tools pour Visual Studio, consultez la page de Wiki.To learn more about Node.js Tools for Visual Studio, see the Wiki page.