BabelJS-BabelとJSXの操作

この章では、JSXとbabelの操作について理解します。詳細に入る前に、JSXとは何かを理解しましょう。

JSXとは何ですか？

JSXは、xml構文を組み合わせたJavaScriptコードです。 JSXタグには、XMLのように見えるタグ名、属性、および子があります。

Reactは、通常のJavaScriptではなくJSXをテンプレート化に使用します。使用する必要はありませんが、それに付属するいくつかの長所を次に示します。

コードをJavaScriptにコンパイルしながら最適化を実行するため、高速です。
また、タイプセーフであり、コンパイル中にほとんどのエラーをキャッチできます。
HTMLに精通していれば、テンプレートを簡単かつ迅速に作成できます。

プロジェクトのセットアップでbabel 6を使用しました。 babel 7に切り替える場合は、 @ babel/babel-package-name を使用してbabelの必要なパッケージをインストールします。

プロジェクトのセットアップを作成し、webpackを使用して、Babelを使用して通常のJavaScriptに反応するjsxをコンパイルします。

プロジェクトのセットアップを開始するには、以下のbabel、react、webpackのインストール用のコマンドを実行します。

コマンド

npm init

Webpackインストール

次に、作業に必要なパッケージをインストールします-babel、webpack、jsx-

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-dom

ここにインストール後のpackage.jsonがあります-

Work_With_Babel_Webpack

ここで、webpack.config.jsファイルを作成します。このファイルには、jsファイルをバンドルしてbabelを使用してes5にコンパイルするためのすべての詳細が含まれます。

サーバーを使用してwebpackを実行するには、webpack-serverと呼ばれるものがあります。 publishというコマンドを追加しました。このコマンドはwebpack-dev-serverを起動し、最終ファイルが保存されているパスを更新します。現在、最終ファイルの更新に使用するパスは/devフォルダーです。

webpackを使用するには、次のコマンドを実行する必要があります-

npm run publish

*webpack.config.js* ファイルを作成します。このファイルには、webpackが機能するための構成の詳細が含まれています。

ファイル内の詳細は次のとおりです-

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js|jsx)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['es2015','react']
            }
         }
      ]
   }
};

ファイルの構造は上記のとおりです。現在のパスの詳細を示すパスで始まります。

var path = require('path');//gives the current path

次はmodule.exportsオブジェクトで、プロパティのエントリ、出力、モジュールがあります。

エントリーは出発点です。ここで、コンパイルするメインのjsファイルを指定する必要があります。

entry: {
   app: './src/main.js'
},

path.resolve（_dirname、 ‘src/main.js’）-ディレクトリ内のsrcフォルダーと、そのフォルダー内の *main.js を探します。

出力

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

出力は、パスとファイル名の詳細を含むオブジェクトです。パスはコンパイルされたファイルが保持されるフォルダーを保持し、ファイル名は l ファイルで使用される最終的なファイルの名前を示します。

モジュール

module: {
   rules: [
      {
         test:/\.(js|jsx)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['es2015','react']
         }
      }
   ]
}

_Module_は、test、include、loader、queryなどのプロパティを持つルールの詳細を持つオブジェクトです。
_Test_は、.jsおよび.jsxで終わるすべてのjsファイルの詳細を保持します。指定されたエントリポイントの末尾で.jsおよび.jsxを検索するパターンがあります。
_Include_は、ファイルの検索に使用するフォルダーを指示します。
_Loader_は、コードのコンパイルにbabel-loaderを使用します。
_Query_には、プロパティプリセットがあります。これは、env – es5またはes6またはes7の値を持つ配列です。 es2015を使用し、プリセットとして反応しました。

フォルダー* src/.*を作成し、その中に main.js と App.jsx を追加します。

*App.jsx*

import React from 'react';

class App extends React.Component {
   render() {
         var style = {
         color: 'red',
         fontSize: 50
      };
      return (
         <div style={style}>
            Hello World!!!
         </div>
      );
   }
}
export default App;

*main.js*

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

ReactDOM.render(, document.getElementById('app'));

次のコマンドを実行して.jsファイルをバンドルし、プリセット es2015 および react を使用して変換します。

コマンド

npm run pack

Convert_Using_Presets

*main_bundle.js* をdevフォルダーから *indexl* に追加します-

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "dev/main_bundle.js"></script>
   </body>
</html>

コマンド

npm run publish

Dev Folder To Index

出力

Dev Folder To Index Output

Babeljs-working-babel-with-jsx

BabelJS-BabelとJSXの操作

JSXとは何ですか？

コマンド

出力

モジュール

コマンド

コマンド

出力

目次