官方 React 快速上手腳手架 create-react-app

官方 React 快速上手腳手架 create-react-app

摘要: 此文簡單講解了官方 React 快速上手腳手架的安裝與介紹。 1. React 快速上手腳手架 create-react-app 爲了快速地進行構建使用 React 的項目,FaceBook 官方發佈了一個無需配置的、用於快速構建開發環境的腳手架工具 create-react-app。react

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

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

爲了快速地進行構建使用 React 的項目,FaceBook 官方發佈了一個無需配置的、用於快速構建開發環境的腳手架工具 create-react-app。
固然,若是你須要 React Native 的腳手架項目,能夠查看這裏:https://github.com/react-community/create-react-native-app/?spm=a2c4e.11153940.blogcont626713.13.68824d56lnHnXvgithub

使用的緣由以及特性:web

  • 無需配置;
  • 集成了對 React, JSX, ES6 和 Flow 的支持;
  • 集成了開發服務器;
  • 配置好了瀏覽器熱加載的功能;
  • 在 JavaScript 中能夠直接 import CSS 和圖片;
  • 自動處理 CSS 的兼容問題,無需添加 -webkit 前綴;
  • 集成好了編譯命令,編譯後直接發佈成產品,而且還包含了 sourcemaps。

截圖

2. create-react-app 的安裝

命令行中使用 npm 執行安裝命令 npm install -g create-react-app,注意須要添加 g 參數進行全局安裝以及權限的問題。npm

截圖

截圖

截圖

安裝後執行運行命令 npm start 便可在瀏覽器看到運行後的結果,而且已經實現了熱加載的功能。react-native

截圖

3. 須要注意的幾個點

  • Node 的版本必須 >= 4,推薦 Node >= 6 and npm >= 3;
  • 運行起來後瀏覽器已經實現了熱加載刷新,修改代碼保存後瀏覽器會自動刷新;
  • 執行 npm test 或 yarn test 能夠執行測試動做,
  • 編譯項目執行 npm run build 或 yarn build;。


做者:Parry 
出處:http://www.cnblogs.com/parry/ 
本文版權歸做者和博客園共有,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,不然保留追究法律責任的權利。瀏覽器

相關文章
相關標籤/搜索