ツアーに参加：CreateReactAppv3の新機能

ハザ！ create-react-app v3.0.0がReactチームから発表されました！この記事では、最も重要な機能について説明し、ジューシーなコードスニペットについて説明します。

v3.0.0での変更の包括的なリストを提供しようとする代わりに、ツールとライブラリ（TypeScript、Jestなど）ごとにグループ化して、読みたいものを選択できるようにしました。

ハイライト

`browserslist`

おそらく最大の機能の1つは、browserlistツールを使用して特定のブラウザーをターゲットにする機能です。

Babelがコードを変換すると、browserslist の設定package.json適切なポリフィルと変換を利用します。デフォルト設定は次のとおりです。

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

本番環境では、アプリには少なくとも0.2 % g lobal使用量のブラウザー用のすべてのポリフィル/トランスフォームが含まれますが、Opera Mini（1.6 % g lobal使用量）は無視されます。 browserslistは、caniuse.comのグローバル使用状況データを使用します。

たとえば、Edge 16をターゲットにする場合でも、配列の破棄を使用できます。

// Shiny, new ECMASCript features!
const array = [1, 2, 3];
const [first, second] = array;

// ...Babel transforms for Edge 16
const array = [1, 2, 3];
const first = array[0];
const second = array[1];

PostCSS正規化

PostCSS Normalize は、browserslistを構築しているのと同じ人々によって作成されています。 PostCSSNormalizeはbrowserslistに似ていますが、JavaScriptコードを変換する代わりに、CSSスタイルシートを変換します。

package.jsonにbrowserslist宣言が既にある場合は、ターゲットにするブラウザーがすでにわかっています。あなたがする必要があるのはあなたのCSSファイルの1つの上部に@import-normalizeを含めることです。

たとえば、Internet Explorer 9以降を対象としている場合は、次のスタイルが含まれます。

@import-normalize;
/* Add the correct "display" values in IE 9 */
audio,
video {
  display: inline-block;
}

/* Remove border for img inside <a> tags IE 10 */
img {
  border-style: none;
}

ただし、IE10以降のみをサポートする場合

@import-normalize;
/* Remove border for img inside <a> tags IE 10 */
img {
  border-style: none;
}

PostCSS Normalizeを使用すると、Chromeですべての開発を行っている場合でも、Firefox / Safari /Operaなどでまったく同じように見えるので安心できます。奇妙なブラウザを使用している友人に「甘いウェブサイト」を披露しているとき、私たち全員がその話をしているように感じます。あなたのウェブサイトはチャプスイのように見えます。 PostCSS Normalizeで当時に別れを告げましょう！

フックのリンティング

React v16.8で、新しいフックAPI がついに登場しました！現在、Create React App v3には、「ベストプラクティス」フックの作成に役立つlinting構成がプリインストールされています。フックには2つのリンタールールがあります。

React関数コンポーネントからフックを呼び出す
カスタムフックからフックを呼び出す

それでおしまい！これらは、フックを使用する場所に関係し、for-loop内でフックを使用して、useStateおよびuseEffectであらゆる種類の大混乱を引き起こす可能性がある状況を防ぎます。フックのクイックスタートスタイルガイドが必要な場合は、 React Hooksの紹介🤓をチェックしてください！

ジェスト24

create-react-appには、2019年1月下旬にリリースされた Jest （v24）の最新バージョンが同梱されています。 Jestを使用している場合は、すべての新機能の概要を説明するアナウンスをぜひチェックしてください。

TypeScript

TypeScript を使用している方は、この新しいバージョンのCreate React Appが、.tsファイルを検出してリントします。これは、特にFlowのリンティングルールの包括性が低いことを考えると、TypeScriptをサポートするための大きなジェスチャーのようです。これらは、Create ReactAppv3に付属するデフォルトのリンティングルールです。

'@typescript-eslint/no-angle-bracket-type-assertion': 'warn',
'@typescript-eslint/no-array-constructor': 'warn',
'@typescript-eslint/no-namespace': 'error',
'@typescript-eslint/no-unused-vars': [
  'warn',
  {
    args: 'none',
    ignoreRestSiblings: true,
  },
]

Visual Studio Code

最後に、Visual Studioを使用する場合、jsconfig.jsonおよびtsconfig.jsonファイルでbaseUrlがサポートされるようになりました。これは、絶対importsを使用できることを意味します。

import DashboardContainer from '../../../containers/DashboardContainer'  // 👈 this...
import DashboardContainer from 'containers/DashboardContainer'  // 👈 becomes this!

これにより、「ルックアップ」の優先度をnode_modulesからsrcフォルダーに変更できます。通常は、node_modulesフォルダー内でcontainersパッケージを検索します。

📝読んでくれてありがとう！公式リリースノートはこちら