Mac に React.js をインストールする

このソフトウェアは、無料でオープンソースのフロントエンド JavaScript ライブラリです。 2013 年、React.JS は Facebook によって設立されました。

これは、UI コンポーネントの作成と操作に使用されるユーザー インターフェイス (UI) ライブラリです。 これは、開発者が非常に効率的なデータ駆動型 SPA アプリを作成できるようにするパッケージです。

これは関数型プログラミングに基づいており、不変性の概念に依存しており、単一の再利用性の原則に基づいてコンポーネントベースのアーキテクチャを促進しています。

この記事では、React を Mac にインストールする手順について説明します。 インストール段階が完了したら、オンラインで React トレーニングに参加することをお勧めします。

前にいくつかの用語を調べてみましょう-

NodeJS と NPM

• Mac に React をインストールするには、まず NodeJS と NPM をインストールする必要があります。
• ブラウザ外で実行できるJavaScriptエンジンです。
• NPM (ノード パッケージ マネージャー) は、コマンド ラインで使用されます。 ReactJS などのライブラリをインストールすることです。
• NodeJS は、公式 Web サイトからインストールできます。 NodeJS をインストールすると、NPM もダウンロードされます。
• Web サイトから NodeJS をダウンロードした後、「.pkg」ファイルを見つけます。 これをダブルクリックするだけです。 インストール用のポップアップが起動します。
• インストール プロセスが表示されます。 「インストール」または「インストール場所の変更」をクリックします。
• プロセスが完了すると、最終メッセージが表示されます。 NodeJS と NPM がインストールされます。

MacOS に ReactJS をインストールする

NodeJS と NPM をインストールしたら、ReactJS をインストールできます。 これは、npm install-save react react-dom を実行することによって行われます。

ReactJS プロジェクトを作成する

ReactJS をインストールしたので、新しい反応プロジェクト ディレクトリを作成できます。 これは、npx create react project を実行することによって行われます。 作成-反応-アプリ。

React-はじめに

Mac への React-Lib のインストールに進む前に、まず React の基本的な理解を得る必要があります。

• React は、Web 開発者やアーキテクトが、データのコンテキストで高いデータ フローと迅速な応答性を備えた UI を必要とする顧客の期待に応えるのを支援するパッケージです。
• コンポーネントベースのアーキテクチャに基づいて構築されています。 Web ページは、親コンポーネントと子コンポーネントで表すことができます。
• これは、DOM 操作のパフォーマンス オプティマイザとして機能する Virtual DOM に大きく依存しています。
• HTML Web ページには DOM ツリーがあり、ブラウザーはこれを使用して Web ページをレンダリングします。

ユーザーがページを操作すると、ユーザーのアクションに基づいて情報の追加と挿入が行われます。 のように、ユーザーがカートにアイテムを追加しました。 カートは、ユーザーの決定の結果として、変更されたアイテムを表示するようになりました。

バックグラウンドで、HTML ドキュメントは、変更されたページを共有できるように変換されます。

前述のとおり、DOM ツリーは HTML ドキュメントを表します。 前のケースでは、特定の HTML ノードの挿入と削除を含む、DOM の調整が必要です。

これは、ユーザーが自分の修正のコンテキストで何をしようとしているのかを象徴する重要な情報を表示するのに役立ちます

購入決定。

DOM をよりよく理解するために、DOM をツリーと見なす場合があります。

木には枝だけでなく根もあります。 同様に、HTML 要素は DOM の上部にあり、その下のノードは親ノードに接続されています。 ツリーの例えでは、親ノードはトランクとして表すことができ、他のノードはトランクに接続されます。 また、React を使用して、これらのノードでの挿入操作と削除操作を改善しています。

HTML DOM でのこの挿入および削除操作に関連するメモリ ペナルティがあります。 DOM 更新操作に関しては、仮想 DOM はパフォーマンス オプティマイザとして機能します。

2 つのコピーを保持します。1 つは実際の DOM (react DOM) のコピーで、もう 1 つは作成される更新のコピーです。 反応DOMの変更を最小限に抑えるプロセスも、調整プロセスの一部として調査されています。

Node.js & npm

Node.js は JavaScript のコードを実行します。 これはオープンソースであり、クロスプラットフォームから JavaScript ランタイム環境まで対応しています。 Chrome V8 エンジンを搭載しています。 Chrome V8 エンジンは C++ で記述されています。 ノードは、Windows、Mac、および Linux と互換性があります。

Node.js をインストールした後、開発中に React ベースのアプリをシステム上でローカルに実行できます。 これにより、プログラムを本番サーバーにデプロイすることもできます。

Node.js には、次の機能が含まれています。

• JavaScript をコア言語として使用
• ノンブロッキング I/O
• 非同期プログラミングをサポート
• 単一のサーバーを使用して多数の接続要求を管理できます。

Npmjs.org は、数千のモジュール (npm) のオンライン コード リポジトリであり、単純なコマンドを使用してノード モジュールをインストールできます。

一部のモジュールは自己完結型ですが、他のモジュールは適切に機能するために相互依存を必要とします.Node.js を使用すると、サーバー上で読み取りおよび書き込み操作を実行できます。 また、データベースを操作することもできます。

機能をゼロから作成する代わりに、モジュールを探して、その機能を再利用および拡張できます。

開発者のイニシアチブには通常、時間と予算の制約が伴います。 ノードに関しては。 js ベースの開発、npmjs.org は開発者コミュニティの生命線です。

総括する

このチュートリアルでは、React.js と React.js のコンポーネント ベースのアーキテクチャ アプローチについて学びました。 また、仮想 DOM の概要についても説明しました。

調整の概念、JavaScript の世界での Node.js の使用、および非ブロッキング I/O 出力を管理してクライアント接続要求を同時に満たす Node.js の機能について説明しました。

Node.js をインストールするための 2 つの手法をテストしました。1 つはパッケージ管理によるもので、もう 1 つはコマンド ラインによるものです。

React.js をすぐに使い始めるために、create-react-app モジュールを使用しました。 コマンドラインを使用して React.js をインストールすることもできます。

詳細が多すぎて過負荷になるのを避けるために、このチュートリアルでは create-react-app 手法を使用しました。 開発後に最初の反応アプリが実行されているのを見ました。 アプリを動作させる重要なファイルを迅速に評価し、開発の観点からコードに精通しました。

また読む：

• Mac Viruses are Alive それらを殺して、静けさの中に住もう!