前言

作為一個前端開發有些不好意思，居然還沒有接觸過 React ，就借這段時間積累下 React 相關經驗，為疫情過後能有更多的就業機會。

如果你已經是個經驗豐富的 React Developer 可能這系列文章不太適合你閱讀。

推薦工具鏈

我們可以像以前使用 jquery 一樣，通過 script 指令碼來引用 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 資料夾，通過 script 命令啟動：

你將看到這樣一個頁面：

專案初窺

專案指令碼

我並不是太了解 npm 所有的 api ，但有個習慣是：每當接觸一個陌生專案，通常會先去看 package.json 檔案。

然後在 scripts 選項中，看大致有哪些指令碼：

當然目前我們只要暫時知道 start 和 build 就行了。

webpack

注意到，整個專案使用了 react 相關三個核心 package ：

並且所有的 scripts 命令都涉及 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 相關概念，逐步入門。

為了更好的閱讀體驗，你可以在底下的“了解更多”檢視原文（我的語雀知識庫）。