[react] 리액트 초기 프로젝트 생성

리액트 프로젝트 생성 및 실행 방법

프로젝트 생성

프로젝트 생성 명령 설치하기

npm install -g create-react-app

 

위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어졌기 때문에 시스템 공통 폴더에 설치된다. 따라서 프로젝트를 새로 생성할 때마다 위 명령을 반복할 필요가 없다.

npx 로 프로젝트를 생성해야 하는데 npx 를 설치하기 위해서는 npm 을 통해서 설치 가능하다.

npm install npx -g

 

프로젝트 생성하기

npx create-react-app [프로젝트이름]

 

create-react-app명령을 실행하여 프로젝트를 생성할 수 있다. 프로젝트 이름으로 영어 대문자는 사용이 불가능하다.

프로젝트 실행

생성한 프로젝트 폴더에 들어가기

cd [프로젝트이름]

 

프로젝트 실행하기

npm start

or

yarn start

 

해당 프로젝트 폴더에서 npm start or yarn start 명령을 실행하면 node.js에서 해당 프로젝트가 실행된다.

프로젝트 실행 결과

실행 과정

• 웹브라우저가 http://localhost:3000/주소의 서버에 http request를 전송
• node.js 서버가 그 전송을 받아서 우리가 생성한 프로젝트를 실행
• 우리가 생성한 프로젝트의 실행결과가 웹브라우저로 전송
• 웹브라우저가 창에 우리가 생성한 프로젝트의 실행결과가 출력