react腳手架的建立——小白入門


一、介紹:React 起源於 Facebook 的內部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設Instagram 的網站。

做出來以后,發現這套東西很好用,就在2013年5月開源了。

二、React腳手架:create-react-app

React 的環境搭建,是比較繁瑣的,有很多的依賴:reactreact-dombabelwebpack ... 需要很多的前置知識,很容易讓人從入門到放棄。

於是就誕生了 腳手架 這種東西,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
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM