Projet React dans Visual Studio 2017

Question

Je veux développer un Réagir application dans Visual Studio 2017 côtés de mon .NET application (dans la même solution).

Je suis à l'aide de la Machine, donc je veux d'un type de projet où je peux personnaliser le build (je veux webpack le projet, etc, de sorte que le standard de Visual Studio Tapuscrit de construire n'est pas assez).

J'ai installé le node.js les outils de développement , mais ils ne me permettent de créer node.js des projets spécifiques (qui exécutent un node.js exemple lorsqu'il est lancé) et ne me laissez pas personnaliser le processus de construction.

Qui type de projet sera le mieux pour cela?

Answer 1

J'ai récemment fait cela et recommande les éléments suivants:

1. Créer un "Vide" du projet de solution dans Visual Studio 2017.
2. Ajouter/créer votre .Un projet de réseau comme vous le feriez normalement dans Visual Studio.
3. Maintenant, créez votre projet React. J'ai utilisé le créer-réagir-app de Facebook réellement générer mon Réagir projet. Cela a vraiment un bon construits dans les caractéristiques telles que Webpack, Plaisanterie (pour les tests), laine (pour la gestion des paquets), etc. Cependant, ces détails sont "cachés" de vous pour que le projet a l'air beaucoup plus simple. Si vous ne besoin de plus de contrôle sur la construction/processus de test, vous pouvez exécuter l' create-react-app eject commande. Soyez avisé que c'est un "one-way" opération que vous ne pouvez pas mettre les fichiers dans create-react-app. Vous aurez besoin d'installer le nœud et le fil séparément, si ce n'était pas évident.

4. Car vous aussi, vous souhaitez utiliser la Machine, vous devez utiliser l' réagissent-scripts-ts script comme ceci:

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

   Microsoft dispose d'un bon promenade par ici.

5. La partie la plus délicate est d'avoir généré Réagir de projet dans Visual Studio. Je l'ai fait en installant le "Node.js développement du module" de la "Visual Studio Installer" qui est installé avec Visual Studio. Malheureusement, Microsoft semble avoir supprimé le vide ou vide Tapuscrit modèle de projet (voir ici).

6. Une fois l'Node.js les outils sont installés, vous pouvez créer un nœud de base de votre projet dans la solution. Il y a plusieurs choix à partir de sous le menu Fichier -> Nouveau -> Projet... -> Templates -> d'Autres Langues -> Tapuscrit à gauche du menu de navigation. J'ai choisi "la Vierge Node.js l'Application Web".

7. Après cela, vous aurez besoin de copier sur le projet React fichiers créés par create-react-app dans votre projet Visual Studio. Je trouve plus facile de créer des répertoires dans Visual Studio, donc ils sont ajoutés au fichier de projet, puis copiez les fichiers dossiers générés, et enfin de les ajouter dans le dossier du projet dans Visual Studio.

8. À ce stade, vous pouvez exécuter les scripts dans l' package.json de fichiers qui ont été ajoutés par create-react-app. Je préfère pour l'exécution de ces à la ligne de commande, mais vous pouvez les exécuter dans Visual Studio à l'aide de la "Task Runner Explorer" par Mads Kristensen.

Answer 2

Une autre possibilité consiste à utiliser l' extension react dans Visual Studio Code . Ce n'est pas exactement ce que vous avez demandé, mais vous obtenez une apparence similaire à Visual studio et une prise en charge complète de React.