WebPackによる反応アプリケーションの構築

10243 ワード

Reactは現在、ウェブのための最も人気がある、現代のUIフレームワークです.
それは機能的で、宣言的なスタイルでよく知られています、そして、私はそれが新しい開発者として本当に簡単に拾うと主張します.
反応アプリケーション(特にそのJSX syntaxによる)の構造はHTMLに近い感じです.
あなたが開発者であるか、フロントエンド開発を学ぶことに興味があるならば、反応しようとすることは、よく価値があります.
ときに最初にいくつかのオプションが利用可能な反応アプリケーションを構築する.

あなたはHTMLにカップルスクリプトタグを追加することができますし、反応するはずです.しかし、これは生産現場の推奨されたアプローチではありません.

は、Create React Appを自動的にあなたがフードの下で必要とするすべてのツールであなたのためにプロジェクトを準備させるためにnpx create-react-app my-appを走らせることもできます.

あなたはツールを自分で構築することができますし、ツールの動作方法についての詳細を学ぶことができます.

私はあなたのツールは、開発者としての能力を高める知っている最後のオプションをお勧めしがちです.
このポストの残りの部分は、ビルドツール、webpackとの反応アプリケーションの設定方法を説明します.
このチュートリアルの一部として、私はあなたが従うことができるexample app一緒に入れている.
私はJavaScript、HTML、およびCapperをWebPackを使用してprevious postにビルドする方法をカバーしています.

必要条件

インストールしてJavaScriptパッケージを実行できるようにNode.jsをインストールします.

ステップ
我々がインストールする必要がある2つの反応依存性はreactとreact-domです.そこで、新しいリポジトリを設定し、npm initを設定し、package.jsonを実行します.
次に、ファイル242479142(これはアプリケーションのエントリポイントになります)を次のコンテンツで作成します.

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

ReactDOM.render(<App />, document.getElementById("root"));

その後、あなたの一日を明るくするためにうれしいメッセージを印刷するnpm install react react-domの/src/index.jsコンポーネントを作成します

import React from "react";

const App = () => {
  return <h1>🎵 I can see clearly now the rain has gone! 🎵</h1>;
};

export default App;

AppにHTMLテンプレートを作成します

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

このHTMLテンプレートを使用して、JavaScriptバンドルを一度構築します.
反応はすべてのブラウザーのためにそれを友好的にするためにコンパイルを必要とする最新のJavaScript構文を使用します.また、これをwebpackの中に設定する必要があります.
ローカル開発サーバーを実行するための基本的なWebpackツールをもたらすために、/src/App.jsxと/src/assets/index.htmlをインストールすることから始めましょう.

Note: For this tutorial, I'm using webpack v5.x and webpack-cli v4.x.

また、私たちのHTMLテンプレートにバンドルされたJavaScriptを埋め込むためにwebpackをインストールする必要があります.
次に、webpack-cliというプロジェクトのルートにファイルを追加することができます.

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/assets/index.html",
        }),
    ],
};

スクリプトをhtml-webpack-pluginに追加します.

{
    ...
    "scripts": {
        "start": "webpack serve"
    }
    ...
}

その後webpack.config.jsを実行します.これは私たちに素敵なを与える.エラー😞
我々は、反応からファンキーなJSX構文を扱うローダーを必要とします.これにはBabelを使います.
次のパッケージをインストールします

package.json(WebpackへのBabel編集をフックするための)、

npm start(コアBabelパッケージ)、

babel-loaderと@babel/core(次世代JavaScriptと反応のためのBabelプリセット).

次にWebPackの設定を更新します.

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/assets/index.html",
    }),
  ],
};

ここでは、Webpackにどのように@babel/preset-envと@babel/preset-reactファイルを扱うかに関する規則のセットを与えています.私たちは、Webpackが私たちのJSファイルをコンパイルするために.jsxを使用し、我々がそれをするためにインストールされた2プリセットを使用するように指定しました.
現在.jsを実行すると、ブラウザでうまく表示されるはずです.
そこに行くと、セットアップと反応アプリを構築する準備が整いました.
CSSをインポートしたいでしょう.それのために、私のhttp://localhost:8080をチェックしてください、さもなければ、彼らのサイトで約other tutorialで閲覧をしてください.

Reference

この問題について(WebPackによる反応アプリケーションの構築), 我々は、より多くの情報をここで見つけました https://dev.to/jonhaddow/building-a-react-application-with-webpack-159c

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Command Pattern

mysqlインポートtxtファイルの詳細