VSCode에서 반응을 실행하는 방법

지금까지 나는 코드샌드박스에 대한 반응을 연습하고 있었다. VSCode와 git과의 통합에 익숙하기 때문에 VSCode에서 react를 실행하지 않는 이유를 생각하고 알아낸 후 동료 코더를 위한 가이드를 작성해야겠다고 생각했습니다.
그럼 이제 갑니다👇

여기 있으므로 Visual Studio Code가 이미 설치되어 있다고 가정합니다. 그렇지 않은 경우 다음 링크로 이동하십시오: https://code.visualstudio.com/download 시스템 사양에 따라 VSCode를 설치합니다.

이제 vscode를 설치했으므로 nodejs와 npm을 설치할 차례입니다. npm이 무엇인지 모르더라도 걱정하지 말고 내가 말하는 대로 하면 됩니다.
이 링크로 이동하십시오: https://nodejs.org/en/download/ (google "nodejs 다운로드"및 이것이 첫 번째 링크가 될 것입니다).

저는 윈도우즈라서 윈도우즈 버전을 다운받았습니다. 사용 중인 플랫폼에 따라 다운로드할 수 있습니다. 기본 설정을 설치하기만 하면 충분합니다(다음...다음...및...다음을 클릭하면 이용 약관을 읽을 수 있습니다).

이제 VSCode에서 반응 파일을 저장할 폴더를 엽니다.

VSCode에서 터미널을 열고 터미널에 아래 언급된 명령을 붙여넣고 Enter 키를 누릅니다.

npx create-react-app my-app

이제 마법이 일어나도록 기다리십시오.
참고 사항: Create React App은 React를 배우기에 편안한 환경이며 React에서 새로운 단일 페이지 애플리케이션 구축을 시작하는 가장 좋은 방법입니다. 최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고 멋진 개발자 환경을 제공하며 프로덕션용으로 앱을 최적화합니다.

위의 명령이 제대로 실행되면 이 단계를 건너뛸 수 있습니다. 그러나 아래 그림과 같이 오류가 발생하면 해결 방법은 단순히 VS Code를 다시 시작하는 것입니다(VS Code를 연 상태에서 Node.js를 설치한 결과일 수 있음).

위 단계에서는 my-app 폴더에 react에 필요한 템플릿을 자동으로 생성했습니다.

이제 app.js(my-app/src/app.js)에 코드를 작성하세요.

코드를 실행하려면 먼저 터미널에 아래 명령어를 작성하여 my-app 폴더로 들어갑니다.

cd my-app

이제 아래 명령을 작성하여 마지막으로 코드를 실행하십시오.

npm start

축하합니다. 해냈습니다.

이제 app.js에서 변경 사항을 만들고 저장하고 브라우저에 반영된 변경 사항을 볼 수 있습니다.

그게 다야.

궁금한 점이 있으면 댓글 섹션에 질문해 주시면 최대한 빨리 답변해 드리겠습니다.

나는 웹 개발과 관련하여 매일 하나의 기사를 씁니다(예, 매일). 같은 것을 배우고 있다면 여기로 나를 따르십시오 ..

기사가 마음에 들면 Twitter에서 나를 팔로우하십시오.

Linkedin 유형이라면 연결해 봅시다.

멋진 하루 보내세요 😀!