[React] 리액트 애플리케이션 생성 및 실행

리액트 애플리케이션 생성하기

 

리액트 애플리케이션을 생성하는 명령어는 간단한데, 만들고자 하는 폴더에서 터미널을 통해 생성이 가능하다.

create-react-app '리액트 애플리케이션을 만들 파일/폴터'

 

위 명령어를 통해 리액트 애플리케이션으로 만들 폴더가 있는 위치로 이동한 다음 위의 명령어를 통해 리액트 애플리케이션을 실행한다. 명령을 사용하기 위해서는 해당 명령어 설치가 필요한데, 이는 아래 블로깅을 참고하면 된다.

2023.10.20 - [공부 자료/리액트[React]] - [리액트] 리액트 설치(create-react-app) 시 permission 에러 해결

[리액트] 리액트 설치(create-react-app) 시 permission 에러 해결

 

리액트 애플리케이션으로 잘 완성된다면 아래와 같은 폴더 구조가 생성된다.

*node_modules의 경우 메모리의 용량이 큰데,

이는 파일을 깃에 올리거나 다른 곳으로 이동시키고 싶을 경우 node_module은 제외하고 가지고 있으면 되며,

사용 시 'npm install' 명령어를 통해 패키지 내에서 필요한 node_modules를 자동으로 생성할 수 있다.

 

---

리액트 애플리케이션 실행하기

 

1. 실행하고자 하는 리액트 애플리케이션 위치에서 터미널을 실행한다.

2. 터미널에 아래와 같이 명령어를 입력한다.

(리액트는 저장 즉시 바로바로 적용된다.)

npm start // 애플리케이션 실행

 

아래와 같은 화면이 나온다면 리액트가 잘 시행된 것이다.

 

이제 리액트 코드를 작성해 저장하면 바로바로 화면에 적용됨을 볼 수 있게 될 것이다.