create-react-app教程-使用篇

原文連接 create-react-app教程-使用篇

是否是厭倦了每次新建web項目繁瑣的配置，想不想只用10秒搭建就搭建一個完整的react項目？

create-react-app 分爲兩個部分

• 其中 create-react-app是建立單頁面的react腳手架項目腳本 ；
• 而react-scripts則管理着工程的依賴。

若是咱們手動建立react web應用程序的時候,要本身經過 npm 或者 yarn 安裝項目的所有依賴，再寫webpack.config.js,一系列複雜的配置,搭建好開發環境後寫src源代碼。使用 create-react-app 去自動構建你的app程序, 你的項目無需配置，也沒有複雜的目錄結構，只有你構建應用所需的文件。省去了不少精力，最適合快速上手一個demo了。

create-react-app 使用

先來看看如何十秒上手create-react-app!

//my-app 是你要建立的web單頁面項目名字
npx create-react-app my-app
//npx 須要 npm 5.2+ 
cd my-app
npm start
複製代碼

輸入上述命令後，打開 http://localhost:3000/ 就能夠看到初始頁面了~

文件結構

接着上面的命令，能夠看到生成了以下文件：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
複製代碼

public/index.html 是頁面模板,src/index.js 則是入口JS文件

其中src目錄和 public目錄須要注意下。只有在src目錄下的文件纔會被webpack編譯，js和css文件都建議放在此處；而public文件夾則存放着被 public/index.html使用的資源。

webpack配置

對於喜歡手動建立web項目的人來講，沒有webpack的配置非常不習慣啊！我就是要手動配置webpack怎麼辦？

那就是使用 github.com/timarney/re… 使用react-app-rewired 須要三步：

1) 安裝 react-app-rewired

npm install react-app-rewired --save-dev
複製代碼

2) 在項目根目錄建立 config-overrides.js文件

/* config-overrides.js */
module.exports = function override(config, env) {
  //console.log('原webpack配置 config:',config)
  //在這裏修改config就行
  //console.log('修改後webpack配置 config:',config)
  return config;
}
複製代碼

3） 修改package.json中script:

/* package.json */
  "scripts": {
// "start": "react-scripts start",
   "start": "react-app-rewired start",
// "build": "react-scripts build",
   "build": "react-app-rewired build",
// "test": "react-scripts test --env=jsdom",
   "test": "react-app-rewired test --env=jsdom"
}
複製代碼

那麼如何查看create-react-app自帶的依賴配置呢？

答案就是使用npm run eject 。npm run eject的做用就是將原有隱藏的依賴（好比Webpack, Babel, ESLint等）暴露出來， 請注意這是不可逆的行爲。

//npm run eject執行後 項目下多了這樣的文件
//個人create-react-app版本爲1.5.2
|-config
    |-jest
        |-cssTransform.js
        |-fileTransform.js
    |-env.js
    |-paths.js
    |-webpack.config.dev.js
    |-webpack.config.prod.js
    |-webpackDevServer.config.js
複製代碼

查看 webpack.config.dev.js 和 webpack.config.prod.js 支持的支持的依賴大體有：

• React, JSX, ES6, TypeScript 和 Flow 語法支持
  • JSX,
  • Flow
  • TypeScript.
• ES6之外的特性
  • Exponentiation Operator (ES2016).
  • Async/await (ES2017).
  • Object Rest/Spread Properties (ES2018).
  • Dynamic import() (stage 3 proposal)
  • Class Fields and Static Properties (part of stage 3 proposal).
• 經過Autoprefixer 幫你的css文件自動添加瀏覽器兼容前綴
• 快速交互式單元測試運行程序，內置對覆蓋率報告的支持。
• 一個能檢查常見錯誤的實時服務器
• 打包腳本 能輸出帶 hashes 和 sourcemaps信息.
• 使用單個react-script腳本對上面依賴無侵入更新

使用sass樣式

在create-react-app中使用 Sass須要如下步驟：

1) 安裝 node-sass

npm install node-sass --save
  # or
  yarn add node-sass
複製代碼

如今你能夠重命名 src/App.css 爲 src/App.scss而後在 src/App.js中更新爲 import src/App.scss ,.scss 或 .sass 後綴的文件會自動被編譯。

使用 Bootstrap

你能夠嘗試使用下reactstrap, 這是一個流行的整合bootstrap和react的庫。

1） 安裝

npm install --save reactstrap bootstrap@4
#or
yarn add bootstrap@4 reactstrap
複製代碼

2） 在你的src/index.js 文件內容的頂部，導入 Bootstrap CSS 和可選的 Bootstrap theme CSS

import 'bootstrap/dist/css/bootstrap.css';  // 必須的 
import 'bootstrap/dist/css/bootstrap-theme.css';  // 可選的 
複製代碼

3） 使用 reactstrap 組件

import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap';
複製代碼