React Boilerplateの完全なチュートリアル—ゼロからヒーローまで

Reactの学習を開始するとき、プロジェクトを作成するには、ボイラープレートをゼロから作成するか、コミュニティから提供されたものを使用する必要があります。ほとんどの場合、ビルド構成なしでアプリを作成するために使用するのはcreate-react-appです。または、独自の単純な定型文をゼロから作成します。

このことから思い浮かぶのは、私が常に使用するすべての依存関係を備えた定型文を作成し、それをそのままにしておくことです。コミュニティもそのように考えていたので、コミュニティが作成した定型文がいくつかありました。他のものより複雑なものもありますが、最大時間を節約するという同じ目標を常に持っています。

この記事では、Reactコミュニティーで現在使用されている主な依存関係を使用して、独自のボイラープレートをゼロから作成する方法を説明します。最近では最も一般的ないくつかの最新機能を使用し、そこから好きなようにカスタマイズできます。

この記事で作成したボイラープレートは、ここから入手できます!

入門

まず、ボイラープレートを開始するためのフォルダーを作成します。好きな名前を付けることができます。反応ボルトに名前を付けます。

ターミナルを開き、次のように作成します。

mkdir反応ボルト

次に、作成したフォルダーに移動して、次のコマンドを入力します。

npm init -y

NPMはpackage.jsonファイルを作成し、インストールしたすべての依存関係とコマンドがそこにあります。

次に、ボイラープレートの基本的なフォルダー構造を作成します。今のところこのようになります:

反応ボルト
    | --config
    | --src
    |-テスト

Webpack

Webpackは、最近のJavaScriptアプリケーションの最も有名なモジュールバンドラーです。基本的に、すべてのコードをバンドルし、1つ以上のバンドルを生成します。詳細については、こちらをご覧ください。

この定型文ではこれを使用するため、これらの依存関係をすべてインストールします。

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader

configフォルダーにwebpackという別のフォルダーを作成し、そのwebpackフォルダー内に5つのファイルを作成します。

Paths.jsというファイルを作成します。そのファイル内は、すべての出力ファイルのターゲットディレクトリになります。

その中に、このすべてのコードを入れてください:

次に、rules.jsという別のファイルを作成し、次のコードをそこに配置します。

その後、さらに3つのファイルを作成します。

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

基本的に、webpack.common.babel.jsファイルで、エントリと出力の構成を設定し、必要なプラグインも含めました。 webpack.dev.babel.jsファイルで、モードを開発に設定しました。そして、webpack.prod.babel.jsファイルで、モードを実稼働に設定しました。

その後、ルートフォルダーにwebpack.config.jsという最後のwebpackファイルを作成し、次のコードを挿入します。

webpackの設定は準備ができているので、今度はBabel、ESLint、Prettierなどを使用してボイラープレートの他の部分で作業します。

バベル

Reactで働くほとんどの人は、おそらくバベルと、このシンプルなトランスパイラーが私たちの生活にどのように役立つかについて聞いたことがあると思います。それが何であるかわからない場合、Babelは基本的に、JavaScriptコードを任意のブラウザーで実行できる単純な古いES5 JavaScriptに変換するトランスパイラーです。

多数のBabelプラグインを使用するため、ルートフォルダーに以下をインストールします。

npm install --save-dev @ babel / core @ babe / cli @ babel / node @ babel / plugin-proposal-class-properties @ babel / plugin-proposal-object-rest-spread @ babel / plugin-syntax-dynamic- import @ babel / plugin-syntax-import-meta @ babel / plugin-transform-async-to-generator @ babel / plugin-transform-runtime @ babel / preset-env @ babel / preset-react @ babel / register @ babel /ランタイムbabel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

この後、.babelrcという名前のルートフォルダーにファイルを作成し、そのファイル内に次のコードを配置します。

これで、プロジェクトはBabelによってコンパイルされ、次世代のJavaScript構文を問題なく使用できます。

ESLint

現在、プロジェクトのリンティングに最も使用されているツールはESLintです。変数のスコープ、未宣言の変数への割り当てなどに関連するバグの特定のクラスを見つけることは本当に役立ちます。

まず、次の依存関係をインストールします。

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react

次に、ルートフォルダーに.eslintrcというファイルを作成し、次のコードをそこに配置します。

きれい

Prettierは基本的にコードフォーマッタです。コードを解析し、最大行長を考慮した独自のルールで再印刷し、必要に応じてコードをラップします。

