快速搭建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怎么辦？

那就是使用 https://github.com/timarney/react-app-rewired 使用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';