天天看點

官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點

官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點

此文簡單講解了官方 React 快速上手腳手架的安裝與介紹。

1. React 快速上手腳手架 create-react-app

為了快速地進行建構使用 React 的項目,FaceBook 官方釋出了一個無需配置的、用于快速建構開發環境的腳手架工具 create-react-app。

當然,如果你需要 React Native 的腳手架項目,可以檢視這裡:

create-react-native-app

使用的原因以及特性:

  • 無需配置;
  • 內建了對 React, JSX, ES6 和 Flow 的支援;
  • 內建了開發伺服器;
  • 配置好了浏覽器熱加載的功能;
  • 在 JavaScript 中可以直接 import CSS 和圖檔;
  • 自動處理 CSS 的相容問題,無需添加

    -webkit

    字首;
  • 內建好了編譯指令,編譯後直接釋出成産品,并且還包含了 sourcemaps。
官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點

2. create-react-app 的安裝

指令行中使用 npm 執行安裝指令

npm install -g create-react-app

,注意需要添加 g 參數進行全局安裝以及權限的問題。

官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點
官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點
官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點

安裝後執行運作指令

npm start

即可在浏覽器看到運作後的結果,并且已經實作了熱加載的功能。

官方 React 快速上手腳手架 create-react-app1. React 快速上手腳手架 create-react-app2. create-react-app 的安裝3. 需要注意的幾個點

3. 需要注意的幾個點

  • Node 的版本必須 >= 4,推薦 Node >= 6 and npm >= 3;
  • 運作起來後浏覽器已經實作了熱加載重新整理,修改代碼儲存後浏覽器會自動重新整理;
  • 執行

    npm test 或 yarn test

    可以執行測試動作,更多請參閱 這裡
  • 編譯項目執行

    npm run build 或 yarn build

  • 更多使用向導請插件

作者:

Parry

出處:

http://www.cnblogs.com/parry/

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。

繼續閱讀