Visual Studio Code를 이용한 리액트 hello world 프로젝트 생성

 

 

참조 : code.visualstudio.com/docs/nodejs/reactjs-tutorial

React JavaScript Tutorial in Visual Studio Code

Node js 설치

nodejs.org/en/download/

Download | Node.js

visual studio code 설치

code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

Welcome to React

create-react-app을 이용해서 리액트 프로젝트를 생성한다. 터미널을 띄우고 프로젝트를 생성할 디렉토리로 이동한 후 다음과 같이 명령어를 입력한다.

npx create-react-app my-app

다음 명령을 실행하면 http://localhost:3000 으로 리액트 welcome 페이지가 뜬다.

cd my-app
npm start

 

VSCode에서 방금 생성한 프로젝트를 File> Open Folder로 프로젝트를 연다

 

Hello World!

이제는 Hello World!가 나오게 파일을 수정을 한다. 기존의 css와 js파일 모두 수정한다.

Index.css, App.css의 내용을 모두 지운다.

App.js파일을 수정한다.

import logo from './logo.svg'; 삭제

function App() 의 return내용을 다음과 같이 수정한다.

function App() {
  return (
    <div>
      Hello World!
    </div>
  );
}

파일을 수정 후 저장하면 Welcome 페이지가 Hello World로 바뀐걸 볼수 있다.