티스토리 뷰
1. nodejs
1.설치
# yum -y install nodejs
2. 버전확인
# node -v
v10.24.0
2. yarn
1.yarn 설치
# npm install --global yarn
2.버전확인
# yarn --version
1.22.10
3. 프로젝트 생성 create-react-app
1. 리액트 프로젝트 생성
# yarn create react-app [프로젝트명]
예시> yarn create react-app hello-react
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@4.0.3" with binaries:
- create-react-app
[####################################################################] 68/68
Creating a new React app in /home/hello-react.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ cra-template@1.1.2
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
└─ react@17.0.2
info All dependencies
├─ cra-template@1.1.2
├─ immer@8.0.1
├─ react-dev-utils@11.0.4
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
├─ react@17.0.2
└─ scheduler@0.20.2
Done in 31.86s.
Initialized a git repository.
Installing template dependencies using yarnpkg...
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.11.10
├─ @testing-library/react@11.2.6
├─ @testing-library/user-event@12.8.3
├─ react-dom@17.0.2
├─ react@17.0.2
└─ web-vitals@1.1.1
info All dependencies
├─ @testing-library/dom@7.30.3
├─ @testing-library/jest-dom@5.11.10
├─ @testing-library/react@11.2.6
├─ @testing-library/user-event@12.8.3
├─ @types/aria-query@4.2.1
├─ @types/jest@26.0.22
├─ @types/testing-library__jest-dom@5.9.5
├─ css.escape@1.5.1
├─ css@3.0.0
├─ dom-accessibility-api@0.5.4
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ web-vitals@1.1.1
Done in 6.45s.
Removing template package using yarnpkg...
yarn remove v1.22.10
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 3.10s.
Git commit not created { Error: Command failed: git commit -m "Initialize project using Create React App"
at checkExecSyncError (child_process.js:629:11)
at execSync (child_process.js:666:13)
at tryGitCommit (/home/hello-react/node_modules/react-scripts/scripts/init.js:62:5)
at module.exports (/home/hello-react/node_modules/react-scripts/scripts/init.js:352:25)
at [eval]:3:14
at Script.runInThisContext (vm.js:122:20)
at Object.runInThisContext (vm.js:329:38)
at Object.<anonymous> ([eval]-wrapper:6:22)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at evalScript (internal/bootstrap/node.js:590:27)
status: 128,
signal: null,
output: [ null, null, null ],
pid: 393,
stdout: null,
stderr: null }
Removing .git directory...
Success! Created hello-react at /home/hello-react
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd hello-react
yarn start
Happy hacking!
Done in 45.67s.
2. 서버구동
# cd hello-react
# yarn start
Compiled successfully!
You can now view hello-react in the browser.
Local: http://localhost:3000
On Your Network: http://172.17.0.2:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
브라우저 주소창에 위와 같은 화면을 출력하였다면 준비완료!
- http://localhost:3000/
- npm , yarn
노드 패키지 매니저 자바스크립트 언어를 위한 패키지 관리자
'프로그래밍 > React' 카테고리의 다른 글
React 이벤트 처리에 대해서 알아보자 (0) | 2021.09.02 |
---|---|
React 컴포넌트 / props / state 에 대해서 알아보자 (1) | 2021.09.01 |
React Developer Tools 크롬 확장프로그램 활용 방법 (1) | 2021.08.27 |
React 생명주기(라이프사이클) 메서드 알아보기 (0) | 2021.08.26 |
VScode - React 컴포넌트 코드 자동생성 확장프로그램 사용 방법 (1) | 2021.08.24 |
댓글