インストールするだけです:

npm install --save-dev prettier

そして、ルートフォルダーに.prettierrcというファイルを作成し、次のコードをそこに配置します。

反応する

Reactは、ユーザーインターフェイスを構築するためのオープンソースのJavaScriptアプリケーションライブラリです。 Facebookによって開発され、その背後には巨大なコミュニティがあります。この記事を読んでいる場合は、Reactについて既に知っていると思いますが、それについてさらに詳しく知りたい場合は、ここで読むことができます。

次の依存関係をインストールします。

npm install --save react react-dom cross-env

そして、srcフォルダー内に、簡単なHTMLファイルindex.htmlを作成し、次のコードを挿入します。

その後、簡単なReactプロジェクトを作成します。 srcフォルダー内に、次のようなindex.jsファイルを作成します。

srcフォルダー内には、次の構造があります。

src
    |-アクション
    |-コンポーネント
    |-リデューサー
    |-リデューサー
    |-ストア

componentsフォルダー内にApp.jsというファイルを作成し、次のコードを挿入します。

Redux

Reduxを使用すると、アプリケーションの状態を簡単に管理できます。これを見るもう1つの方法は、表示するデータとユーザーアクションへの応答方法の管理に役立つことです。最近では、多くの人がMobXやsetState自体のような他のオプションを好んでいますが、この定型文にはReduxを使い続けます。

最初に、いくつかの依存関係をインストールします。

npm install --save redux react-redux redux-thunk

次に、Reduxストアを作成し、そこに状態を配置します。ストアフォルダで、index.jsファイルを作成し、次のコードをそこに配置します。

ここで、reducersフォルダー内にindex.jsを作成し、次のコードを配置します。

最後に、srcフォルダーのindex.jsにアクセスし、コードをでラップし、ストアを小道具として渡してアプリケーションで使用できるようにします。

次のようになります。

全部終わった。 Reduxストアが構成され、準備が完了しました。

React Router

React Routerは、Reactの標準ルーティングライブラリです。基本的に、UIをURLと同期させます。ボイラープレートで使用するので、インストールします。

npm install --save react-router-dom

その後、srcフォルダーのindex.jsに移動し、すべてのコードをでラップします。

srcフォルダーにあるindex.jsは、次のようになります。

スタイル付きコンポーネント

スタイル付きコンポーネントは、Reactプロジェクトを整理するのに役立つため、誰にとってもCSSを簡単にします。その目的は、より小さく再利用可能なコンポーネントを作成することです。これを使用します。詳細については、こちらをご覧ください。

まず、インストールします:

npm install --styled-componentsを保存します

次に、コンポーネントフォルダー内のApp.jsファイルで、Styled Componentsを使用して簡単なタイトルを作成します。タイトルは次のようになります。

また、ファイル内でスタイル付きコンポーネントをインポートする必要があるため、ファイルは次のようになります。

Jest&React Testing Library

Jestは、FacebookのオープンソースJavaScriptテストライブラリです。アプリケーションのテストが簡単になり、適切な出力を提供しているものとそうでないものについて多くの情報を得ることができます。 React Testing Libraryは、Reactコンポーネントをテストするための非常に軽量なソリューションです。基本的に、このライブラリは酵素の代替品です。

すべてのアプリケーションには、ある種のテストが必要です。この記事ではテストを作成しませんが、アプリケーションのテストを開始するためにこれらのツールを構成する方法を示します。

最初に、両方をインストールします。

npm install --save-dev jest jest-dom react-testing-library

その後、package.jsonに移動し、結局次を追加します。

次に、configフォルダーに移動し、その中にtestsという別のフォルダーを作成し、そのフォルダー内に2つのファイルを作成します。

まず、jest.config.jsというファイルを作成し、次のコードを挿入します。

次に、rtl.setup.jsというファイルを作成し、次のコードを挿入します。

全部終わった。ボイラープレートは準備ができており、すぐに使用できます。

ここで、package.jsonファイルに移動し、次のコードを挿入します。

ここで、コマンドnpm startを実行してlocalhost:8080に移動すると、アプリケーションが正常に動作することがわかります!

私の最終的なコードをご覧になりたい場合は、この記事で作成した定型文がここにあります!

定型文に含めたい機能のアイデアがありますので、お気軽に投稿してください!

Twitter Twitterでフォローしてください!
GitHubでフォローしてください!

遠隔地での機会を探しているので、もし何か知りたいなら、私に連絡してください!