[React] 1. React 설치 및 환경세팅

React 설치

1. Nodejs를 검색하여 LTS 버전을 설치합니다. 이때 설치 경로는 그대로 사용하는게 좋습니다.

2. Visual Studio Code를 검색하여 설치합니다.

3. 작업용 폴더를 하나 만들어줍니다.

4. 터미널에서 3번 폴더 경로로 이동하여 아래 코드를 입력합니다.

npx create-react-app 프로젝트명

// permission이 없다는 에러가 뜰 경우, 아래 코드로 입력
sudo npx create-react-app 프로젝트명

그래도 오류가 날 경우, 맨 아래 실행 오류 해결법을 참고하세요.

 

Editor에서 프로젝트 오픈

1. Visual Studio Code 에디터를 오픈합니다.

2. File - Open Folder - 오픈할폴더명

3. App.js : 메인페이지

 

브라우저 미리보기

1. 에디터 상단 메뉴 중 Terminal - New Terminal 클릭

2. npm start 입력

 

npx create-react-app 실행 오류

You are running `create-react-app` 4.0.2, which is behind the latest release (4.0.3).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

해결법 1) 메시지대로 삭제하고 다시 설치

npm uninstall -g create-react-app
yarn global remove create-react-app

 

해결법 2) 아래 실행 명령 순서대로 진행

1. npm uninstall -g create-react-app
2. npm add create-react-app
3. 다시 npx create-react-app myapp

위 사진처럼 출력되면 정상적으로 실행된 것입니다.

 

 

참고 : https://velog.io/@milkyway/React-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-You-are-running-create-react-app-4.0.2-which-is-behind-the-latest-release-4.0.3,

https://codingapple.com/unit/react1-install-create-react-app-npx/