create React app 없이 React 프로젝트를 설정하는 방법

이 단계별 지침은 "React 프로그램 만들기"스크립트를 사용하지 않고 React 프로그램을 처음부터 설정하는 방법을 설명합니다.

면책 성명:


나는 이 안내서의 첫머리에서 코드를 작성할 때 "create-react-app" 스크립트를 사용하는 것이 절대 틀림없다고 지적하고 싶다.과거에 나는 이것이 매우 도움이 되고 시간을 절약할 수 있는 React 응용 프로그램을 설정하는 방법이라는 것을 발견했다. 특히 내가 React를 막 배웠을 때이다.이 스크립트는 Webpack과 Babel을 설정하여 응용 프로그램 개발에 전념할 수 있습니다.설정 과정에 대한 더 많은 정보와 이 도구와 React 응용 프로그램의 관계를 알고 싶다면, 이 안내서에 소개된 절차를 따르시기를 강력히 권장합니다.

개시하다


1단계:항목 설정


우선, 컴퓨터에서 사용할 수 있도록 다운로드하고 설치해야 합니다. Node.js 또는 Yarn
설치 후 프로젝트에 빈 디렉터리를 만들어야 합니다.터미널에 다음 명령을 작성하여 새 디렉토리를 생성하고 입력할 수 있습니다.
 > mkdir myProject              
 > cd myProject

2단계: 프로젝트 초기화


