분류 Reactjs

Create React App 시작하기 (1)

컨텐츠 정보

  • 조회 280 (작성일 )

본문

Create React App는 간단한 앱을 빌드 하는 데 널리 사용되는 툴체인입니다. 이 게시물의 목표는 Create React App의 구성 요소를 보다 심도 있게 설명하여 개발 환경에 대한 제어 및 신뢰도를 향상 시키는 것입니다.


https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/ 


소개 


React 앱 생성으로 해결되는 내용을 이해하기 전에 먼저 툴체인이 무엇인지 알아보십시오. eLinux.org는 이를 “특정 단계에 의해 서로 연결 (또는 연결) 된 고유한 소프트웨어 개발 도구 세트”라고 설명합니다.


즉, 모든 소프트웨어 개발 프레임워크는 특정 기능을 수행하도록 최적화 된 다양한 지원 도구로 구성됩니다. 예를 들어, C ++ 개발에서는 프로젝트가 상당히 큰 경우 코드를 컴파일하기 위한 컴파일러와 CMake와 같은 빌드시스템이 모든 종속성을 관리해야 합니다. 이 경우 컴파일러와 CMake는 툴체인의 일부가 됩니다.


React 개발에서 서로 다른 툴체인은 제품 개발에 대한 서로 다른 요구 사항을 충족시킵니다. 예를 들어 Next.js는 서버 렌더링 웹 사이트를 만드는 데 적합하며 GatsbyJS는 블로그 및 뉴스 레터와 같은 정적 콘텐츠 중심 웹 사이트에 최적화되어 있습니다.


React 앱 만들기는 툴체인입니다. 특히 SPA (Single-page Application)를 구축하고 React를 학습 ( "hello, world"애플리케이션을 구축하기 위해)하기 위해 React 커뮤니티에서 권장합니다. 최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고 멋진 개발자 경험을 제공하며 제작을 위해 앱을 최적화합니다.


이 문서를 작성할 당시 컴퓨터에 Node ≥ v6.0.0 및 npm ≥ v5.2.0이 있어야 합니다.


역사 


Create React App는 Joe HaddadDan Abramov가 만들었습니다. GitHub 리포지토리는 세계 각지의 몇몇 오픈 소스 개발자와 함께 제작자가 활발하게 유지 관리합니다. 기고에 관심이 있다면 저장소의 기고 페이지를 시작하는 것이 좋습니다.


시작하기 


이제 React 앱 만들기에 대한 관련 컨텍스트가 준비되었으므로 설치를 시작하겠습니다. 이 학습서에서는 웹 페이지에 식당을 표시하고 사용자가 평가할 수 있는 간단한 SPA를 작성하려고 합니다.


설치 


터미널에서 다음 npx 명령을 실행하여 React App 작성을 사용하여 응용 프로그램을 설치하고 부트 스트랩하십시오. 응용 프로그램을 "요리 레스토랑"이라고 하겠습니다.


~ npx create-react-app rate-restaurants

이 명령은 몇 초 동안 실행되며 rate-restaurants라는 새 디렉토리에서 베어 리본 React 애플리케이션을 작성한 후 행복하게 종료됩니다. 이제 디렉토리에 cd. 디렉토리는 처음에 다음과 같습니다.

0*QW77i9ziLT52SRq7 

디렉토리 구조


각 폴더가 무엇인지 이해합시다 :


node_modules 


이 폴더는 npm 시스템의 일부입니다. npm은 현재 패키지 루트의 ./node_modules에 패키지의 로컬 설치를 입력합니다. 기본적으로 "import"문을 호출하여 사용하려는 패키지가 여기에 있습니다.


public 


이 폴더에는 index.html 및 manimani.json 파일이 있습니다. 공용 폴더 내의 파일을 살펴 보겠습니다.


index.html 


이 index.html build/index.html을 생성하기 위한 템플릿으로 사용되며, 결국 브라우저에서 제공되는 기본 파일입니다. 이 파일의 내용을 살펴 보겠습니다 :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>