React の旅を始めましょう: 初めての React アプリを作成する方法!

React は、Meta のソフトウェア エンジニアである Jordan Walke によって作成されたオープンソース JavaScript ライブラリです。これは、シングルページ アプリケーション上でユーザー インターフェイス (UI) コンポーネントを構築するために使用されます。 React は、2011 年に Facebook のニュース フィードで初めて使用され、2012 年に Facebook がアプリを購入した後、Instagram に追加されました。2013 年末にオープンソース ライセンスに基づいて一般公開され、大きな人気を得ました。 React は最も広く使用されている JavaScript ライブラリであり、過去 1 年間の Stack Overflow 調査によると、開発者の 40% 以上が React を使用しています。

なぜ React はこれほど人気が​​あるのでしょうか?

Web 開発者にそのサービスを使用する利点について質問すると、長いリストが返されます。彼らは、仮想 DOM、JSX、一方向データ バインディングというコンポーネントについて話します。これにより、開発者の作業が楽になります。それが、React が Web 開発者の間で非常に人気がある理由です

環境のセットアップ

React とは何か、そしてなぜ React が人気があるのか​​を理解しました。

ローカル マシンで React を実行するための環境をセットアップするプロセスを見てみましょう。

まず、お好みの Web ブラウザを開いて Node.js を検索します。公式 Node.js Web サイトを見つけたら、ダウンロード タブに移動し、コンピューターのオペレーティング システムとアーキテクチャ (32 ビット/64 ビット) に基づいて適切な Node.js ファイルを選択します。ファイルをダウンロードした後、それを実行し、ローカル マシンへの Node.js のインストールを続行します。 Node.js がマシンに正常にインストールされていることを確認するには、ターミナルを開いて次のコマンドを実行します。

node -v
npm -v

バージョンが指定されている場合は、Node.js が正常にインストールされていることを意味します。

React プロジェクトの作成

React プロジェクトをセットアップするには、お好みの Web ブラウザを開いて「Vite」を検索します。 Vite 公式 Web サイトにアクセスし、コマンド「npm create vite@latest」をコピーします。次に、このコマンドをターミナルに貼り付けます。プロジェクト名、ライブラリ、React ライブラリの優先言語などの情報を入力するように求められます。質問に答えたら、プロジェクト フォルダーに移動し、このフォルダーでターミナルを開きます。コマンド「npm i」を実行して、必要なパッケージをダウンロードします。プロジェクトを実行するには、「npm run dev」コマンドを使用します。プロジェクトは localhost:5137 で実行されます。おめでとう！最初のプロジェクトが正常にセットアップされました。 ?

ファイル構造を理解する

React プロジェクトをセットアップしたら、お気に入りのコード エディターでプロジェクトを開きます。プロジェクトを開くと、いくつかのファイルとフォルダーが表示されます。 Index.html ファイルが見つかります。これは、Web ブラウザで HTML をレンダリングするためのメイン ファイルです。 src フォルダー内にフォルダーとファイルを作成して、Web アプリケーションを希望どおりに機能させ、外観を変更することができます。メイン ファイルは 2 つあります。React でコンポーネントをレンダリングする main.js と、コンポーネントのエントリ ポイントとして機能する app.js です。

結論

おめでとうございます!最初の React アプリをゼロから構築しました。この旅を通じて、環境を設定する方法、Vite を使用してプロジェクトを作成する方法、ファイル構造を理解する方法を学びました。 React の柔軟性とコンポーネントベースの構造により、最新の動的な Web アプリケーションを構築するための強力なツールになります。基本をマスターしたので、より高度な機能を探索し、React スキルを次のレベルに引き上げる準備が整いました。実験、構築、学習を続けてください – React の可能性は無限大です!

以上がReact の旅を始めましょう: 初めての React アプリを作成する方法!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。