현재 디렉터리가 있습니다. 프로젝트를 초기화하고 패키지를 만들어야 합니다.json 파일. 
이 파일은 다음과 같습니다.
  • 프로젝트에 의존하는 모든 패키지 목록
  • 프로젝트에서 이 패키지를 사용할 수 있는 버전semantic versioning rules
  • 지정
  • 이 파일을 사용하여 빌드를 복제할 수 있으므로 다른 개발자와 작업을 공유하기 쉽습니다
  • .
    터미널에서 단일 명령을 실행하여 프로젝트를 초기화할 수 있습니다.
    ##for node use:
     > npm init
    
    ##for yarn use:
     > yarn init
    
    이것은 관련 패키지를 만들기 위해 항목에 대한 정보를 입력해야 한다는 일련의 명령을 제시할 것입니다.json 파일을 만들 수 있습니다.입력한 정보는 json 대상으로 가방의 맨 위에 있습니다.json 파일.(프로젝트를 개발할 때 언제든지 이 정보를 변경할 수 있기 때문에 답안을 잠시 보류하고 싶으면 가능합니다.)
     package name: (myProject)
     version: (1.0.0)
     description: //enter a short description about your project 
     here
     entry point: (index.js)
     test command: //enter your test command here e.g test
     git repository: //enter the link for your github repo (if 
     you already cloned a github repo and created your directory 
     inside of it, the repo link will automatically appear here)
     keywords: //enter any optional keywords here
     author: Rasveer Bansi
     license: (ISC)
    
    다음에 my 프로젝트 디렉터리에 프로젝트의 모든 원본 코드를 저장할 수 있는 src 폴더를 만들어야 합니다.
    > mkdir src 
    
    이제 프로젝트 구조가 다음과 같아야 합니다.
    myProject 
    | - src 
    

    3단계: 웹 패키지 설정


    Webpack는 브라우저에 코드를 더 잘 적용할 수 있도록 프로그램을 처리하고 연결하는 도구입니다.응용 프로그램은 자바스크립트, node 모듈, 이미지, CSS 스타일 등 다시 사용할 수 있는 코드 모듈을 포함하고 있습니다.Webpack은 응용 프로그램이 이 코드를 어떻게 사용하는지에 따라 코드를 분리하여 브라우저가 쉽게 따를 수 있도록 합니다.
    터미널에서 다음 명령을 실행하여 Webpack을 설치할 수 있습니다.
    ##for node use:
     > npm install --save-dev webpack webpack-dev-server webpack-cli
    
    ##for yarn use: 
     > yarn add webpack webpack-dev-server webpack-cli
    
    다음에 웹 패키지를 만들어야 합니다.배치하다.my Project 디렉토리의 js 파일입니다.이 파일에서 다음 코드를 저장해야 합니다.
    const path = require('path');
      module.exports = {
    
    //define entry file and output
        entry: './src/index.js',
        output: {
         path: path.resolve('dist'),
         filename: 'main.js'
        },
      }
    
    엔트리 - 생성에 포함할 최상위 파일 세트입니다.이것은 하나의 파일일 수도 있고, 하나의 파일 그룹이 될 수도 있다.
    (주의: 위의 예에서 우리는 파일 index.js를 전달했다).
    출력 - 이것은 출력 설정을 포함하는 대상입니다.위의 예에서, 우리는 Webpack이 생성하고자 하는 파일 이름 (main.js) 과 이 파일이 저장해야 할 항목 경로를 지정했다.

    4단계: Babel 설정


    Babeljavascript 컴파일러로 ES6 코드를 호환되는 버전으로 변환할 수 있기 때문에 오래된 브라우저에서도 프로그램을 실행할 수 있습니다.
    Babel을 설치하려면 터미널에서 다음 명령을 실행해야 합니다.
    ##for node use:
     > npm install --save-dev babel-core babel-loader 
     babel-preset-es2015 babel-preset-react @babel/core 
     @babel/preset-env @babel/preset-react
    
     > npm install --save-dev babel-plugin-transform-object-rest-spread 
    
    ##for yarn use:
     > yarn add  babel-core babel-loader babel-preset-es2015
     babel-preset-react @babel/core @babel/preset-env 
     @babel/preset-react
    
     > yarn add babel-plugin-transform-object-rest-spread
    
    이제 바베타를 만들어야 해.배치하다.my Project 디렉토리의 json 파일입니다.이 파일에서 다음 코드를 저장해야 합니다.
    {
      "presets":[
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "env": {
        "test": {
          "plugins": ["@babel/plugin-transform-modules-commonjs"]
        }
      },
      "plugins": [ "transform-object-rest-spread" ]
    }
    
    미리 설정하다 - 이것은 이전에 설치된react와es2015를 사용하여 코드를 낡은 브라우저와 호환되는 내용으로 컴파일할 수 있습니다.설치를 통해"
    /미리 설정된 환경 "모든 자바스크립트 버전을 포함하고 있습니다.
    플러그 인 - 특정 ES6 모듈을 기존 브라우저와 호환되는 것으로 컴파일하기 위해 플러그인을 설치할 수 있습니다.
    다음은 웹 패키지에 바베타 마운트를 추가해야 합니다.배치하다.js 파일.이를 위해, 모듈 대상을 만들고, 이 대상에rules라는 그룹을 만들어야 합니다.이 그룹은 모든 마운트 프로그램을 하나의 대상으로 저장합니다. 이 대상들은 키'loader '로 정의됩니다.
    이제 전체 파일이 다음과 같이 표시됩니다.
    const path = require('path');
     module.exports = {
     //define entry file and output
      entry: './src/index.js',
      output: {
        path: path.resolve('dist'),
        filename: 'main.js'
      },
     //define babel loader
      module: {
        rules: [
          { test: /\.jsx?$/, loader: 'babel-loader', 
            exclude: /node_modules/ 
          },
          { test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          }
        ]
      }
    };
    
    테스트 - 로드 프로그램에서 실행할 파일 형식을 테스트하는 정규 표현식 (regex)보시다시피, 이 예는 jsx ES6 확장자가 있는 모든 파일을 테스트하기 위해 regex를 추가했고, CSS 파일에 단독 대상을 만들었습니다.
    적재기 - 사용할 마운트 프로그램의 이름 (예를 들어 babel 마운트 프로그램이나 스타일 마운트 프로그램/css 마운트 프로그램).
    빼놓다 - 로드 프로그램이 어떤 파일을 제외하거나 무시해야 하는지 알려 줍니다.이 예제에서는 node modules 폴더를 제외하고 무시합니다.

    5단계: 입력 파일 설정


    현재 프로젝트 설정을 설정하셨습니다(예!),응용 프로그램 개발을 시작하려면 항목 파일을 만들어야 합니다.
    두 개의 엔트리 파일을 만드는 것부터 시작할 수 있습니다.
  • 색인.src 폴더의 js 파일
  • 색인.my Project 디렉토리의 html 파일
  • 파일 구조는 이와 유사해야 합니다
     | - src
     |    | - index.js
     |
     | - index.html
     | - webpack.config.js
     | - babel.config.json
     | - package.json
    
    색인js
    이것은 같은 색인이다.패키지 내 입구점으로 설정된 js 파일입니다.배치하다.js 파일.현재 아래 코드를 넣을 수 있지만, 프로그램 개발을 시작하면 이 파일을 업데이트해서 응용 프로그램과 관련된 시작 구성 요소를 포함해야 합니다.
    console.log('hello world!'); 
    
    색인html
    이 파일은 응용 프로그램에 구조를 제공하고 웹 서버에서 기본 문서로 사용됩니다.이것은 브라우저를 브라우저를 위한 패키지 파일로 가리키는 스크립트 표시를 포함합니다.
    다음 코드를 색인에 넣으십시오.html 파일:
    <!DOCTYPE html>
    <html>
       <head>
         <meta charset="utf-8">
         <title>React</title>
       </head>
       <body>
         <div id="root"></div>
         <script src="main.js"></script>
       </body>
    </html>
    
    이 코드는 브라우저가 웹 패키지 파일 (main.js) 을 가리키는 탭입니다.

    6단계: 프로젝트 스크립트 설정


    현재 항목 파일을 설정했습니다. 프로그램이 무엇을 하는지 알려주기 위해 스크립트를 작성해야 합니다.응용 프로그램을 처리할 때 터미널에서 사용하는 명령입니다.이제 두 개의 스크립트를 작성해서 프로그램을 구축하고 시작할 수 있습니다.
    이를 위해서는 가방에scripts 대상을 만들어야 합니다.json 파일.이 대상에서, 각각의 스크립트를 각각의 스크립트 대상으로 작성할 것입니다.포함할 모든 스크립트 대상에 대해 키는 스크립트를 실행하는 데 필요한 명령 키이고 값은 프로그램이 따라야 할 명령입니다.
    다음 스크립트 대상을 가방에 넣으십시오.json 파일
    "scripts": {
       "start": "webpack serve --mode development --env 
     development",
       "build": "webpack"
    }
    
    현재 터미널 시작 프로그램을 사용하려면 'start' 키가 있는script 대상을 사용할 수 있습니다.이것은 응용 프로그램에서 Webpack 서버를 실행하는 것을 알려 줍니다.
     ##for Node use:
     > npm run start
    
     ##for Yarn use:
     > yarn start
    

    단계 7: React 설정


    네가 가장 필요로 하는 것은 설정React이다. 그러면 react 응용 프로그램을 개발할 수 있다.
    이를 위해서는 터미널에서 다음 명령을 입력하여 my Project 디렉터리에 React를 설치해야 합니다.
     ##for Node use:
     > npm install --save react react-dom
    
     ##for Yarn use:
     > yarn add react react-dom
    
    이제 설정이 완료되었으므로 React 애플리케이션 개발을 시작할 수 있습니다.🎉

    좋은 웹페이지 즐겨찾기