最高のReactWeb開発ツールを使用したアップグレード

Reactを使用してWebアプリケーションを開発するための最良のツールを学ぶことで、より価値のあるものになることができます。







雇用主は、ほとんどの再開を斜めに実行するだけで拒否します。これは少しがっかりですよね？ですから、彼があなたから必要な知識とスキルをすぐに見ることが非常に重要です。特に再開について自慢することが何もない場合は、今がアップグレードする適切な時期です。新しいスキルを学ぶために大学に行く必要はありません。正しい方向に進むだけで、それから逸脱することはありません。



たとえば、ReactJSの方法を知っている場合、これにより、より需要の高いスペシャリストになることができます。初心者のWeb開発者で、JavaScriptとHTMLをすでに知っている場合は、ReactJSが次のステップです。



この記事では、優れたJavaScript開発者になり、Reactを使用するために学ぶ価値のあるツールとライブラリのリストを共有します。

Reactとは何ですか？なぜそれを学ぶ価値があるのですか？

Reactは、Facebookが2013年5月に展開した（そして引き続きサポートする）ユーザーインターフェイス開発用のjsライブラリです。 JavaScriptで動的なユーザーインターフェイスを作成できます。



Reactは世の中で最も強力なjsライブラリの1つであるため、それを学ぶことで多くの良いことができます。 Reactは、開発者のAmazon、PayPal、BBC、CNN、およびその他の多くの大手テクノロジー企業によって使用されています。さらに、ライブラリはあらゆるニーズを満たすのに十分な柔軟性を備えています。お気に入りのテックスタックと組み合わせて使用​​できます。 Reactを使用して、データダッシュボード、メッセージングアプリ、ソーシャルネットワーキングアプリ、単一ページのWebアプリ、および個人のブログを作成できます。



実際のプロジェクトに取り組んでいるときにReactを習得できれば、すぐに学ぶことができるだけでなく、潜在的な雇用主に自慢する機会も得られます。

1.npm

このツールが誰にとっても啓示ではないことは明らかです。私は彼を無視できなかった。



JavaScript（Reactライブラリを含む）を使用するには、ノードパッケージマネージャー（npm）をインストールする必要があります。Linuxディストリビューション（またはChocolatey forWindowsまたはHomebrewfor macOS）に付属のパッケージマネージャーと同様に、npmは、ソフトウェアリポジトリにクエリを実行し、ReactJSコンポーネントを含む必要なパッケージをインストールするコマンドを提供します。



LinuxディストリビューションのリポジトリからNode.js（およびそれに伴うnpm）をインストールできます。

FedoraまたはRedHat Enterprise Linuxでは、次のようにします。

$ sudo dnf install nodejs

UbuntuまたはDebianでは、わずかに異なります。

$ sudo apt install nodejs npm

npmがディストリビューションのリポジトリに含まれていない場合は、Nodejs.orgにアクセスして、この場合のNode.jsとnpmのインストール方法を確認してください。

2.クイックスタート

Create React Appは、Reactアプリケーションをすばやく作成するためのテンプレートプロジェクトです。 Reactで作業プロジェクトを設定することは、以前は退屈な作業でした。ただし、このツールを使用すると、フロントエンドビルドパイプライン、プロジェクト構造、環境、およびアプリケーションの最適化を数秒でゼロ構成に設定できます。あなたは1つのコマンドでそれを行うことができます。さらに、より複雑な構成が必要な場合は、Create React Appを「抽出」して、その構成ファイルを直接編集できます。



Create React Appは、MITライセンスの下でオープンソースで配布されています。そのソースコードはGitHubリポジトリにあります。



インストール：

npm start
npm init react-app my-app

あなたが使用したい作成するには、アプリを反応しない場合に向けて、あなたが見ることができるボイラープレートに反応し、スリングショットに反応します。どちらもMITライセンスの下でオープンソースです。

3.反応視力

React Sightは、アプリケーションをコンポーネントの階層ツリー（フローチャートなど）として表示できる人気のある視覚化ツールです。Chrome拡張機能として接続できます（アプリケーションに関する情報を表示するには、react devtoolsが必要です）。そのインターフェースを使用して、フィルターを追加して、最も対話する必要のあるコンポーネントに焦点を合わせることができます。ノードにカーソルを合わせると、コンポーネントの現在の状態と小道具に関する情報が表示されます。React Sightは、大規模で複雑なプロジェクトのデバッグに非常に役立ちます。



React SightはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。ChromeWebストアを使用してインストールできます。

4.反応ベル

