React mini Project(1)-下地仕上げ(優先パラメータ)

ノーソンのToday I Learnの知識はまだ眠っていて、この間学んだことを調整するためにミニ掲示板プロジェクトを計画しました.
知っていることを全部やってからやるつもりです.
初めてなので、材料を紹介して整理します.

ざいりょう

環境:Vscode,npm終了.
1. React
2. ESLint
3. babel
4. webpack
5. TypeScript
6. jest
7. React-Testing-Library
8. prettier
9. Google
10. Tech Blog

"devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.0",
    "@types/jest": "^27.4.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.18.0",
    "@typescript-eslint/parser": "^5.18.0",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.12.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "eslint-plugin-testing-library": "^5.2.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^27.5.1",
    "mini-css-extract-plugin": "^2.6.0",
    "prettier": "^2.6.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }

CRA 一つ一つ取り付けて、面倒くさい.でもやりました.

フォーミュラ

まず反応器で反応器を取り付けます

npm install react react-dom

ESLintのインストール:
(ESLintはJavaScript、JSXの静的解析ツールで、オープンソースプロジェクトです.コードを解析したり、構文エラーや逆パターンを見つけたりして、一貫したコードスタイルで記述するのに役立ちます.)そうですね.

npm install eslint -D

-Dが貼り付けられたのは、開発者がそれだけを必要とし、これらはすべてdevDependenciesに保存できるからです.
ESLintにはスタイルガイドがあり、airbnbはかなりコンパクトです.私の髪は坊主ではありませんが、きつくするのでairbnbを敷いてください.

npm install eslint-config-airbnb -D

そしてESLintに接続するために、もう一つきれいなものをインストールします.
(Prettier)はコードフォーマットプログラムです.フォーマットを担当していても、コード品質などの検査はESLintが担当するので、主に両者を組み合わせて使用します.)
そうですね.

npm install eslint-config-prettier -D

Prettyerを使用するときにESLintにエンコードスタイルを考慮させたくない場合は、eslint-config-prettyerを設定します.Prettierと競合するESLint規則を閉じる役割を果たす.

npm install eslint-plugin-prettier -D

Eslint-plugin-prettyerは、PrettyerルールをESLintルールに追加するプラグインです.PrettyerのすべてのルールがESLintに入るので、ESLintを実行するだけです.
もっときれいな(prettyer)にエンコードスタイルを渡したのでeslint-config-prettyerを設定しました.
まだあります.eslintrc.jsonはこのように設定すればいいです.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "eslint-config-prettier",
  ],
  ...
 }

他のeslintプラグインは、使用するライブラリに基づいて構成できます.
ESLintの動作過程が気になる方はKakaoさんのかっこいい文章があるのでリンクします
https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
プラグイン用にやってるみたい...
よし今...バーベルとネットバッグを設置します.
(Baelは、最新仕様のJavaScriptコードをIEまたは旧ブラウザのES 5以下のコード(変換コンパイル)に変換することができます.)そうですね.

npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript -D

babel/core:バーベルのコア.これがなければバーベルではありません.

babel/prefet-env:javascriptを異なる環境で実行できます.

babel/prefet-react:反応母音

babel/prefert-typescript:タイプスクリプトのセット

使用するライブラリに基づいて、バーベルプリセットを見つけてインストールし、適用します.
babel.config.jsonです.

{
  "presets": ["@babel/preset-react", "@babel/preset-env", "@babel/typescript"]
}

バーベルを使う方法はたくさんあります.

.bablercは、主にサブディレクトリまたはファイルで特定のプラグインまたは変換を実行するのに適しています.

プロジェクトのサードパーティライブラリがバーベルに変換されたくない場合、

.babel.config.jsは、複数のパッケージディレクトリを持つプロジェクトでルールを設定する場合に便利です.公式文書によると.babel.config.jsを使用すると、構成されたapiが露出します.この方法はキャッシュの複雑さを増加させ、その多くはbable.config.jsonを使うのはもっと良い選択です.

-バベルrcよりバベル.config.jsonが一般的に使われています.
今はWebPack
(Webアプリケーションの増加に伴い、各プロジェクトには大量のリソースを持つファイルが集まっています.これらのファイル間の関係は複雑で重く、ブラウザが時間をかけて理解し、ロードする必要があります.この問題を解決するために、Webパッケージ(Webpack)という名前のモジュールバンドルプログラムを使用して、ファイル間の依存関係を整理および最適化し、jsxファイルをJavaScriptファイルにマージします.)
そうですね.
Webパッケージをインストールします.

npm install webpack webpack-cli webpack-dev-server -D

webpack:モジュールバインドwebpack.

webpack-cli:webpackのコマンドラインインタフェース.

webpack-dev-server:開発サーバを提供します.

そしてネットワークパッケージを設定します.
webpack.config.js

const webpack = require('webpack');
module.exports = {
  mode: 'development', // 1
  entry: './src/index.js', // 2
  output: { // 3
    filename: 'bundle.[hash].js' // 4
  },
  module: {
  ...
  },
  plugins: [
  ...
  ],
};

module.export={}:宣言されたオブジェクトをモジュールに出力

entry:使用するjs(配列を使用して複数を設定)

output:マージする成果物の設定

モジュール:モジュールの設定

プラグイン:プラグインの使用
このフォーマットですがtypescriptもインストールされていてjest、react-testing-libraryが残っているので、すべて設定して、最後に設定を完了します.

残りの環境設定は次の授業で行います.
To be continue...
I'll be back...