React

2. VSCode를 이용한 React 시작하기 및 hello world.

Rachel_ 2022. 6. 10. 17:09

1. React 서버 실행하기

 

1) 앞선 과정에서 생성한 react의 프로젝트 폴더를 폴더 채 열어줍니다.

그러면 아래와 같은 화면이 나옵니다

 

그러면 우선 메뉴바의 터미널을 클릭하고 새 터미널을 열어주세요.

 

 

 

 

 

 

2) 열린 터미널 창에서 npm start 를 입력 한 뒤 엔터 버튼을 눌러주세요.

 

 

 

 

 

 

 

 

 

 

3) 정상적으로 실행되었다면, 다음과 같은 화면이 열리게 됩니다.

리액트의 기본 포트번호는 3000 이기 때문에 주소창에는 localhost:3000 으로 입력된 것이 보입니다.

 

 

 

 

 

 

 

 

 

 

 

 

2. Hello world 출력해보기

 

1) 왼쪽 사이드바에서 src 폴더 안에 있는 App.js 를 열어주세요.

 

열어보면 이미 여러 값들이 있겠지만, 필요한 부분만 남긴 뒤에

우리가 출력하길 원하는 hello world 를 입력해봅시다.

 

 

 

 

2) 아까의 현란했던 페이지를 대신해서, 우리가 출력하길 원했던 Hello world 가 출력되었습니다.