웹 팩 및 Babel에 대한 반응 설정

저는 이 글에서 웹 팩을 사용하여 기본 프로젝트를 설정하는 방법을 소개했습니다. 그래서 여기서 React 프로젝트를 어떻게 사용하는지 중점적으로 소개하고 웹 팩과 Babel을 사용하는 것으로 업그레이드하겠습니다.
잊어버리면 Webpack은 가져오기와 내보내기 문장과 의존 관계도를 사용하여 코드를 다른 파일로 구분하는 데 도움을 줍니다.
바벨은 아무리 유행이 지났어도 코드를 읽고 이해할 수 있는 브라우저를 확보할 것입니다!
빈 디렉터리부터 다시 시작해서 npm init -y 패키지를 가져옵니다.json을 시작하고 실행합니다.그리고 프레젠테이션 사이트를 시작하고 실행하기 위해 몇 개의 소프트웨어 패키지를 설치합시다.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save react react-dom lodash

React 코드를 해석하기 위해서는 이 바벨탑이 필요합니다.우리는 웹 팩이 필요하다. 왜냐하면 이것이 본고의 주제이기 때문이다. 개발 서버는 단지 우리가 실시간 서버와 웹 팩을 결합시킬 뿐이다.React와 React DOM이 있어야만 React를 사용할 수 있습니다. 마지막으로 lodash, 자바스크립트 실용 함수 라이브러리를 살펴보겠습니다.
인코딩을 시작하기 전에 파일 구조를 만듭니다.

우선, 웹 패키지를 설정합시다.구성jsx 코드를 컴파일할 수 있도록 js 파일입니다.

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'app.js',
    path: __dirname + 'build',
    publicPath: '/'
  },
  devServer: {
    contentBase: './build'
  },
  devtool: 'eval-source-map',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
}

익숙해 보일 거예요.우리는 이전과 같이 입력과 출력을 설정한다.그러나 devServer 속성을 추가했습니다. 이것이 바로 devServer가 관리할 파일을 찾는 곳입니다.
우리는 또 하나의 모듈 속성을 추가했다.이곳이 바로 우리가 바벨을 세운 곳이다.테스트는 단지 이 확장자를 가진 모든 파일을 컴파일해야 한다는 것을 나타낼 뿐이다.그리고 우리는 코드를 어떻게 변환할지 확인하는 데 사용할 플러그인,babel 플러그인을 지정합니다.
기본 환경은 기본적으로babel 플러그인에 자동으로 불러옵니다.이 두 가지는 가장 기본적인 것이기 때문에 틀림없이 일을 완성할 것이지만 아직 탐색해야 할 선택이 많다.하나의 플러그인을 탐색하고 싶다면babeldocs을 보거나 표에 미리 설정된 모든 내용을 구체적으로 읽고 싶다면 이것들docs을 보십시오.
인덱스를 설정합니다.html은 이전과 완전히 같다.이것은 "app.js"라는 스크립트 표시만 있고 id가 "app"인 div만 있어야 합니다.
우리는 인터넷에서 자리 표시자 게시물을 얻고 댓글 목록 구성 요소를 표시합니다. 이 구성 요소는 자리 표시자 데이터를 표시하는 댓글을 표시합니다.
React 코드를 작성하기 시작합니다.우리는 입구점 색인부터 시작할 것이다.js.

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

React, ReactDOM, 응용 프로그램 자체를 가져와서 Dom에 보여주기만 하면 됩니다.쉬웠어
이제 우리는 그것을 한 단계 끌어올려서 우리의 응용 프로그램을 봅시다.js.

import React, { Component } from 'react';
import PostList from './PostList.jsx';

class App extends Component {
  constructor() {
    super();
    this.state = {
      posts: [],
    };
  }

   componentDidMount () {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        res.json()
          .then(posts => {
            this.setState({posts});
          });
      });
  }

  render () {
    return (
      <div>
        <PostList posts={this.state.posts} />
      </div>
    );
  }
}

export default App;

여기에서 React와 Component, 그리고 우리의 다음 퍼즐, PostList를 가져온 것을 보실 수 있습니다.우리는 댓글 리스트라고 부른다.
우리의 모든 게시물은componentDidMount의 가상 데이터 데이터베이스에서 얻은 것이므로 그 메커니즘을 걱정하지 말고 이 모든 부분을 연결시키는 데만 주목하자.
우리 게시물 목록을 봅시다.jsx 다음.우리도 로다쉬를 가져올 것입니다. 어떻게 완성되었는지 보기 위해서입니다. 하지만 내장된 지도를 쉽게 사용할 수 있습니다.
우리는 지도만 필요로 하기 때문에 로다쉬에서 가져온 대상을 분해하고 지도 기능만 저장합니다.우리는 map 이 아니라 _.map 를 직접 호출할 수 있다.

import React from 'react';
import { map } from 'lodash';
import Post from './Post.jsx';

const postList = ({posts}) => (
  <div>
    {map(posts, post => <Post key={post.id} post={post} />)}
  </div>
);

export default postList;

우리들은 우리의 체인을 따라 끝까지 가자, 포스터.jsx.여기서 우리는 게시물을 가져오고 내보내기만 하면 된다.

import React from 'react';

const post = ({post: {title, body}}) => {
  return (
    <div>
      <p>{title}</p>
      <p>{body}</p>
    </div >
  );
}

export default post;

그래우리의 모든 예시 코드가 준비되었다!이제 개발 서버를 시작하기 위해 스크립트를 추가합니다. 그러면 파일을 변경하고 로컬 위탁 관리 사이트를 실시간으로 업데이트할 수 있습니다.따라서 가방에 스크립트를 추가합니다.json 파일.

"start": "webpack-dev-server --config ./webpack.config.js"

따라서 현재 터미널에서 실행되고 있을 때 npm start 디버깅하기 쉽고 실시간으로 업데이트되는 로컬 서버가 당신의 새로운 응용 프로그램을 표시할 것입니다!
마찬가지로, 이것은 매우 간단한 응용 프로그램이지만, 가져오기와 내보내기 문장의 사용을 더욱 큰 응용 프로그램으로 확장하는 방법을 이해하는 데 도움이 되기를 바랍니다.컴파일러를 귀속기와 함께 작동하는 방법을 배우는 것은 매우 유용한 지식이 될 것이다.