一、背景介紹01

React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以后，發現這套東西很好用，就在2013年5月開源了。由于 React 的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。

二、環境配置

（一）安裝Node.js、npm、cnpm

當我們在官網下載并安裝Node時，npm也自動安裝好了，一路next后即可。安裝好后鍵入node -v 以及npm -v 來測試是否安裝成功（不需要自己手動配置系統環境變量）

因為國內使用npm很慢，我們可以使用淘寶的cnpm，同時設置鏡像地址npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝成功后，可以鍵入cnpm -v檢查是否安裝成功

（二）創建我們的第一個react程序

例如我們要在D:workSpace下創建first-react-demo這個工程，并跑通，我們依次執行如下步驟window下進入D:workSpace這個文件夾，在地址欄鍵入cmd enter，

cnpm install -g create-react-app全局安裝創建react-app的module（這一步不一定要在workspace目錄下）

create-react-app first-react-demo 在workspct這個文件夾下創建fist-react-demo這個項目

但是，有可能會報錯 Unexpected end of JSON input while parsing near '....0","dependencies":{"' ，假如報錯，需要執行npm cache clean –force

在創建成功的基礎上，我們在打開first-react-demo這個文件夾，地址欄鍵入cmd并enter，在打開的cmd窗口中，鍵入npm start

大功告成。瀏覽器鍵入localhost:3000即可訪問

三、關于樣式

03常用:

• css
• less, cra 默認不支持 less.
• sass/scss, cra 默認支持 sass, 只需要裝一下 node-sass 工具.
• 在 rca 中支持 普通樣式( 默認 ) 和 模塊化樣式
• rac 中的 sass 也是支持者兩種語法的
• 如果后綴名是 .module.sass/scss 那么就會使用 模塊化的方式來加載
• 如果后綴名只有 .sass/scss 那么就會當做普通的樣式來加載

四、其他設置

04

• homepage 用來控制 buil 得到資源的路徑
• proxy 用來配置代理
• 在解包的 配置文件中找到 一些目錄的修改
• 在不解包的情況下如何配置 webpack
• 使用一個新包 react-app-rewired 代替 react-scripts 即可

五、福利時間

05相關知識點：

• React不是一個MVC框架，它是構建易于可重復調用的web組件，側重于UI, 也就是view層
• 其次React是單向的從數據到視圖的渲染，非雙向數據綁定
• 不直接操作DOM對象，而是通過虛擬DOM通過diff算法以最小的步驟作用到真實的DOM上。
• 不便于直接操作DOM，大多數時間只是對 virtual DOM 進行編程

歡迎大家一起跟我討論技術問題~如果碰見了技術問題，也可以私信我哦，最后記得點個收藏和關注哦~

總結

以上是生活随笔為你收集整理的react安装_前端大牛进阶---gt;React必会教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。