React project in Visual Studio 2017

Question

(동일한 솔루션에서) .NET 응용 프로그램과 함께 Visual Studio 2017에서 React 응용 프로그램을 개발하고 싶습니다.

저는 TypeScript를 사용하기 때문에 빌드를 사용자 정의 할 수있는 프로젝트 유형이 필요합니다. 표준 Visual Studio TypeScript 빌드로는 충분하지 않으므로 프로젝트를 웹 포장하고 싶습니다.

node.js developer tools을 설치했지만 node.js 전용 프로젝트 (시작할 때 node.js 인스턴스를 실행 함) 만 만들 수 있으며 빌드 프로세스를 사용자 정의 할 수 없습니다.

어떤 프로젝트 유형이 가장 좋을까요?

Answer 1

내가 최근에 이런 짓을하고 다음 추천 :

1. 비주얼 스튜디오에서 "빈"솔루션 프로젝트를 만듭니다 2017
2. 추가/당신의 .NET 프로젝트를 만들려면 일반적으로 비주얼 스튜디오에서와 같은.
3. 이제 React 프로젝트를 만드십시오. 페이스 북의 create-react-app을 사용하여 실제로 내 React 프로젝트를 생성했습니다. 이것은 Webpack, Jest (테스트 용), 원사 (패키지 관리 용) 등과 같은 기능이 내장되어 있습니다. 그러나 이러한 세부 사항은 숨겨져 있으므로 생성 된 프로젝트가 훨씬 단순 해집니다. 을 수행하는 경우은 빌드/테스트 프로세스에 대한 추가 제어가 필요하므로 create-react-app eject 명령을 실행할 수 있습니다. create-react-app에 파일을 다시 넣을 수 없으므로이 작업은 "단방향"작업입니다. 그것이 명확하지 않은 경우 node과 yarn을 별도로 설치해야합니다.

4. 당신은 또한 당신이 그렇게 같은 react-scripts-ts 스크립트를 사용한다 타이프 라이터를 사용하려면 때문에

:

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

Microsoft는 here 통해 좋은 산책을 가지고있다.

5. 까다로운 부분은 생성 된 React 프로젝트를 Visual Studio로 가져 오는 것입니다. Visual Studio와 함께 설치되는 "Visual Studio Installer"에서 "Node.js development"모듈을 설치하여이 작업을 수행했습니다. 불행하게도 Microsoft는 빈 또는 빈 TypeScript 프로젝트 템플릿을 제거한 것 같습니다 (here 참조).

6. Node.js 도구가 설치되면 솔루션에 노드 기반 프로젝트를 만들 수 있습니다. 파일 -> 새로 만들기 -> 프로젝트 -> 템플릿 -> 다른 언어 -> TypeScript 왼쪽 메뉴 탐색 아래에서 선택할 수있는 항목이 몇 가지 있습니다. 나는 "Blank Node.js Web Application"을 선택했다.

7. 그런 다음 create-react-app으로 만든 React 프로젝트 파일을 Visual Studio 프로젝트로 복사해야합니다. Visual Studio에서 디렉터리를 만들어 프로젝트 파일에 추가 한 다음 생성 된 폴더에 파일을 복사하고 Visual Studio의 프로젝트 폴더에 추가하기가 더 쉽습니다.

8. 이 시점에서 create-react-app에 의해 추가 된 package.json 파일의 스크립트를 실행할 수 있습니다. 커맨드 라인에서 실행하는 것을 선호하지만 Mads Kristensen의 "Task Runner Explorer"를 사용하여 Visual Studio에서도 실행할 수 있습니다.

Answer 2

또 다른 가능성은 Visual Studio Code에 react extension을 사용하는 것입니다. 정확히 당신이 요구 한 것이 아니지만 Visual Studio 및 전체 React 지원과 비슷한 모양과 느낌을 얻게됩니다.