Learning React#2 최초 프로젝트
11155 단어 React
페이스북은 편리한 도구인'create-react-app'을 제공하기 때문에 이걸 사용하세요.
첫 번째 읽기 항목
폴더를 적절하게 만들고 해당 폴더로 이동하여 실행합니다create-react-app.
"react-app"이라는 폴더를 만들고 "hello-world"라는 프로젝트를 만들었습니다.
명령을 실행하면 다음과 같다.
명령 실행 (기존)$ npx create-react-app hello-world --typescript
명령 실행 (신규)$ npx create-react-app hello-world --template typescript
npx 이전에도 설명했지만 명령을 실행할 때 필요한 패키지를 설치하지 않아도 필요에 따라 자동으로 다운로드하여 실행할 수 있다.
여기서'구(舊)'와'신(新)'두 가지가 기재되어 있는데, 책에 흔히'구(舊)'라고 기재되어 있지만, 실행하면 바로 알 수 있다
앞으로 "--typescript"라는 매개 변수를 삭제할 수 있으니 새 매개 변수 "--template typescript"를 사용하십시오
그래서'새'파라미터도 실렸다.
상술한 명령을 실행하면 메시지가 표시되지만 무엇을 진행하고 있는지 알 수 없기 때문에 모든 메시지를 검사했습니다.
갑자기 이렇게 많은 정보를 출력했기 때문에 처음에는 무서웠는데, 자신이 만든 프로젝트가 어떻게 좋은 정보를 만들었는지 알기 위해서였다.
출력 메시지의 모든 메시지에 괄호 번호 "()"를 붙여서 설명합니다.
그 다음에 설명할게요.
첫 번째 읽기 항목satom@W1007018N182 MINGW64 ~/src/react-app
$ npx create-react-app hello-world --typescript
(1)
Creating a new React app in C:\Users\satom\src\react-app\hello-world.
(2)
The --typescript option has been deprecated and will be removed in a future release.
In future, please use --template typescript.
(3)
Installing packages. This might take a couple of minutes.
(4)
Installing react, react-dom, and react-scripts with cra-template-typescript...
(5)
yarn add v1.22.4
(6)
[1/4] Resolving packages...
(7)
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
(8)
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" 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".
(9)
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 33 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
(10)
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 211.09s.
(11)
Initialized a git repository.
(12)
Installing template dependencies using yarnpkg...
yarn add v1.22.4
[1/4] Resolving packages...
warning @testing-library/react > @types/testing-library__react > @types/[email protected]: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 24 new dependencies.
info Direct dependencies
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @sheerun/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 35.15s.
(13)
We detected TypeScript in your project (src\App.test.tsx) and created a tsconfig.json file for you.
(14)
Your tsconfig.json has been populated with default values.
(15)
Removing template package using yarnpkg...
yarn remove v1.22.4
[1/2] Removing module cra-template-typescript...
[2/2] Regenerating lockfile and installing missing dependencies...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
success Uninstalled packages.
Done in 23.94s.
(16)
Created git commit.
(17)
Success! Created hello-world at C:\Users\satom\src\react-app\hello-world
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!
(18)
We suggest that you begin by typing:
cd hello-world
yarn start
Happy hacking!
satom@W1007018N182 MINGW64 ~/src/react-app
$
그럼 설명!
(1) 프로젝트 폴더 만들기
현재 폴더'c:\Users\satom\src\react-app'에'hello-world'라는 React 응용 프로그램 항목을 만듭니다.
실제로'hello-world'라는 폴더를 만들 것입니다. 이 폴더는 프로젝트 폴더가 됩니다.
(2) 이전 매개변수에 대한 경고 및 새 매개변수 브로드캐스트
여기에는 처음에 설명한 "구"와 "새"명령의 차이를 설명한다.
앞으로 "--template typescript"를 사용하세요.
(3) React 프로젝트 작성에 필요한 소프트웨어 패키지 설치
여기서 좀 걱정되는 시간이지만 안심하세요, 움직이고 있어요!
(4) TypeScript 설치 프로젝트 템플릿 만들기
"cra-template-typescript"는 React 공식 TypeScript 프로젝트의 템플릿 이름입니다.
한마디로 공식 템플릿을 이용해 프로젝트를 진행한다.
(5)~(9)yarn의 React 프로젝트 구축 절차
(5)부터 (9)까지 yarn을 실행하고React 프로젝트 구축에 필요한 모든 패키지와 필요한 모든 관련 패키지를 설치하고React 프로젝트를 구축합니다.
(10) React 프로젝트에 필요한 모든 패키지 보기
마지막으로, React 프로젝트를 구축하는 데 필요한 모든 패키지에 대한 정보를 볼 수 있습니다.
(11) Git 로컬 저장소 자동 생성
생성된 React 프로젝트를 바탕으로git 저장소를 자동으로 만듭니다.Git 자료고를 단숨에 만들다니.편리한 세상이 되었다.하지만 좀 쓸데없는 일에 참견해라
(12) React 프로젝트의 테스트 모듈 설치
React 프로젝트에 테스트 모듈을 추가하고 있습니다.
(13)~(14) TypeScript에 대한 설정 파일 자동 생성
만든 React 프로젝트가 유형 스크립트를 기반으로 하는 경우 구성 파일이 자동으로 생성됩니다.
(15) 더 이상 필요하지 않은 가방 삭제
이게 무슨 짓인지 모르겠어요.
(16) Git 로컬 저장소에 제출
프로젝트 파일이 Git 로컬 저장소에 저장되었습니다.
(17) React 프로젝트 구축 완료!
이것을 보여주면 프로젝트의 구축이 완성됩니다!
yarn 명령을 사용하여 React 응용 프로그램을 로컬 실행yarn start, 발표 모듈 생성yarn build, 자동 테스트 실행yarn test을 할 수 있습니다.yarn eject만 뭘 하는지 몰라요...
(18) Let's try to run your first app!
완료되면 기본 상태에서 프로그램을 시작할 수 있습니다.
따라서 프로젝트 폴더로 이동하여 만든 프로그램을 실행합시다!
첫 번째 애플리케이션 실행satom@W1007018N182 MINGW64 ~/src/react-app
$ cd hello-world/
satom@W1007018N182 MINGW64 ~/src/react-app/hello-world (master)
$ yarn start
yarn run v1.22.4
$ react-scripts start
i ｢wds｣: Project is running at http://192.168.3.8/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\satom\src\react-app\hello-world\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!
You can now view hello-world in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.3.8:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Reference
이 문제에 관하여(Learning React#2 최초 프로젝트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/satomasa0929/items/dd2388aac8402ed4da75
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npx create-react-app hello-world --typescript
$ npx create-react-app hello-world --template typescript
satom@W1007018N182 MINGW64 ~/src/react-app
$ npx create-react-app hello-world --typescript
(1)
Creating a new React app in C:\Users\satom\src\react-app\hello-world.
(2)
The --typescript option has been deprecated and will be removed in a future release.
In future, please use --template typescript.
(3)
Installing packages. This might take a couple of minutes.
(4)
Installing react, react-dom, and react-scripts with cra-template-typescript...
(5)
yarn add v1.22.4
(6)
[1/4] Resolving packages...
(7)
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
(8)
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" 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".
(9)
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 33 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
(10)
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 211.09s.
(11)
Initialized a git repository.
(12)
Installing template dependencies using yarnpkg...
yarn add v1.22.4
[1/4] Resolving packages...
warning @testing-library/react > @types/testing-library__react > @types/[email protected]: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 24 new dependencies.
info Direct dependencies
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @sheerun/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 35.15s.
(13)
We detected TypeScript in your project (src\App.test.tsx) and created a tsconfig.json file for you.
(14)
Your tsconfig.json has been populated with default values.
(15)
Removing template package using yarnpkg...
yarn remove v1.22.4
[1/2] Removing module cra-template-typescript...
[2/2] Regenerating lockfile and installing missing dependencies...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
success Uninstalled packages.
Done in 23.94s.
(16)
Created git commit.
(17)
Success! Created hello-world at C:\Users\satom\src\react-app\hello-world
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!
(18)
We suggest that you begin by typing:
cd hello-world
yarn start
Happy hacking!
satom@W1007018N182 MINGW64 ~/src/react-app
$
satom@W1007018N182 MINGW64 ~/src/react-app
$ cd hello-world/
satom@W1007018N182 MINGW64 ~/src/react-app/hello-world (master)
$ yarn start
yarn run v1.22.4
$ react-scripts start
i ｢wds｣: Project is running at http://192.168.3.8/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\satom\src\react-app\hello-world\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!
You can now view hello-world in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.3.8:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Reference
이 문제에 관하여(Learning React#2 최초 프로젝트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/satomasa0929/items/dd2388aac8402ed4da75텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
