セットアップは、WebpackとBabelと反応します

私はこれでWebpackで基本的なプロジェクトを設定する上で行ったので、ここでちょうどあなたの反応プロジェクトを取って、WebpackとBabelを使用するためにそれをアップグレードする方法に集中するつもりです.
忘れてしまった場合、Webpackは、インポートおよびエクスポート文と依存関係のグラフを使用して、コードを別のファイルにコンパートメントにしておくのに役立ちます.
そして、バベルは、どのように時代遅れの読み取りとあなたのコードを理解しても、任意のブラウザを確認します!
もう一度空のディレクトリで始めましょうnpm init -y そのパッケージを取得します.アップアンドランニング.次に、デモサイトをアップロードして実行するためにいくつかのパッケージをインストールしましょう.

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

我々は、反応コードを解析するためにそれらのBabelプリセットを必要とします.私たちはWebpackを必要としています.それは、この記事全体が何であるかということです.そして、devサーバは、Webpackを使ったライブサーバーを組み込むようにしています.我々は反応を必要とし、反応を使用できるようにDOMを反応させ、最終的にはJavaScriptのためのユーティリティ関数のライブラリであるLoダッシュをつかむ.
コーディングを得る前にファイル構造を設定しましょう.

まず、Webpackを設定しましょう.設定.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はホストにファイルを探しているところだけです.
モジュールプロパティも追加しました.ここで我々はバベルを設定します.テストは、それらの拡張子を持つファイルがコンパイルされることを示します.次に、ローダ、バベルローダ、およびプリセットを指定して、コードの変換方法を決定します.
バベルプラグインの束のプリセットの負荷を自動的にデフォルトの環境です.これらの2つは最も基本的であり、間違いなく仕事を成し遂げるでしょう、しかし、探索するためにそこに多くのオプションがあります.場合は、バベルをチェックすることができます個々のプラグインを探るdocs , または、それぞれのプリセットがテーブルにもたらすものについて特に読みたい場合は、これらをチェックしてくださいdocs .
今すぐあなたのインデックスを設定します.正確に前にHTML.それはちょうど“app . js”のソースを持つ単一のスクリプトタグを持っている必要があります、それは“app”のIDを持つdivを持つ必要があります.
我々は、インターネットからいくつかのプレースホルダのポストを取得し、プレースホルダデータを表すポストの束を表示するポストリストコンポーネントを表示するアプリケーションを作成する予定です.
では、いくつかの反応コードを書き始めましょう.エントリーポイントインデックスから始めます.js

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

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

我々は、反応、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;

あなたは、我々がパズル、ポストリストの我々の次の作品と同様にここで反応と成分を輸入するのを見ることができます.これは私たちがポストのリストと呼ぶものです.
我々は、我々のComponentDidmountのダミーデータのデータベースからすべての我々のポストを得ます、その力学のことを心配しないでください、ちょうど一緒にすべてのこれらのパーツをフックすることに集中しましょう.
それで、我々のポストリストを見ましょう.JSXネクスト.私たちは、ここでどのようにしているかを見るために、ここでLodashをインポートしようとしています.しかし、あなたは簡単にちょうど地図でビルトインを使うことができました.
マップを必要とするので、LoDashからインポートしているオブジェクトを変更し、マップ関数をそのまま保存します.我々がちょうど呼ぶことができるより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;

私たちの鎖を下に置きましょう.日本学術振興会ここで我々は反応をインポートし、ポストをエクスポートする必要があります.

import React from 'react';

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

export default post;

ああ!我々は、すべての例をコードを反応させた!今、私たちのファイルを変更することができますし、ローカルホストのサイトライブに更新を取得できるように我々のdevサーバーを起動するスクリプトを追加しましょう.それで、あなたのパッケージにスクリプトを加えてください.JSONファイル.

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

だから今あなたが実行するnpm start 端末では、簡単にデバッグ、ライブ更新、ローカルサーバーのブランドの新しいアプリケーションを示す必要があります!
もう一度、これは非常に単純なアプリですが、うまくいけば、これはどのようにインポートとエクスポート文を使用する方法を参照するのに役立つ大規模なアプリケーションにスケーリングすることができます.そして、バンドルを使ってコンパイラを作る方法を学ぶことは、とても役に立つ知識になるでしょう.