-
nomard) React 설치 및 연결React 2023. 3. 16. 12:49
리액트 설치 방법
: ReactJS 어플리케이션 개발에 도움을 준다.
1. nodejs 설치
- nodejs 홈페이지에서 설치 후 cmd로 version과 npx를 확인해주면 node를 사용할 수 있는지 확인할 수 있다.
**** node를 설치하는 도중 vs code가 켜져있었다면 꼭 재부팅 해주자, 그렇지 않으면 vs code가 node를 인식할 수 없다
2. node.js 를 이용해 react 다운로드
: react는 대표적으로 node.js 와 yarn을 통해 다운로드 가능하다
- node.js 는 가급적 c 드라이브에 설치하자
- cmd에서 node -v , npm -v 명령어로 버전을 확인하는 것으로 설치가 잘 됬는지 확인할 수 있다.
cmd 창에서 react를 전역으로 설치하자 (로컬로 설치하면 해당 디렉토리 내부에서만 리액트 사용이 가능하거나 link를 걸어야한다) npx install -g create-react-app -> 모든 경로에서 react 사용 가능 npx install create-react-app -> 로컬
3. react 프로젝트를 생성하자.
: 프로젝트를 만들고 싶은 경로로 이동해서 해당 명령어를 실행한다.
npx create-react-app 폴더이름
프로젝트 이름( 폴더명 ) 에는 대문자가 들어갈 수 없다
- 프로젝트 생성이 완료되면 다음과 같은 모듈 , 오브젝트 들을 확인할 수 있다.
- package.json을 켜면 실행할 수 있는 명령어들이 나와있다.
4. react 실행
: local 서버를 열어서 프로젝트의 진행 상황을 확인할 수 있다
npm start
- 터미널에 npm start를 실행해주면 ( 개발용 서버 )
- create-react-app 애플리케이션의 초기버전 홈페이지가 뜬다.
- src 폴더의 App.js , index.js 와 public 폴더의 index.html이 주로 사용 될 파일들이다.
5. 외부에서 프로젝트를 내려받는 경우
: git hub 에서 clone으로 프로젝트를 내려받거나 외부에서 내려받은 경우 npm start를 해도 작동하지 않는다. 이련경우
npm 연결을 다시 만들어 줘야한다 1. npm cache clean --force -> npm 캐시 삭제 ( 생략 가능 ) 2. npm install 3. npm start
'React' 카테고리의 다른 글
OPEN API 데이터 불러오기 ( fetch ) (0) 2023.03.19 nomad) react .map( ) (0) 2023.03.17 nomad) react useState( [] ) 활용 (0) 2023.03.17 nomard) Clean Up 함수 (0) 2023.03.16 nomard) ReactJS 기본, useState, Component, props (0) 2023.03.13