1. 노드.js 설치법 (세팅법): react를 설치하기 위해서 node.js를 먼저 설치한다.
| https://nodejs.org/en/ 16.14.0 LTS 다운로드 (버전이 중요하기 보단 LTS 다운하면 된다) 다운받은거 실행하고 next-> next해서 마무리한다. window powershell을 관리자 권한으로 실행하여 get-help Set-ExecutionPolicy 를 치고 모듈 다운로드 하겠냐고 물으면 Y를 쳐서 업데이트 시작한다. |
2. 리액트 설치(세팅)하는 방법
| cmd 관리자 실행 npm install -g create-react-app Npm이란 nodejs를 이용해 만든 여러 앱들을 명령어 환경에서 쉽게 설치할 수 있도록 도와주는 도구로 node.js계의 앱스토어 역할을 하는 SW이다. |
3. react 프로젝트 생성
- cd reactSrc [C드라이브에 만들어 놓은 reactSrc로 이동!(미리 폴더 생성해놓기)]
- 그다음 create-react-app react00_start 하면 Happy haking! 이라고 뜬다!(create-react-app 뒤에는 프로젝트명)
- create-react-app은 react 앱을 만들도록 도와주는 프로그램이다.(Node.js의 패키지)
필요한 폴더가 생성되었다. (cmd창에서 파일 안에 볼 경우에는 dir로 디렉토리를 확인하면된다.)
4. react application 실행
- (reactSrc>react00_start) npm run start 하면 브라우저가 실행되면서 http://localhost:3000 url로 화면이 뜨는 것을 확인할 수 있다.
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드7-3. [React] CDN 방식으로 화면 구성 (0) | 2022.02.18 |
|---|---|
| 프론트엔드7-2. React의 구조(index.html, App.js, index.js) (0) | 2022.02.18 |
| 프론트엔드6-4. jquery플러그인 easing/checkeditor/ bxslider / dialog (0) | 2022.02.18 |
| 프론트엔드6-3. [jquery 예제] review 기능과 게시판 기능 만들기 (0) | 2022.02.17 |
| 프론트엔드6-2. [jquery 예제] jquery를 이용해서 글자 크기 변경 (0) | 2022.02.17 |
