どのようにセットアップを新鮮な反応アプリ

2018 - 03 - 15 TypeScriptサポートを要求したコメンテーター.大部分のパッケージが箱からtypescript支持を提供するので、それは簡単に達成されることができます.
最近、私のチームの部品のために2日242479152ワークショップを開催しました.我々は、我々は正常にいくつかの実験でそれを使用した後、すべての新製品のReactに切り替えることを決めた.トレーニングの間、我々はまた、Reactを使用して新しいReactプロジェクトを準備する方法について話しました.
このブログの記事では、私はcreate-react-appプロジェクトをどのように設定するかを文書化したい.それは我々が仕事でするのと同じです、しかし、我々も若干の商業的に認可されたツールを含みます.
React
ステップ1:インストールと使用する反応アプリを使用してください

npx create-react-app your-new-react-project
cd your-new-react-project

またはtypescriptをサポートします.

npx create-react-app your-new-react-project --typescript
cd your-new-react-project

スタートはかなりまっすぐです.我々は、ちょうど を使用して新しいプロジェクトを設定します.これはすでにGitと管理されているcreate-react-appアプリを起動するすべてが含まれています.OK、実際にそれはほとんどすべてをカバーします.そうでなければ、このポストはここで止まります.
React
手順2 :コードフォーマッタを追加する
コーディング規約を楽しんでいます.私のエディタが自動的にそれを世話するとき、私はそれが好きです.そして、コード形式が前コミット段階で再実行されるとき、私は感謝します.コードベースのすべてのコードは、定義されたコーディング標準に従うべきです.はい、一部の同僚は、この態度のために私を憎みます.
私の観点からの最良の解決策は、プロジェクトにいくつかの友人と一緒に を追加することです.prettierは書式設定に責任があります.PrettierとhuskyがあなたのGitワークフローにきれいに加えるのに用いられる間.

npm install --save-dev husky lint-staged prettier

次に、プロジェクトにlint-stagedの設定を追加する必要があります.クリエイト.pretTierrcファイル.

{
  "trailingComma": "es5",
  "printWidth": 100
}

最後のステップは、prettierとhuskyのパッケージにいくつかの設定を追加することです.JSONファイル.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write",
    "git add"
  ]
},

lint-stagedに必要なアドオンを追加することを忘れないでください.Visual Studioコードの場合は、拡張モジュールeditorを使用します.
Prettier – Code Formatter
ステップ3:Reduxを追加、反応ルータとredux thunk
私は、ほとんどすべてのプロジェクトが中央店とルータを必要とすると思います.それで、私はいつも私のプロジェクトに 、reduxとredux-thunkを加えます.
ストアを設定する別の投稿のためです.私は今これを残す.

npm install redux react-redux redux-thunk
npm install react-router-dom
npm install --save-dev @types/react-router-dom         # Only if you use TypeScript

react-router
ステップ4:反応するヘルメットを加えてください
は、お使いのコンポーネントの中からヘッダーを操作する素敵な小さなライブラリです.これは、react-helmetと一緒にうまく動作します.

npm install react-helmet
npm install --save-dev @types/react-helmet

react-router
(オプション)ステップ5 :プロップタイプを追加する
TypeScriptを使用している場合は、インターフェイスを使用して同じ動作を得るので、この手順を省略できます.FC

import * as React from 'react'

interface IProps {
  // ... props interface 
}

const MyNewComponent: React.FC<IProps> = (props) => {...};

しかし、あなたがtypescriptを使わないならば、 は私の観点からの重要な図書館です.私は、なぜ手動でそれを追加する必要が理解していない.prop-typesコンポーネントのプロパティのランタイムチェックを行います.

npm install prop-types

prop-types
ステップ6 :反応テストレンダラを追加する
がプロジェクトから除外されるかもしれない間、私は完全にprop-typesの後のチームがcreate-react-appを去った理由を理解しません.react-test-rendererは選択のテスト施設です.しかしJestのsnapshot testingの特徴はJestだけでしか使えない.それで、あなた自身を好意的にして、あなたのプロジェクトにこのライブラリを加えてください.

npm install --save-dev react-test-renderer
npm install --save-dev @types/react-test-renderer         # Only if you use TypeScript

react-test-renderer
(オプション)ステップ7 :いくつかのUIキャンディを追加する
私は非常に材料設計を感謝します. は、反応する材料設計要素を提供する大きな図書館です.素材のUI自体は、プロジェクトにmaterial-uiパッケージを追加することによって完了することができます美しいアイコンセットを提供します.

npm install @material-ui/core
npm install @material-ui/icons
npm install mdi-material-ui
npm install typeface-roboto

Material Design Icons
ファイルシステムレイアウト
野生では、ファイルシステムのレイアウトの多種多様を見つけることができます.私は、すべてのコンポーネントがコンポーネントディレクトリの下に保たれるレイアウトを好みます.

$ tree
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── components
    │   └── App
    │   ├── App.css
    │   ├── App.js (or App.tsx)
    │   └── App.test.js (or App.test.tsx)
    ├── store
    │   └── ...
    ├── index.js (or index.tsx)
    └── serviceWorker.js (or serviceWorker.ts)

ストアフォルダーの内容は、私のreduxコードの構造をまだ解決していないので、別のポストの対象となります.現在、私はバックエンドとしてFirebaseでより多くの仕事をしています、それで、Reduxについてのポストは若干の時間がかかるかもしれません.

つの最終的なアドバイス
で作成したプロジェクトでNPM Run Ejectを実行してはいけないと思います.OK、“決して”時間の90 %に相当する可能性があります.多くのチュートリアルでは、作成直後にプロジェクトをエミュレートすることを提案しています.しかし、あなたはそれから多くの利益を得られなくて、create-react-appによってあなたのプロジェクトに適用される素晴らしいツールと正味のデフォルトを失います.
記事react-scripts詳細には、なぜあなたはそれをすべきではない.
イメージ残高:Don’t eject your Create React Appに関するMarkus Spiske