머리말
이전 기사에서는 다음과 같은 세 가지 용어를 소개했습니다.바벨이란 무엇입니까?웹팩이란 무엇입니까?npm이란 무엇입니까?
이 문서에서는 다음을 포함하여 React 프로젝트를 설정하는 과정을 안내합니다.건축 환경,리액트 프로젝트를 생성하고,프로젝트를 시작하고 React 확장을 사용하세요.
구축된 환경
React 앱을 구축할 때 모든 도구는 인터넷에서 다운로드되어야 합니다. 이러한 도구는 이전 기사에서 소개되었습니다.
Node.js
Node.js에는 React 패키지나 기타 패키지를 빠르게 다운로드할 수 있는 npm 서비스가 내장되어 있습니다.
React 도구 Create React App을 설치하려면 컴퓨터에 JavaScript 명령을 설치하여 실행해야 합니다.
오다공식 홈페이지, 오른쪽 상단에서 언어를 선택할 수 있으며 중국어 번체 인터페이스를 지원합니다.
- LTS: 공식적으로 오랫동안 유지 관리되는 안정적인 버전이며 일반적으로 30개월 이상 지속됩니다.
- 현재: 최신 기능이 있지만 안정성이 떨어집니다.
설치 성공 여부를 확인하고 싶다면 Window, MacOS, Linux 상관없이 터미널을 열고 다음 명령어를 입력하면 설치가 완료되었는지 알 수 있습니다.
노드 -v
리액트 프로젝트 생성
방법 1: 공식 웹사이트 CRA 명령 수립
Node 환경이 구축된 후 다음 단계는 제가 선호하는 첫 번째 React 프로젝트를 빌드하는 것입니다.리액트 공식 홈페이지프로젝트를 신속하게 구축하는 다른 방법도 있지만 교육 과정입니다.
Node.js가 성공적으로 설치된 것으로 확인되면 터미널에 다음 명령을 입력하여 해당 위치에 해당 파일과 폴더가 포함된 my-app 폴더를 생성합니다.
npx 생성-반응-앱 내 앱
다음은 폴더 구조입니다. my-app 폴더에는 3개의 폴더와 3개의 파일이 있습니다.
node_modules에는 다양한 패키지가 배치되며, npm install을 통해 설치된 패키지도 이 폴더에 배치됩니다.package.json은 이 프로젝트에 대한 몇 가지 설정을 수행합니다.
/my-app -/public -/node_modules -/src -package.json -README.md -package-lock.json
프로젝트 시작
프로젝트가 빌드된 후 프로젝트를 시작하는 방법은 무엇입니까?
다음 두 줄의 명령을 통해 시작할 수 있습니다. 첫 번째 명령 줄은 my-app 폴더에 들어가는 것이고 두 번째 명령 줄은 프로젝트를 시작하는 것입니다.
CD 내 앱 npm 시작
성공적으로 실행되었다면,이 화면이 종료되면 첫 번째 React 프로젝트가 성공적으로 구축되었음을 의미합니다.
방법 2: 자신만의 환경 구축
이전 기사에서 소개한 Webpack | Npm | Babel을 포함하여 자체 구축된 방법을 사용하여 환경을 구축할 수도 있으며, 전체 프로세스에서는 필요한 기능을 추가하고 구축하는 지침을 사용합니다.
웹팩이란 무엇입니까?
Webpack은 모듈식 패키징 도구입니다. 주요 기능은 JavaScript, CSS, LESS, SCSS, JSX 등을 포함한 프로젝트의 다양한 파일을 하나 이상의 최종 파일로 통합하는 것입니다. 이러한 모듈식 패키징은 개발 효율성을 향상시키는 데 도움이 됩니다. 특히 대규모 프로젝트에서는 코드 재사용 및 테스트를 용이하게 하기 위해 기능을 모듈화하고 분할할 수 있습니다.
Webpack은 단순한 패키징 도구 그 이상입니다. 코드 분할(Code Splitting)과 같은 일련의 강력한 기능도 제공합니다. 이를 통해 코드를 여러 청크로 분할하고 페이지 로딩 속도를 향상시키는 데 필요할 때만 로드할 수 있습니다. 동시에 모듈화(Modulize)는 Webpack의 핵심 개념입니다. 큰 기능을 작은 파일과 기능으로 분할함으로써 프로그램 코드의 구조가 명확하고 유지 관리 및 테스트가 쉽습니다.
npm이란 무엇입니까?
Npm은 세계 최대의 소프트웨어 레지스트리입니다. 모든 대륙의 오픈 소스 개발자는 npm을 사용하여 소프트웨어 모듈 패키지를 공유하고 대여하며, 많은 회사에서도 npm을 사용하여 프라이빗 개발을 관리합니다.
Npm의 전체 이름은 Node Package Manager입니다. Node.js에서 npm cli 도구를 통해 패키지를 설치하고 관리할 수 있습니다.
예를 들어 React 패키지를 사용하려면 터미널에 명령만 입력하면 npm이 자동으로 레지스트리에서 React 프런트엔드 프레임워크를 찾아 node_modules 폴더에 다운로드합니다.
바벨이란 무엇입니까?
바벨은 없어서는 안 될 도구입니다. 주요 기능은 최신 버전의 JavaScript 구문, 특히 ECMAScript 6(ES6)의 구문을 브라우저가 이해하고 실행할 수 있는 이전 버전의 JavaScript로 변환하는 것입니다.
ES6에는 화살표 함수, 템플릿 문자열, 구조 분해 할당 등과 같은 많은 강력한 기능이 도입되었습니다. 그러나 브라우저 지원 수준이 다르기 때문에 브라우저 간 호환성을 보장하려면 컴파일에 Babel을 사용해야 합니다.
또한 JSX 구문을 사용하여 React 애플리케이션을 개발할 때 컴파일을 위해 Babel도 필요합니다. JSX는 React 구성 요소의 구조를 설명하는 데 사용되는 JavaScript 구문 확장입니다. JavaScript로 HTML과 같은 마크업을 작성할 수 있게 해주지만, 브라우저에서는 JSX 구문을 직접 실행할 수 없으므로 Babel을 통해 이를 순수 JavaScript로 변환해야 합니다.
React 빌드에 대한 보충 지침
React 개발자 도구(브라우저 확장) 설치
React Developer Tools는 Google Chrome 브라우저용 확장 도구입니다. 브라우저를 사용하여 연결하세요. 반응 개발자 도구을 누른 다음 설치하고(오른쪽 상단의 'CHROME에 추가' 클릭) 마지막으로 브라우저에서 활성화되어 있는지 확인하세요.
오류 메시지를 찾고 React 애플리케이션의 웹 페이지에서 JavaScript 실행의 일부 로그를 관찰하는 데 사용할 수 있습니다.
React 개발 도구 설치 및 설정
여기서 사용하는 개발 도구는 VS Code인데, 접속해서 사용할 수 있는 무료 편집기입니다. 비주얼 스튜디오 코드 귀하의 컴퓨터 운영 체제에 적합한 버전을 다운로드하여 설치하십시오.
VS Code는 일단 설치되면 완전히 작동하는 도구가 아닙니다. React를 개발하려면 많은 추가 확장 기능을 설치해야 합니다.
결론
React 언어 운동에 관한 기사가 거의 10개 있었지만 우리는 이제 막 React 프로젝트를 수립하고 시작하기 시작했습니다.
제가 프로젝트 시작을 이렇게 늦게 가르치는 이유는 React를 배우기 전에 앞으로 사용할 수 있는 도구인 npm, node.js, webpack, babel 등 많은 개념을 갖추는 것이 매우 중요하기 때문입니다.
앞으로도 계속해서 React 관련 지식과 기술에 대해 설명하겠습니다.
제안사항이나 질문이 있으시면 메시지를 남겨주세요!
리액트 토속 스포츠 시리즈
Babel & Webpack & NPM – React Vernacular Movement 07
React 작동 방식 – React Vernacular Movement 05
JavaScript 고차 함수 – React Vernacular Movement 04
JavaScript Async Await – React Vernacular Movement 03
한국어 
繁體中文 
English 
简体中文 
日本語 
Español