web-dev-qa-db-fra.com

React projet dans Visual Studio 2017

Je souhaite développer une application React dans Visual Studio 2017 aux côtés de mon application .NET (dans la même solution).

J'utilise TypeScript, donc je veux un type de projet où je puisse personnaliser la construction (je veux packager le projet sur le Web, etc., de sorte que la génération standard de Visual Studio TypeScript ne soit pas suffisante).

J'ai installé les outils de développement de node.js , mais ils ne me permettent que de créer des projets spécifiques à node.js (qui exécutent une instance de node.js au démarrage) et ne me permettent pas de personnaliser le processus de construction.

Quel type de projet conviendra le mieux?

javascriptvisual-studioreactjstypescriptvisual-studio-2017
42
James Monger

J'ai récemment fait ceci et recommanderais ce qui suit:

  1. Créez un projet de solution "vide" dans Visual Studio 2017.
  2. Ajoutez/créez votre projet .NET comme vous le feriez normalement dans Visual Studio.
  3. Créez maintenant votre projet React. J'ai utilisé le create-react-app de Facebook pour générer mon projet React. Cela comporte de très bonnes fonctionnalités intégrées telles que Webpack, Jest (pour les tests), le fil (pour la gestion des paquets), etc. Cependant, ces détails sont "cachés", ce qui rend le projet généré beaucoup plus simple. Si vous faites avez besoin de plus de contrôle sur le processus de construction/test, vous pouvez exécuter la commande create-react-app eject. Sachez qu'il s'agit d'une opération "à sens unique", car vous ne pouvez pas remettre les fichiers dans create-react-app. Vous devrez installer nœud et fil séparément, si cela n’était pas évident.

  4. Puisque vous voulez aussi utiliser TypeScript, vous devriez utiliser le script react-scripts-ts comme suit:

    create-react-app my-app --scripts-version=react-scripts-ts

    Microsoft a une bonne marche à travers ici .

  5. La partie délicate consiste à importer le projet React généré dans Visual Studio. Je l'ai fait en installant le module "Développement Node.js" à partir du "Visual Studio Installer" qui est installé avec Visual Studio. Malheureusement, Microsoft semble avoir supprimé le modèle de projet TypeScript vierge ou vide (voir here ).

  6. Une fois les outils Node.js installés, vous pouvez créer un projet basé sur un nœud dans votre solution. Vous avez le choix entre plusieurs options sous Fichier -> Nouveau -> Projet ... -> Modèles -> Autres langues -> TypeScript, navigation dans le menu de gauche. J'ai choisi "Blank Node.js Web Application".

  7. Ensuite, vous devrez copier les fichiers de projet React créés par create-react-app dans votre projet Visual Studio. Je trouve qu'il est plus facile de créer les répertoires dans Visual Studio afin qu'ils soient ajoutés au fichier de projet, puis copiez les fichiers dans les dossiers générés, et enfin les ajouter au dossier de projet dans Visual Studio.

  8. À ce stade, vous pouvez exécuter les scripts du fichier package.json ajouté par create-react-app. Je préfère les exécuter en ligne de commande, mais vous pouvez également les exécuter dans Visual Studio à l'aide de "Task Runner Explorer" de Mads Kristensen.

50
Henry Daehnke

Une autre possibilité consiste à utiliser le extension de réaction dans Code Visual Studio . Ce n'est pas exactement ce que vous avez demandé, mais vous obtenez une apparence similaire à celle de Visual studio et une assistance complète React.

2
user1934212