React 介紹

最近兩年，react 也愈來愈火熱，想要在里面分一杯羹，那肯定逃不過 react 技術，不管是職場人士提升自己的硬實力還是畢業生找工作，都可以跟著本文章一步一步從入門到實戰。

什么是 react ？

React是Facebook開發的一款JS庫，那么Facebook為什么要建造React呢，主要為了解決什么問題，通過這個又是如何解決的？

從這幾個問題出發我就在網上搜查了一下，有這樣的解釋。

Facebook認為MVC無法滿足他們的擴展需求，由于他們非常巨大的代碼庫和龐大的組織，使得MVC很快變得非常復復雜，每當需要添加一項新的功能或特性時，系統的復雜度就成級數增長，致使代碼變得脆弱和不可預測，結果導致他們的MVC正在土崩瓦解。認為MVC不適合大規模應用，當系統中有很多的模型和相應的視圖時，其復雜度就會迅速擴大，非常難以理解和調試，特別是模型和視圖間可能存在的雙向數據流動。

react 主要功能

React主要用于構建UI。可以在React里傳遞多種類型的參數，如聲明代碼，幫助開發者渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變量、甚至是可交互的應用組件。

react 框架特點

• 1.聲明式設計：React 使創建交互式 UI 變得輕而易舉。為應用的每一個狀態設計簡潔的視圖，當數據變動時 React能高效更新并渲染合適的組件。
• 2.組件化: 構建管理自身狀態的封裝組件，然后對其組合以構成復雜的 UI。
• 3.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
• 4.靈活：無論使用什么技術棧，在無需重寫現有代碼的前提下，通過引入React來開發新功能。

開發工具

這里，我們就使用 VSCode 開發工具，簡單方便。

如果還沒安裝的，可以去官網上 https://code.visualstudio.com/Download 安裝。選擇自己電腦的版本系統即可。

安裝完成后，我們先在本地創建一個 名為 react 的文件夾。

然后，雙擊打開安裝的 vscode ，找到 File ，點擊 選擇 Open Folder ，選擇剛剛創建好的 react 文件夾

然后會出現一個空項目界面，如下圖所示：

這時候，我們需要在終端利用命令行的方式，創建項目，npx create-react-app

然后等待它創建成功。

當創建成功后，我們打開我們的項目文件夾，看一下文件夾目錄

如果出現·一下這些內容，就代表著項目創建成功。

大家可以看到，文件夾內容也很多哈，對于0基礎的小白來說，看著有點復雜，那我們可以把 src 文件夾下的內容，除了標紅的給大家圈出來的倆外，全刪了就行。只保留，index.js 和 app.js 倆文件就行，如圖所示，這樣就干凈整潔多了。

項目創建成功后，我們需要把終端目錄切換到項目文件下，，不然后續啟動的時候會報錯，找不到文件。如圖所示：

然后我們打開 package.json 文件 ，點擊deug，選擇第一個start 就可以啟動項目了，也可以在命令行了里輸入，npm run start

啟動后如果出現以下界面，代表著項目創建成功了，我們就可以在里面寫業務了！。

渲染測試

既然項目創建成功了，那我們就稍作修改，改一下頁面數據看看能不能展現出來。

如圖所示，修改下，app.js 內 div里的內容，看下頁面效果：

至此第一步，項目的開發環境的基礎搭建已經完成，不管是做過開發的還是0基礎未開發過的，都可以利用教程，單獨創建一個react 項目。