啟動您的 React 之旅：如何創建您的第一個 React 應用程式！

React 是一個開源 JavaScript 函式庫，由 Meta 的軟體工程師 Jordan Walke 所建立。它用於在單頁應用程式上建立使用者介面（UI）元件。 React 於 2011 年首次在 Facebook 新聞推播中使用，並在 2012 年 Facebook 收購該應用程式後添加到 Instagram。它於 2013 年底以開源許可向公眾發布，並獲得了廣泛的歡迎。根據 Stack Overflow 過去一年的調查，React 是使用最廣泛的 JavaScript 程式庫，超過 40% 的開發人員使用它。

為什麼 React 如此受歡迎？

向網頁開發人員詢問使用他們的服務的好處，您會得到一長串回覆。他們討論了元件、虛擬 DOM、JSX 和單向資料綁定。這讓開發者的生活變得更輕鬆。這就是 React 在 Web 開發者中如此受歡迎的原因

設定環境

我們現在了解了 React 是什麼以及它為何如此受歡迎。

讓我們完成在本機上設定執行 React 的環境的過程。

首先，打開您喜歡的網頁瀏覽器並蒐索 Node.js。找到 Node.js 官方網站後，導覽至下載選項卡，然後根據電腦的作業系統和體系結構（32 位元/64 位元）選擇適當的 Node.js 檔案。下載檔案後，運行它並繼續在本機上安裝 Node.js。若要驗證 Node.js 是否已成功安裝在您的電腦上，請開啟終端機並執行以下命令：

node -v
npm -v

如果他們給了版本，則表示 Node.js 已成功安裝。

建立一個 React 項目

要設定 React 項目，請開啟您喜歡的網頁瀏覽器並蒐索「Vite」。存取Vite官網，複製指令「npm create vite@latest」。然後，將此命令貼到您的終端機中。系統會要求您提供一些信息，例如您的專案名稱、庫以及 React 庫的首選語言。回答完問題後，導航至專案資料夾並開啟此資料夾中的終端。執行命令“npm i”下載所需的套件。若要執行該項目，請使用指令“npm run dev”，該項目將在 localhost:5137 上執行。恭喜！您已成功設定您的第一個項目。 ？

了解文件結構

設定 React 專案後，在您最喜歡的程式碼編輯器中開啟它。打開專案後，您將看到一些文件和資料夾。您將找到index.html 文件，它是在Web 瀏覽器中呈現HTML 的主文件。在 src 資料夾內，您可以建立資料夾和文件，以使您的 Web 應用程式正常運作並以您想要的方式顯示。主要有兩個檔案：main.js，負責渲染 React 中的元件；app.js，作為元件的入口點。

結論

恭喜！您剛剛從頭開始建立了您的第一個 React 應用程式。在整個旅程中，您已經學習如何設定環境、使用 Vite 建立專案並了解檔案結構。 React 的靈活性和基於元件的結構使其成為建立現代動態 Web 應用程式的強大工具。現在您已經掌握了基礎知識，您可以探索更高級的功能並將您的 React 技能提升到一個新的水平。不斷實驗、建構和學習－React 的可能性是無限的！

以上是啟動您的 React 之旅：如何創建您的第一個 React 應用程式！的詳細內容。更多資訊請關注PHP中文網其他相關文章！