logo

TechCodeview

반응 생성-반응-앱

새로운 React 프로젝트를 시작하는 것은 빌드 도구가 너무 많아서 매우 복잡합니다. React 코드 한 줄을 작성하기 전에 많은 종속성, 구성 파일 및 Babel, Webpack, ESLint와 같은 기타 요구 사항을 사용합니다. Create React App CLI 도구는 모든 복잡성을 제거하고 React 앱을 단순하게 만듭니다. 이를 위해서는 NPM을 사용하여 패키지를 설치한 다음 몇 가지 간단한 명령을 실행하여 새 React 프로젝트를 가져와야 합니다.

그만큼 생성-반응-앱 는 초보자를 위한 훌륭한 도구로, React 프로젝트를 매우 빠르게 생성하고 실행할 수 있습니다. 수동으로 구성을 수행하지 않습니다. 이 도구는 다음과 같은 필수 종속성을 모두 래핑합니다. 웹팩 , 바벨 React 프로젝트 자체에 대해서는 React 코드 작성에만 집중하면 됩니다. 이 도구는 개발 환경을 설정하고, 탁월한 개발자 경험을 제공하며, 프로덕션용 앱을 최적화합니다.

요구사항

Create React App은 다음에 의해 유지됩니다. 페이스북 어떤 작업에서도 작동할 수 있습니다. 플랫폼 예를 들어 macOS, Windows, Linux 등이 있습니다. create-react-app을 사용하여 React 프로젝트를 생성하려면 시스템에 다음 항목을 설치해야 합니다.

  1. 노드 버전 >= 8.10
  2. NPM 버전 >= 5.6

현재 버전을 확인해 보겠습니다. 마디 그리고 NPM 시스템에서.

다음 명령을 실행하여 명령 프롬프트에서 Node 버전을 확인하세요.

 $ node -v

반응 생성-반응-앱

다음 명령을 실행하여 명령 프롬프트에서 NPM 버전을 확인하세요.

 $ npm -v

반응 생성-반응-앱

설치

여기에서는 React를 사용하여 React를 설치하는 방법을 알아 보겠습니다. CRA 도구. 이를 위해서는 아래 주어진 단계를 따라야 합니다.

반응 설치

다음 명령을 사용하면 npm 패키지 관리자를 사용하여 React를 설치할 수 있습니다. React 설치의 복잡성에 대해 걱정할 필요가 없습니다. create-react-app npm 패키지 관리자는 React 프로젝트에 필요한 모든 것을 관리합니다.

 C:Usersjavatpoint> npm install -g create-react-app

새 React 프로젝트 만들기

React 설치가 성공적으로 완료되면 create-react-app 명령을 사용하여 새로운 React 프로젝트를 생성할 수 있습니다. 여기서는 프로젝트 이름으로 'reactproject'를 선택합니다.

 C:Usersjavatpoint> create-react-app reactproject

메모:위의 두 단계를 다음을 사용하여 단일 명령으로 결합할 수 있습니다.npx. npx는 npm 5.2 이상 버전과 함께 제공되는 패키지 실행기 도구입니다.

 C:Usersjavatpoint> npx create-react-app reactproject

반응 생성-반응-앱

위의 명령은 React를 설치하고 'reactproject'라는 이름으로 새 프로젝트를 생성하는 데 시간이 걸립니다. 이제 아래와 같이 터미널을 볼 수 있습니다.

반응 생성-반응-앱

위 화면은 우리 시스템에서 React 프로젝트가 성공적으로 생성되었음을 알려줍니다. 이제 브라우저에서 애플리케이션에 액세스할 수 있도록 서버를 시작해야 합니다. 터미널 창에 다음 명령을 입력합니다.

 $ cd Desktop $ npm start

NPM은 서버를 시작하고 기본 서버인 http://localhost:3000에서 애플리케이션에 액세스하는 패키지 관리자입니다. 이제 다음 화면이 나타납니다.

반응 생성-반응-앱

다음으로 코드 편집기에서 프로젝트를 엽니다. 여기서는 Visual Studio Code를 사용하고 있습니다. 우리 프로젝트의 기본 구조는 아래 이미지와 같습니다.

반응 생성-반응-앱

React 애플리케이션의 루트 디렉터리에는 여러 파일과 폴더가 있습니다. 그 중 일부는 다음과 같습니다:

    node_modules:여기에는 React 라이브러리와 필요한 기타 타사 라이브러리가 포함되어 있습니다.공공의:이는 애플리케이션의 공개 자산을 보유합니다. 여기에는 React가 기본적으로 요소에 애플리케이션을 마운트하는 index.html이 포함되어 있습니다.소스:여기에는 App.css, App.js, App.test.js, index.css, index.js 및 serviceWorker.js 파일이 포함되어 있습니다. 여기서 App.js 파일은 항상 React에서 출력 화면을 표시하는 역할을 담당합니다.패키지-lock.json:npm 패키지가 node_modules 트리 또는 package.json을 수정하는 모든 작업에 대해 자동으로 생성됩니다. 출판할 수 없습니다. 최상위 패키지가 아닌 다른 위치를 찾으면 무시됩니다.패키지.json:프로젝트에 필요한 다양한 메타데이터를 담고 있습니다. 이는 프로젝트를 식별하고 프로젝트의 종속성을 처리할 수 있는 정보를 npm에 제공합니다.읽어보세요.md:React 주제에 대해 읽을 수 있는 문서를 제공합니다.

반응 환경 설정

이제 소스 >> App.js 파일을 저장하고 화면에 표시할 내용을 변경합니다. 원하는 대로 변경한 후, 구하다 파일. 파일을 저장하자마자 Webpack이 코드를 다시 컴파일하고 페이지가 자동으로 새로 고쳐지고 변경 사항이 브라우저 화면에 반영됩니다. 이제 원하는 만큼 구성요소를 생성하고 새로 생성된 구성요소를 App.js 파일과 그 파일은 우리의 메인에 포함될 것입니다 index.html Webpack으로 컴파일한 후 파일입니다.

다음으로, 프로덕션 모드용 프로젝트를 만들려면 다음 명령어를 입력하세요. 이 명령은 가장 최적화된 프로덕션 빌드를 생성합니다.

 $ npm build