前言

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

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

雖然我承認下面大多數內容，基本都可以在官網找到原型。 但我會努力讓你們儘可能不枉此行，如果有不對之處，望各位評論指出。

推薦工具鏈

我們可以像以前使用 jquery 一樣，通過>React ，並作為我們快速上手。

React 提供了多種工具鏈來幫助我們開始構建一個新應用：

· 如果你是在學習 React 或創建一個新的單頁應用，請使用 Create React App。

· 如果你是在

· 如果你是在構建面向內容的靜態網站，試試 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 相關概念，逐步入門。

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

閱讀更多 前端雨爸 的文章

關鍵字: Node.js jQuery 入門