前言
作為一個前端開發有些不好意思,居然還沒有接觸過 React ,就借這段時間積累下 React 相關經驗,為疫情過後能有更多的就業機會。
如果你已經是個經驗豐富的 React Developer 可能這系列文章不太適合你閱讀。
雖然我承認下面大多數內容,基本都可以在官網找到原型。 但我會努力讓你們儘可能不枉此行,如果有不對之處,望各位評論指出。
推薦工具鏈
我們可以像以前使用 jquery 一樣,通過>React ,並作為我們快速上手。
React 提供了多種工具鏈來幫助我們開始構建一個新應用:
· 如果你是在學習 React 或創建一個新的單頁應用,請使用 Create React App。
· 如果你是在
用 Node.js 構建服務端渲染的網站,試試 Next.js。· 如果你是在構建面向內容的靜態網站,試試 Gatsby。
· 如果你是在打造組件庫或將 React 集成到現有代碼倉庫,嘗試更靈活的工具鏈。
我這裡只是學習之用,所以選擇開箱即用的 Create React App 方式,它會創建一個 SPA 單頁面應用。
create-react-app
這是個簡單的腳手架,它幫我們封裝了 webpack 構建工具,使我們能快速啟動一個 React 項目。
-h
create-react-app help 命令介紹:
安裝
可以參考官網,直接使用如下命令安裝,並啟動應用:
npx 是會判斷 npm package 是否已安裝,並按照對應的腳本命令執行對應 npm package 。
可以簡單的認為上面的命令做了如下事情:
啟動
進入到新建的 app 文件夾,通過>
你將看到這樣一個頁面:
項目初窺
項目腳本
我並不是太瞭解 npm 所有的 api ,但有個習慣是:每當接觸一個陌生項目,通常會先去看 package.json 文件。
然後在>
當然目前我們只要暫時知道 start 和 build 就行了。
webpack
注意到,整個項目使用了 react 相關三個核心 package :
並且所有的>react-scripts ,當打開此包的目錄,瞭解到這包就是幫我們做了 webpack 配置:
無論是否掌握 webpack ,有興趣可以看些別人寫的 config ,起碼對於我來說是有很多地方可以借鑑的,以便日後自己建腳手架踩坑。
sass
由於 css 寫起來並不是怎麼好,試下是否可以用 sass 之類的 css 預編譯語言?
在官網說是支持的,並且有詳細的說明。
把項目自帶的 css 文件,重命名為 scss 後綴後,正常運行:
值得注意,只支持 sass ,比如 less 是不支持的,可以在對應的 webpack config 找到相關配置:
更多信息
當然實際使用可能會遇到其他問題,更多細節可以參考 create-react-app 的官網。那裡會有很多最佳實踐的方式。
React 相關
如果有 vue 之類現代化前端框架經驗的開發,肯定能很快摸清這個 React 項目的結構,甚至馬上上手 React 。
主入口
index.js 肯定 webpack 構建的 entry 文件,也是整個單頁面的起始點。
在裡面通過 ReactDOM.render 來渲染 App 組件,並且掛載到 html 上的 Id 為 root 的節點上。
組件
作為第一個基礎的組件示例,能看到最後 App 由 export default 默認導出,並在 index.js 通過 JSX 來解析使用。
App 方法中,按照 JSX 語法編寫。
雖然我現在就是把它當 HTML 來認為,但這兩者一定有所不同。因為注意到 className ,並不是 class 屬性。
同時也看到通過
{} 大括號 來引用一些變量值。這就是目前看到有關 React 的影子。
總結
離正兒八經的業務項目肯定還有很長一段路要走,不過對於我這樣剛上手學習 React 已經足夠了,接下來就看 React 相關概念,逐步入門。
為了更好的閱讀體驗,你可以在底下的“瞭解更多”查看原文(我的語雀知識庫)。
閱讀更多 前端雨爸 的文章