본문 바로가기
Programming/React

[React] Create react app 으로 Application 만들기

by my2night 2023. 1. 18.
반응형

Create-react-app을 사용하는 목적은 좀 더 쉽게 ReactJS Application을 만들기 위해서 입니다.

Create-react-app은 ReactJS Application을 만들기 위한 많은 사전 설정들을 미리 준비해주기 때문입니다.

 

Create-react-app을 사용하기 위해 해야할 일.

1. node.js 설치 ( https://nodejs.org/en/ )

안정화된 버전인 LTS를 설치하고, 콘솔 화면에서 node -v를 입력했을 때, 버전이 표시되고 npx 명령어도 잘 수행된다면 정상 설치된 것입니다.

 

2. VSCode ( https://code.visualstudio.com/ )

    코드 작성을 위해 VSCode를 설치해 줍니다. 다른 IDE를 설치해도 문제는 없지만, VSCode가 편함.

 

준비가 다 완료 되었다면, 콘솔창에 [npx create-react-app "앱 이름"] 을 입력해줍니다.

위와 같이 입력 후 엔터를 치면 아래 화면과 같이 여러 작업을 수행합니다.

그동안 잠시 명상에 잠겨봅시다.

작업이 완료 되었으면 명상에서 일어나시고 해당 폴더를 VSCode로 엽니다.

 

VSCode의 TERMINAL 창에서 npm run start 혹은 npm start를 실행시켜 줍니다.

그러면 development server를 만들게 됩니다. 자동으로 브라우져가 열리고 기본 앱이 표시됩니다.

이것으로 create-react-app으로 기본 Application을 생성해 봤습니다.

감사합니다.

 

create-react-app으로 생성된 프로그램의 기본 파일들에 대해 알고 싶으시면 아래 내용을 봐주세요.

2022.12.18 - [Programming/React] - [React] react active app package.json description

 

[React] react active app package.json description

react-app/src/package.json react : react is everything we need to actually create our react components. react-dom : react dom is how we add them to the page. react-scripts : react-scripts is how we handle all of our bunding.

my2night.tistory.com

 

 

반응형

'Programming > React' 카테고리의 다른 글

[React] Github publish 하기  (0) 2023.01.22
[React] 로그가 두 번씩 찍힐 때. (StrictMode)  (0) 2023.01.21
[React] React vs Vanilla Javascript  (0) 2023.01.10
React support tools  (0) 2022.12.26
[React] useState  (0) 2022.12.18