React の開発にはどのようなツールが使用されますか?

react で使用できる開発ツールは、1. Chrome React Dev Tools、2. React Sight、3. React Bootstrap、4. Create React App、5. React Styleguideist などです。

• すべてのブランドのコンピューターに適しています。

JavaScript では毎日多数のフレームワークやツールが登場しており、前回紹介した Vue や Ember に加えて React も人気のあるフレームワークです。しかし、新しいツールは毎日登場するため、開発者はそれらを試すときに常に少し圧倒されます。

したがって、新しい React プロジェクトに適切な IDE、適切な視覚化ツール、さらには適切なスタイルを選択する場合、選択肢はたくさんあります。これは心配なことだ。

この記事では、React に関する 11 の開発ツールを紹介し、フレームワークを最大限に活用するための選択と使用方法を示します。

1. React 開発者ツール

React 開発者にとって最も人気のあるツールの 1 つである Chrome React Dev Tools から始めます。は Chrome 拡張機能で、最近その v4 バージョンがリリースされました。

インストールが完了したら、Chrome の開発者ツールを開くと、コンポーネントとプロファイラーが追加されていることがわかります。タブの「コンポーネント」オプションを使用すると、画面上のコンポーネントと他のコンポーネントから派生したサブコンポーネントのリストを表示でき、コンポーネントのステータスとプロパティを検査したり、編集したりすることもできます。 「プロファイラー」タブを使用すると、アプリケーションのパフォーマンスを評価することもできます。

どちらのオプションも Chrome DevTools タブにあります。プラグインの機能をより詳しく体験するには、このオンライン サイトを使用して体験してください。

2. React Sight

上記の拡張機能に加えて、React アプリケーションを検査するときに役立つ別の Chrome 拡張機能 React Sight についても説明する必要があります。 。

DevTools をインストールした後、React Dev Tools と React Sight の拡張機能設定で [ファイル URL へのアクセスを許可する] オプションを有効にすると、DevTools に「React Sight」という名前の新しいラベルが表示されます。 , ローカル プログラムを実行すると、React Sight を使用してさまざまなコンポーネントをビジュアル ツリー形式で表示および作成できるようになり、コンポーネントがどのように接続されているかを簡単に理解できるようになります。現在のステータスと属性を確認できます。

3. React Extension Pack (VS Studio 用)

これまでのところ、Visual Studio はおそらく JavaScript 開発者にとって最もお気に入りの IDE の 1 つです。ここで唯一ではなく 1 つと言ったのは、Sublime、IntelliJ、Vim など、他にも優れた IDE がたくさんあるからです。

しかし、ここでは詳しく説明しません。VS の背後には強力なコミュニティがあるため、ここで VS について言及します。それでは、React Extension Pack を見てみましょう。

本質的には、React に関連するタスクを完了するための拡張パッケージのセットです。通常の状況では、VS は一般的な JS 要件の解析と実行において優れた仕事をしますが、この小さなツール パッケージは新しいレベルに引き上げられます。 。このパックには次のものが含まれます:

• ReactJS スニペット: すべての一般的なニーズを満たすことができる 40 の React スニペットと、34 の propType 固有のスニペットが提供されます。繰り返しの作業に多くの時間を費やすことがなくなり、日々の作業効率が向上します。
• ES Lint: コマンド ライン ツールのサポートを追加しました。これは IDE に統合されており、構文の改善、独自のコーディング スタイルの設定、さらには場合によっては自動的にエラーを修正するのにも役立ちます。
• npm: 新しいプラグインをインストールしたり、サーバーを再起動したり、npm 固有のコマンドを実行したりする必要がある場合、IDE からターミナルにジャンプする必要があるため、少し疲れるかもしれません。この拡張機能では、IDE から直接 npm コマンドを実行する機能が追加されました。
• JS ES6 スニペット: このプラグインには、開発効率を高めるために絶対に必要となる 40 以上のコード スニペットが含まれています。
• Search node_modules: この拡張機能を使用すると、モジュールを簡単に見つけてエディターで開くことができます。
• npm IntelliSense: このモジュールを使用すると、インストールされているすべてのモジュールを簡単に一覧表示し、それらをすばやく検索し、正しいスニペットを挿入してコードにインポートできます。
• Path intelliSense: 最後に、前の拡張機能とインラインで、大規模なプロジェクトに取り組んでいるのが 1 人だけではない場合、すべてのパスとファイル名を記憶することが非常に困難で面倒になります。この拡張機能は、ローカル インポートのパスをオートコンプリートするのに役立ちます。

合計 7 つの拡張機能があり、それぞれがプロジェクトに何らかの価値を提供します。この拡張機能パッケージをインストールするには、VS のコマンド パネルから次のコマンドを使用して簡単にインストールできます ( CTRL P を押して開きます) ：

ext install jawandarajbir.react-vscode-extension-pack

4. ストーリーブック

React は、非常に直感的な方法で UI を作成できるように設計されています。しかし、ビジュアル コンポーネントを作成するためにコードを記述する必要があるのは、実際には自然なことではありません。そのため、コードからブラウザに移動し、再びコードに戻ることがよくあります。

Storybook は、独自の UI コンポーネントの開発に使用できるオープン ソース ツールです。これは単なるコード ベースではなく、オンライン UI エディターを使用して、作業をインタラクティブに開発、検査し、最終的に提示することができます (これはビジュアル コンポーネントを開発する場合に非常に重要です)。

Storybook を既存の React プロジェクトにインストールするには、次のことを行うだけです:

$ npx -p @storybook/cli sb init

