처음부터 애플리케이션 반응

10363 단어 reactwebdevjavascriptwebpack
React 프로그램을 시작하는 몇 가지 방법이 있는데, 가장 유행하고, 가장 간단한 것은 create-react-app 과 Gatsby 정적 페이지이다.이러한 툴을 사용하면 추가 구성 없이 React 애플리케이션을 구축할 수 있지만 다음과 같은 비용이 듭니다.

Usually you wouldn't know what is happening behind the scenes.


더 성숙한 프로그램을 원한다면, 설정의 거의 모든 부분을 조정해야 한다.

저는 코드형 사람 같아요.
The github repo

간단한 것부터.
이 강좌에서 자바스크립트, bash 명령,git, node, npm/yarn의 기본 지식을 습득했다고 가정합니다.모든 예시에서 실을 사용하지만, npm 명령으로 변경할 수 있습니다.
React 패키지, Babel for transformations, Webpack만 포함하는 간단한 설정부터 시작합시다.
먼저 React 애플리케이션에 대한 새 디렉토리를 만들고 시작합니다.
mkdir react-from-scratch && cd $\_
프로젝트를 초기화하고 최소 폴더 구조를 만들고 실의 - y 옵션을 사용하여 초기 문제를 건너뜁니다.
yarn init -y

git init

종속성 설치
다음 명령에서는 React 애플리케이션 개발을 시작하는 데 필요한 종속성과 개발 종속성만 설치합니다.
yarn add react react-dom

yarn add -D @babel/{core,preset-{env,react}} babel-loader webpack{,-cli,-dev-server} html-webpack-plugin
위 명령에서 Brace expansion을 바로 가기로 사용하여 다음과 같은 이름의 npm 패키지를 한 번에 설치합니다.
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin
React에서, 우리는 낡은 브라우저가 이해할 수 없는 현대 ECMAScript 기능을 사용할 것이다. 이것이 바로 우리가 코드를 변환해야 하는 이유이다.이러한 전환은 "transpilling"이며, 웹 패키지 불러오는 프로그램을 통해 실행됩니다.웹팩 마운트는 번역기이기 때문에 웹팩은 사용자가 사용하고 있는 코드 유형을 이해할 수 있습니다. 예를 들어 ECMAScript, css, html 등입니다.
각 패키지에는 다음과 같은 목적이 있습니다.

  • react:react가 뭔지 알아요.스케줄러:너는?

  • react dom: react 구성 요소를dom에 표시하는 데 사용합니다

  • 웹팩: 저희 코드를 생산용으로 포장하는 포장기입니다

  • 웹 패키지 dev 서버: 간단한 웹 서버입니다. 실시간으로 다시 불러오기

  • html 패키지 플러그인: html 파일을 간소화하고 사용하며 브라우저에서 저희 패키지에 서비스를 제공

  • @babel/core: ECMAScript 2015 + 이전 호환 코드로 변환하기 위한 기본 패키지

  • @babel preset env: 현대 JavaScript를 코드와 더 호환되는 사전 정의된 구성으로 변환

  • @babel preset react: JSX 및 기타 react 특정 코드를 JavaScript로 변환하기 위한 구성 및 플러그인

  • babel loader: 번역기 패키지는 저희 코드를 묶는 데 사용됩니다

    • 설정 파일
    먼저 지원 파일이나 구성 파일이 필요합니다.응용 프로그램이 그것이 무엇인지, 그리고 그것을 어떻게 설명해야 하는지 알 수 있도록 합니다.
    먼저 babel 구성 파일(.babelrc):
    {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
    바벨은 우리가 코드와 무엇을 하고 싶은지 알 수 있도록 우리가 초기에 설치한 설정을 포함한다.우리는 바벨에게 "나는 미래에 자바스크립트와 리액션 구성 요소를 작성할 것이다. 나는 당신이 그것을 뒤로 호환되는 자바스크립트 버전으로 바꾸기를 바란다. 고맙습니다."라고 말했다.
    브라우저에 JavaScript(index.HTML)를 로드하려면 HTML 인덱스 파일이 필요합니다.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React From Scratch</title>
  </head>
  <body>
    <!-- Prompt a message in the browser if users disabled JS -->
    <noscript>Your browser does not support JavaScript!</noscript>
    <div id="root"></div>
  </body>
</html>
    이것은 웹 패키지에 우리의 주 자바스크립트 패키지를 DOM에 연결하는 입구점을 제공합니다.
    다음은 웹 패키지 프로필(webpack.config.js)을 작성(또는 복사/붙여넣기)합니다.
    const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
}
    React 애플리케이션을 변환하는 데 필요한 최소 구성여기에서 웹 패키지는 모든 파일을 파이프로 전송한다고 알려 줍니다.js 또는.babel loader 변환기를 통해 jsx 확장을 진행합니다.템플릿으로 사용할 메인 html 파일을 가리킵니다.
    당신은 their documentation.에서 웹 패키지에 대한 더 많은 정보를 얻을 수 있습니다.
    React 항목 파일이 필요합니다. 이 인덱스를 호출할 것입니다.js(src/index.js):
    import React from 'react'
import ReactDOM from 'react-dom'

const App = () => <div>Hello there!!</div>

ReactDOM.render(<App />, document.getElementById('root'))
    이것은 응용 프로그램의 입구점, 루트입니다.프로그램에서 필요한 나머지 코드를 호출할 것입니다.그리고 src 폴더에 있어야 합니다.
    가방에 스크립트를 추가해야 합니다.json 파일:
    {
  ...
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  }
  ...
}
    그리고 yarn start 개발 서버를 시작하고 브라우저에서 변경 사항을 볼 수 있습니다.기본 브라우저에서 탭이 열리고 없으면 http://localhost:8080로 이동하여 응용 프로그램을 봅니다.
    생산 패키지를 구축하려면 실행해야 합니다 yarn build.dist 폴더에서 최종 정적 자원을 볼 수 있습니다.
    이것만 있으면 응용 프로그램 개발을 시작하는 기본 설정이 있습니다.그러나 처음부터 React 프로젝트의 주요 장점 중 하나는 기능을 늘리기 위해 설정을 확장할 수 있다는 것이다.
    다음 기사에서는 다음과 같이 보다 전문적인 애플리케이션에 시도한 방법을 추가하는 방법을 설명합니다.
  • 고급 레이아웃 구성
  • 흔들나무
  • 축소 및 최적화
  • 소스 매핑
  • 기모와 미화
  • 별칭 가져오기
  • 환경 변수
  • 번들 분석
  • 핫 모듈 교체
  • 코드 분할
  • 지연 로드
  • 기본 노선
  • JS의 CSS
  • 자산 로드
    • awk, c, 자바 의 IO 속도 테스트
    델피의 클래스 이해(11) - 클래스에 깊이 들어가는 방법[4] - 접근 제한(또는 가시성)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage