一、介紹:React 起源於 Facebook 的內部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設Instagram 的網站。
做出來以后,發現這套東西很好用,就在2013年5月開源了。
二、React腳手架:create-react-app
React 的環境搭建,是比較繁瑣的,有很多的依賴:react
、react-dom
、babel
、webpack
... 需要很多的前置知識,很容易讓人從入門到放棄。
於是就誕生了 腳手架
這種東西,create-react-app
就是一個 React 的腳手架,用它可以很方便的就創建了整個 React 的環境搭建,它解決了所有的依賴問題。
越上層的建築,越方便的工具,也說明了我們對底層的定制性越差。不過對於新手學習的同學,把應用的東西先做起來之后,有必要再去理解底層環境的東西,也是種不錯的學習的路徑。
三、建立腳手架:
(1)電腦要先裝上最新版的Node.js https://www.runoob.com/nodejs/nodejs-install-setup.html
它會直接包括住:npm npm是個啥?https://blog.csdn.net/qq_37696120/article/details/80507178
(2)裝好了Node.js后配置一下環境變量,然后就可以使用npm 下載 create-react-app 了:
使用淘寶 NPM 鏡像
大家都知道國內直接使用 npm 的官方鏡像是非常慢的,這里推薦使用淘寶 NPM 鏡像。
淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。
你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模塊了:
$ cnpm install [name]
接着:
cnpm isntall -g create-react-app 就是下載這個了腳手架了
create-react-app my-app 創建一個名為my-app的項目(可以先進入cd想部署的文件夾,然后創建這個項目,否則默認c盤)
慢慢等待安裝
安裝好了之后,接下來進入這個目錄 cd my-app
然后安裝依賴(腳手架都差不多) npm install
啟動項目:npm start
項目跑起來的話,就用默認用你的3000端口打開構建的本地服務器,如果你的3000端口被占用,就會用其他端口打開啦
項目查看 可以用 webstorm或者vsCode打開,然后編寫,運行。
寫好了上傳github 然后可以部署到github page 上面,免費訪問。教程: https://www.jianshu.com/p/02c86540d324
參考博客:
https://www.runoob.com/nodejs/nodejs-npm.html
https://www.jianshu.com/p/e16a9da931ec
遇到問題:
1.【構建React-app應用時create-react-app卡住超慢的解決辦法 - Edluminary的blog - CSDN博客】https://blog.csdn.net/qq_40197828/article/details/86823985
2.React 項目文件結構解析:https://my.oschina.net/korabear/blog/1815170
3.利用webstorm創建react項目:https://blog.csdn.net/qq_39207948/article/details/79467144