많은 방법들이 React를 사용하여 웹 페이지나 웹 응용 프로그램을 구축할 수 있다.다행히도 페이스북은 이 과정을 간소화하기 위해 명령줄을 만들었다.
이 글은 설치 명령을 사용하는 방법을 알려주고 설치된 파일을 빠르게 볼 수 있도록 합니다.

예비 지식

React 프로젝트를 만들려면 다음을 이해하고 설치해야 합니다.

무엇이 무엇인지 이해Node.js and NPM: 본고에서 언급한 행화를 익히고 일부 항목의 배후 상황을 이해한다.

설치Node.js LTS(장기 지원 버전): 웹에서 자바스크립트 라이브러리를 다운로드하고 실행할 수 있습니다.

: 명령행을 능숙하게 사용한다.

Install VSCode: 이 강좌를 배우려면 텍스트 편집기가 필요합니다.VisualStudio 코드는 무료이며 개인화된 설정을 위한 플러그인이 많습니다.

: VS 코드에 자동 포맷 플러그인을 설치하는 간단한 동영상을 소개합니다.

설치 명령

시작하려면 공식 Create React Application 명령을 사용합니다.

npx create-react-app your-project-name

npx는 노드 패키지를 설치하는 새로운 방법이다.

create-react-app와 -는 단어 사이에 있다.

your-project-name는 프로젝트 폴더의 이름입니다.너는 그것에 어떤 이름을 지어도 된다.

시작 명령

항목을 설치한 후 코드 편집기에서 해당 항목을 열고 다음 명령을 실행합니다.

npm start

이 화면이 표시되면 프로젝트가 시작되고 실행 중임을 나타냅니다.🎉
참고:
웹 브라우저의 URL을 봅니다.아마 localhost:3000일 거예요.Create React Application이 애플리케이션을 디버깅하기 위해 가상 서버를 만들었기 때문입니다.

프로젝트 구조, 빠른 탐색

당신의 프로젝트를 설치했으니, 그 프로젝트에 무엇이 포함되어 있는지 탐색해 봅시다.이러한 분야에 중점을 두겠습니다.

The overal project folder .

The src folder .

The App.js file .

 

프로젝트 폴더:

새 프로젝트에서 볼 수 있는 하위 폴더와 파일입니다.

node_modules/: 프로젝트의 모든 의존 항목을 포함하는 폴더입니다.자바 세계의 Gradle이나 Maven을 생각해 보세요.

public/: 아이콘과 React 프로그램을 실행하는 웹 페이지가 있는 폴더입니다.

src/: 모든 프로젝트 파일을 배치하는 폴더입니다.

.gitignore: 알다시피 Git에서 저장소에 업로드하지 말아야 할 파일을 알려주기 위해서입니다.

package-lock.json: 아래에 설명된 파일 백업 복사본입니다.

package.json: 프로젝트 정보를 어떻게 실행하는지 포함하는 파일입니다.Git 클론 프로젝트를 사용할 때마다 설치할 종속성 목록, 프로젝트를 시작하는 터미널 명령 등

README.md: 프로젝트 내용, 설치, 사용, 의존 관계 등을 작성하는 데 사용되는 파일

 

소스 폴더 세부 정보:

이제 src/ 폴더를 살펴보겠습니다.

App.css: 응용 프로그램 구성 요소를 담당하는 CSS입니다.

App.js: 이것은 당신 프로젝트의 입구점입니다.Main에 해당합니다.자바에 있는 자바.

App.test.js: 응용 프로그램의 테스트 파일입니다.js.

index.css: 이 파일에는 색인에 대한 전역 글꼴 설정이 있습니다.공공 폴더의 html.

index.js: React 프로젝트를 포함하는 초기화 파일입니다.너는 이 점을 주목할 필요가 없다.응용 프로그램만 사용합니다.js.

logo.svg:React의 원자 표지.기본적으로 응용 프로그램에서 이미지를 가져오는 방법이 표시됩니다.js.

reportWebVitals.js: 페이스북은 응용 프로그램과 React 라이브러리를 개선하기 위해 응용 프로그램의 성능을 보고할 것이라고 밝혔다.

setupTest.js: 말 그대로 전체 프로젝트의 단원 테스트를 설정했다.

 

응용 프로그램 파일:

import logo from "./images/logo.svg";
import "./styles/index.css";
import "./styles/App.css";

export default function App() {
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
}

참고: 시각적 혼란을 없애는 기본 응용 프로그램 파일의 간략한 버전입니다.다음 작업을 위해 복사하고 붙여넣을 수 있습니다.
코드를 분석해 보겠습니다.

우선 프로젝트 폴더의 경로에서 가져옵니다logo.조직을 편리하게 하기 위해서, 나는 images/라는 폴더를 만들었다.

그리고 수입index.css과App.css.조직을 편리하게 하기 위해서, 나는 이 파일들을 src/ 폴더에서 styles/ 폴더로 이동했다.

className="": React는 className가 아닌 class로 코드와 일반 HTML 코드를 구분합니다.

가져오는 것logo이 표시된 src 속성에 나타나는 것을 볼 수 있습니다.이것이 바로 React가 변수를 표기에 전달하는 방식이다.

결론

프로젝트를 설정하고 각 파일의 역할을 파악한 후 다음 항목으로 이동합니다.
완성된 코드를 보고 싶으면 파일을 어떻게 재구성하는지 보십시오. 이 link 를 열고 지점 <img> 을 검사할 수 있습니다.

크레디트

표지 사진: 사진작가Surface가 Unsplash