React Belleは、再利用可能なコンポーネント（Toggle、Rating、DatePicker、Button、Card、Selectなど）を含むカスタムReactライブラリです。便利なユーザーエクスペリエンスを提供するように設計されています。コンポーネントは、モバイルおよびデスクトップ用に最適化されています。これらは高度にカスタマイズ可能であり、障害を持つ人々のためのアクセシビリティ基準（WAI-ARIA）をサポートしています。ライブラリは、BelleやBootstrapなどのさまざまなテーマをサポートしています。



BelleはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



インストール：

npm install belle

5.エバーグリーン

React UIプリミティブの上に構築されたEvergreenは、プロジェクトの構築に使用できる高品質のコンポーネントを含むUIフレームワークです。開発者は、コンポーネントのインポートが簡単なこのツールを気に入っています。



EvergreenはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



インストール：

npm install --save evergreen-ui

6.ビット

Bitは、Reactアプリを公開および共有するためのオンラインプラットフォームおよびコマンドラインツールです。これは、コンポーネントを構築および共有する場合の最良のオプションの1つです。そのマーケットプレイスは、人々がReactアプリを公開し、必要なコンポーネントを検索できる場所です。そのため、新しいReactアプリやコンポーネントが必要になるたびにホイールを作り直す必要はありません。



だからビット：

• コードの再利用を提供します。
• 設計と開発の効率を高めます。
• UIとUXの一貫性を維持します。
• プロジェクトの安定性を高めます。

BitはApache2.0ライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



インストール：

$ npm install bit-bin --global

7.ストーリーブック

Storybookは、UIコンポーネントを迅速に開発するためのツールです。コンポーネントのライブラリを表示し、各コンポーネントのステータスを追跡できます。StoryBookを使用すると、アプリケーションとは別にコンポーネントを開発できるため、UIコンポーネントの再利用とテストが容易になります。



さらに、Storybook APIは多くの機能を提供し、カスタマイズを容易にします。Coursera、Squarespace、LonelyPlanetなどの企業がこのツールを使用しています。



StorybookはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



まず、次のコマンドを使用してStorybookをインストールします。

$ cd my-react-app
$ npx -p @storybook/cli sb init

次に、runコマンドを実行します。

$ npm run storybook

8. Formik

Formikは、デバッグ、テスト、および分析中にフォームを作成および検証するのに役立ちます。動的フォームを作成できるため、コンポーネントの状態や小道具を手動で変更または更新する必要はありません。これにより、開発がより速く、より楽しくなります。



FormikはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



インストール：

$ npm install formik --save

9.イマー

Immerは、プロジェクト構造がより複雑になったときに不変性を維持できるようにするjsライブラリです。より正確には、ライブラリを使用すると、コードを不変に保つことが簡単になります。



Immerの主な機能のいくつかは次のとおりです。

• イマーは厳密に型指定されています。これは、状態オブジェクトが型である場合に役立ちます。
• イマーはボイラープレートを縮小します：ほとんどの状態管理ツールでは、ボイラープレートコードをたくさん書く必要があります。Immerを使用すると、より少ないコードを記述できます。
• Immerを使用すると、JSデータ構造を使用できます。基本的なJSデータ構造を使用して、Immerで不変の状態を作成できます。

ImmerはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



インストール：

$ npm install immer

10.反応プロト

React Protoは、開発者とデザイナー向けのアプリプロトタイピングツールです。プロジェクト構造を計画するのに役立ち、事前に決定を下すことができます。したがって、開発中に変更を加える時間を無駄にすることはありません。このツールは、コーディングよりもデザインを好む人に特に役立ちます。たとえば、コードを作成する代わりに要素をドラッグアンドドロップできます。このツールは、選択したすべてのコンポーネントにマークを付け、名前、プロパティ、および階層を与えるのに役立ちます。



React ProtoはMITライセンスの下でリリースされており、 GitHubリポジトリでそのソースコードにアクセスできます。



インストールするには、最初にリポジトリをフォークします。次に、以下を使用して依存関係をインストールします。

$ npm install

次に、以下を実行します。

$ npm start
$ npm run dev

あなたのキャリアの新しいステップ

基本的に、JavaScriptとReactの資料は自分でたくさん見つけることができます。ただし、この記事（および他の多くの記事）で説​​明したツールの詳細については、Awesome ReactGitHubリポジトリを確認してください。



これらのツールを研究して実装することにより、生産性が向上し、雇用主にとって履歴書がより魅力的になります。

---

広告

ReactJSアプリまたはその他の目的のためのサーバーが 必要ですか？最新の強力なAMDプロセッサを搭載したエピックサーバーは問題なく動作します。日給付きの幅広い構成。