このコマンドはプロジェクトの構造をチェックします。そして、どのビュー レイヤーを使用しているかを理解するようにしてください (Storybook は React 以外にも、Vue、Angular などの他のビュー レイヤーをサポートしているため)。

コマンドが完了したら、次のコマンドを実行して Storybook を実行できます:

$ npm run storybook

5. React Styleguideist

これは、もう 1 つの非常に興味深いインタラクション スタイル ツールです。これにより、UI コンポーネントを作成して表示できるようになります。

#上の写真をよく見てください。右側には、左側の UI を生成する実際のコードが表示されます。この方法で UI を表示したり、表示されたインターフェイス上でコードを直接変更して UI をテストしたり、編集したりすることもできます。

これを React プロジェクトに含めるには、次のことを行うだけです (Webpack がインストールされており、Create React App を使用してプロジェクトを作成したと仮定します):

$ npm install --save-dev react-styleguidist

次に、次のコマンドを実行します。スタイリング サーバーを起動するコマンド:

$ npx styleguidist server

プロジェクトでの Styleguideist の使用について詳しく知りたい場合は、ドキュメントとデモを確認してください。

6. React アプリの作成

標準プロジェクト構造は、多くの React ツールを使用するための基礎であり、ここで Facebook からの React アプリの作成が役に立ちます。実際、このツールの使い方は非常に簡単なので、どのプロジェクト構造が最適か、どのモジュールをプロジェクトに追加するのが正しいかを考える必要がなく、たった 1 つのコマンドで新しい React プロジェクトを作成できます。このツールがすべての作業を行ってくれます。

npx がすでにインストールされている場合は、何もインストールする必要はありません。次の行をインストールするだけです。

$ npx create-react-app my-app

npx が気に入らない場合は、npm またはyarn:

$ npm init react-app my-app

または

$ yarn create react-app my-app

ただし、いずれの場合も、Node.js (8.16.0 または 10.16.0 以降) がシステムにインストールされている必要があります。

これらのコマンドのいずれかを使用すると、以下に示すようなフォルダー構造が得られます。

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

上記の構造を使用すると、次のコマンドでサーバーを起動し、開発作業を開始できます。

$ cd my-app
$ npm start #根据喜好使用yarn start 也可以

操作が完了すると、http://localhost:3000 を通じてこの新しく作成されたアプリケーションにアクセスできるようになります。

7. React Bootstrap

Bootstrap について聞いたことがありますか?これは比較的人気のある CSS フレームワークです。美しく応答性の高い UI を簡単に作成できる一連の CSS クラスと JavaScript 関数を提供します。

React Bootstrap の作者は、React と互換性を持たせるためにコードの JS 部分を書き直しました。これで、そのコンポーネントを React コンポーネントと同じように使用できるようになりました。

それをプロジェクトに追加するには、

npm

$ npm install react-bootstrap bootstrap

を使用できます。準備ができたら、必要なスタイルシートをプロジェクトの App.js または src/index.js ファイルに追加できます。

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

8. React-Proto

コードにはあまり興味がなく、ビジュアル デザインに興味がある場合は、おそらく React-Proto が最適なツールです。これを使用すると、コードを記述することなく、ドラッグ アンド ドロップを使用して UI プロトタイプを作成できます。

デザイナーが提供したデザインから開始し、このツールを使用して考えられるすべてのコンポーネントをマークアップし、名前、プロパティ、階層設定を与えます。完了したら、実際の自動生成コードにエクスポートして、カスタマイズすることができます。

#新しいプロジェクトを開始しようとしている場合、このツールを使用すると、プロジェクトの初期段階で時間を大幅に節約できます。

9. なぜレンダリングしたのか

なぜレンダリングしたのかは、React コンポーネントを再レンダリングする必要があるかどうかを検出するために使用されるツールです。再レンダリングする必要はありません。その後、マークされたコンポーネントのプロパティ、ステータス、提案のセクションがコンソールに表示され、開発者が調整できるようになります。

次の簡単な方法でインストールできます:

$ npm install @ welldone-software / why-did-you-render --save

然后，您可以使用以下几行将其包含到您的项目中：

import React from 'react';

if (process.env.NODE_ENV !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

之后，剩下要做的就是标记要通知您的组件，如下所示：

class BigListPureComponent extends React.PureComponent {
  static whyDidYouRender = true
  render(){
    return (
      //some heavy render you want to ensure doesn't happen if its not neceserry
    )
  }
}

一切准备就绪后，您可以期待以下输出：

10. Proton Native

最后，对于最后一个工具，我想介绍一种使用React来创建桌面应用程序的方法，因为毕竟，像Electron这样的项目，用JavaScript做这件事已经有一段时间了。

现在，有了Proton Native，你也可以用React来实现了。你可以通过定义React组件来定义GUI元素，并且该工具与所有Node.js模块、Redux兼容，并且由于Proton的特性，它完全是跨平台的！

为了将它安装到你的系统中，你所需要做的就是通过NPM并执行以下命令：

$ npm install -g create-proton-app

但是请注意，如果你使用的是Linux，则需要先安装以下依赖项：

libgtk-3-dev build-essential python2 pkg-config

最后，创建应用程序，只需执行以下操作：

$ create-proton-app my-app 
# 进入项目目录
$ cd my-app 
# 运行app 
$ npm run start

他们已经有一个可用的示例供你查看，如果你想了解如何将其用于自己的项目，可以随时查看它的完整文档。

总结

这些是与React相关11个工具，并不是所有的工具都是Web的，也不是所有的工具都是可视化的，也不是所有的工具都是用来帮助你编写代码的。但这里的重点是，它们中的许多可以一起使用，并相互补充。

更多编程相关知识，请访问：编程学习网站！！

以上がReact の開発にはどのようなツールが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。