首頁  >  文章  >  web前端  >  react鷹架有哪些

react鷹架有哪些

青灯夜游
青灯夜游原創
2022-03-21 18:47:504169瀏覽

react腳手架有:1、Create React App;2、Next.js;3、Gatsby;4、nwb;5、razzle;6、Neutrino;7、react-cli;8、Rekit等等。

react鷹架有哪些

本教學操作環境:Windows7系統、react17.0.1版、Dell G3電腦。

一. 認識鷹架

#1.1. 前端工程的複雜化

如果我們只是開發幾個小的demo程序,那麼永遠不需要考慮一些複雜的問題:

  • 例如目錄結構如何組織劃分;

  • 例如如何管理檔案之間的相互依賴;

  • 例如如何管理第三方模組的依賴;

  • 例如專案發布前如何壓縮、打包專案;

  • 等等...

現代的前端專案已經越來越複雜了:

  • 不會再是在HTML中引入幾個css文件,引入幾個編寫的js文件或第三方的js文件這麼簡單;

  • 例如css可能是使用less、sass等預處理器進行編寫,我們需要將它們轉換成普通的css才能被瀏覽器解析;

  • 例如JavaScript程式碼不再只是寫在幾個檔案中,而是透過模組化的方式,被組成在成百上千個檔案中,我們需要透過模組化的技術來管理它們之間的相互依賴;

  • 例如專案需要依賴很多的第三方函式庫,如何更好的管理它們(例如管理它們的依賴、版本升級等);

為了解決上面這些問題,我們需要再去學習一些工具:

  • 如babel、webpack、gulp。配置它們轉換規則、打包依賴、熱更新等等一些的內容;

  • 你會發現,你還沒有開始做項目,你就面臨一系列的工程化問題;

《鷹架》的出現,就是幫助我們解決這一系列問題的;

1.2. 鷹架是什麼呢?

傳統的鷹架指的是建築學的一種結構:在搭建樓房、建築物時,臨時搭建出來的一個框架;

react鷹架有哪些

程式設計中提到的鷹架(Scaffold),其實是一種工具,幫我們可以快速產生專案的工程化結構;

  • 每個專案作出完成的效果不同,但是它們的基本工程化結構是相似的;

  • 既然相似,就沒有必要每次都從零開始搭建,完全可以使用一些工具,幫助我們生產基本的工程化範本;

  • 不同的項目,在這個範本的基礎之上進行專案開發或進行一些設定的簡單修改即可;

  • 這樣也可以間接保證專案的基本結構一致性,方便後期的維護;

#總結:腳手架讓專案從搭建到開發,再到部署,整個流程變得快速且方便;

react鷹架有哪些

1、官方推薦的鷹架(https://react.docschina.org/docs /create-a-new-react-app.html)

react的腳手架其實非常多, 其中官方推薦的腳手架有下面這些:

  • Create React App :如果你是在學習React 或建立一個新的單頁應用程式

  • Next.js:如果你是在用Node.js 建立服務端渲染的網站

  • Gatsby:如果你是在建立面向內容的靜態網站

  • #nwb:用於React應用程式、庫和其他web npm模組的工具包

  • razzle:建立沒有設定的伺服器呈現的通用JavaScript應用程式

  • #Neutrino:建立和建構零初始設定的現代JavaScript應用程式

2、其他鷹架

  • #react-cli腳手架

  • Rekit鷹架

【相關推薦:Redis影片教學

以上是react鷹架有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn