create-react-app 배우기

바로 요점으로 들어가 보겠습니다.
React 개발자가 되고 싶다면 create-react-app을 알아야 합니다.

하지만...

CREATE-REACT-APP이란 무엇입니까?

Create-react-app은 React 애플리케이션에 필요한 모든 도구를 설정하는 데 도움이 되도록 Facebook에서 구축한 도구입니다.

이 환상적인 도구에 대해 알아보기 전에 Javascript ES6을 알고 컴퓨터에 node.js를 설치해야 합니다.

반응 앱을 빌드하려면 CSS와 HTML도 필요합니다.

이제 터미널을 열고 npx create-react-app 명령 다음에 공백과 애플리케이션 이름을 입력할 차례입니다.

npx create-react-app myapp

설치가 완료되면 터미널에 성공 메시지가 표시됩니다.

프로젝트 폴더를 탐색하고 명령을 실행합니다npm start.
localhost:3000에서 개발 서버를 시작합니다.



텍스트 편집기에서 프로젝트 폴더를 열고 create-react-app에 의해 생성된 폴더 구조를 확인합니다.

Javascript 라이브러리를 처음 사용하는 경우 프로젝트 폴더에 있는 파일 수에 겁을 먹을 수 있습니다.

가장 중요한 파일을 살펴보겠습니다.

패키지.JSON 파일

여기에는 프로젝트를 빌드하는 데 필요한 종속성이 포함되어 있으며 이름 및 버전과 같은 애플리케이션에 대해서도 설명합니다.
이 파일 내에서 앱 이름을 쉽게 변경할 수 있습니다.

SRC 폴더

UI 및 애플리케이션 기능을 빌드하는 데 필요한 모든 JS 및 CSS 파일을 이 폴더에 넣습니다.
생성하려는 모든 구성 요소는 src 폴더 안에 있어야 합니다.

App.js 파일은 앱의 래퍼 구성 요소입니다.
다른 모든 React 구성 요소를 위한 컨테이너입니다.
index.js 파일은 앱 구성 요소를 렌더링할 위치를 React에 알려줍니다.

공개 폴더

공용 폴더에서 index.html 파일에 초점을 맞춥니다.
이 파일에는 일반 HTML이 포함되어 있습니다.
React는 index.js 파일 내부의 render 함수를 통해 id가 'root'인 div 내부에 코드를 삽입합니다.

App.js 파일을 편집하고 어떤 일이 일어나는지 봅시다!
래퍼 div 내부의 코드를 삭제하고 프로젝트에서 logo.svg 파일도 제거하고 App.js에서 import 문을 제거하는 것을 잊지 마십시오.

브라우저로 돌아가면 완전히 빈 페이지가 표시됩니다.

App.js 파일 내에서 클래스 App이 있는 div 사이에 H1 HTML 태그를 작성해 보십시오.

function App() {
  return (
    <div className="App">
     <h1>Learning React</h1>
    </div>
  );
}

React는 자동으로 페이지를 업데이트합니다.

브라우저로 돌아가면 멋진 **LEARNING REACT **헤더가 페이지에 표시됩니다.

설정이 완료되면 앱을 코딩할 준비가 된 것입니다.