一、背景介紹01

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

二、環(huán)境配置

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

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

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

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

（二）創(chuàng)建我們的第一個react程序

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

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

create-react-app first-react-demo 在workspct這個文件夾下創(chuàng)建fist-react-demo這個項目

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

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

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

三、關(guān)于樣式

03常用:

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

四、其他設(shè)置

04

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

五、福利時間

05相關(guān)知識點(diǎn)：

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。