[React] #1.0 Creating your first React App (#코딩공부)

https://youtu.be/j2jhnq8RnfU

---

<복습>

https://wook-2124.tistory.com/123

[React] #0 Requirements (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

---

1. create-react-app

facebook에서 React를 만들고 사용하고 있는 만큼 여러 편리한 기능을 제공하고 있는데 create-react-app도 그 중 하나이다. Webpack, Babel을 설치하고 따로 Complie하면서 다른 폴더에 지정하는 번거로움 없이, create-react-app로 한번에 Set up을 해결할 수 있다.

 

Creating an App을 하는 방법은 cmd(command, 명령 프롬프트)창 or VSC(Visual Studio Code)에서 npx create-react-app 소문자_폴더_이름 or 오른쪽 사진 npx 밑에 나와있는 npm과 Yarn으로 생성하는 방법이 있다.

 

VSC에서 cd(폴더 이동) Documents 후 npx로 create-react-app을 설치한 모습이다.

 

이것은 cmd에서 설치한 모습인데, 폴더 이름을 설정할 때 대문자를 섞어 Movie_App이라고 생성할 때는 오류가 나왔다. 때문에 소문자로 바꿔서 폴더를 생성했고, code movie_app을 쳐서 VSC에서 작업을 했다.

---

2. npm start

parcel을 설치했을 때 여러 파일들이 자동으로 설치됐던 것 같이, Web app을 만드는데 필요한 것들이 설치됐다.

 

앞으로 신경써야 할 command(scripts)인 "start", "build"이다. 예를 들어 npm start로 npm react-scripts start를 친 것과 같이 사용할 수 있다.

 

npm start를 입력하면, parcel에서 입력했던 것과 같이 localhost에 movie_app을 구동시켜준다.