ハザ! 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スタイルシートを変換します。

すでにお持ちの場合 browserslist の宣言 package.json、それはあなたがターゲットにしたいブラウザをすでに知っています! あなたがする必要があるのは含めることだけです @import-normalize CSSファイルの1つの上部にあります。

たとえば、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 であらゆる種類の大混乱を作成します useStateuseEffect. フックのクイックスタートスタイルガイドが必要な場合は、 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を使用する場合、最終的には baseUrl あなたの中で jsconfig.jsontsconfig.json ファイル。 これは、絶対を使用できることを意味します imports:

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

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

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