[React] React 시작하기 (create-react-app)

Create React App

리액트 프로젝트를 시작하는 가장 쉬운방법입니다.

기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 상용화할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들이 존재합니다. 작성한 프로그램을 미리보기 할 수 있도록 해주고 코드나 기타 다른 것들이 변경될 때마다 브라우저가 자동적으로 페이지를 업데이트 하는 방식으로 이 프로그램을 미리 볼 수 있어 개발 과정을 단순화시켜 줍니다.

 

node.js

브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임이 필요하다. 리액트를 위해 필요한 것은 아니지만 create react app을 실행하기 위해 node.js가 필요하기 때문에 node.js를 먼저 설치를 해줘야 한다.

다운로드 | Node.js

 

Create React App 명령어 사용

• 터미널을 실행한 후 경로를 설정한다.
• npx create-react-app "생성할 폴더명"

create-react-app 설치

• 명령어 실행 후 아래와 같은 화면이 나온다면 정상적으로 설치 된 것이다.

create-react-app 설치 완료

• 설치가 정상적으로 되었다면 생성된 리액트 폴더에 연결하여 npm start 명령어를 작성하면 리액트 서버가 실행됩니다.

리액트 서버 정상 작동

• 정상적으로 실행되었다는 문구가 나온다면 http://localhost:3000/ 에 접속하여 실행결과를 볼 수 있습니다.(기본경로)

리액트 실행 화면

• 서버를 종료하고 싶다면 서버가 구동중인 터미널로 가서 ctrl+c를 눌러 구동을 멈출 수 있습니다.
• VScode를 사용중이라면 리액트 폴더를 열어서 npm install 명령을 사용하여 package.json에 있는 프로젝트에 필요한 모든 패키지와 개발에 필요한 것들을 다운로드해서 설치합니다.