create-react-app入門教程

create-react-app入門教程

Create React App是FaceBook的React團隊官方出的一個構建React單頁面應用的腳手架工具。它自己集成了Webpack，並配置了一系列內置的loader和默認的npm的腳本，能夠很輕鬆的實現零配置就能夠快速開發React的應用。

Quick Start（快速入門）

全局安裝

首先確保你電腦上安裝最新的

# 全局安裝
npm install -g create-react-app
# 構建一個my-app的項目
npx create-react-app my-app
cd my-app

# 啓動編譯當前的React項目，並自動打開 http://localhost:3000/
npm start

 

以上命令執行完成後，則自動打開： http://localhost:3000/

若是你不能確保最新版本，能夠先嚐試卸載： npm uninstall -g create-react-app,而後再全局安裝。

構建React項目的其餘方式

• npm

# npm init <initializer> is available in npm 6+
npm init react-app my-app

 

• Yarn

# yarn create is available in Yarn 0.25+
yarn create react-app my-app

 

項目目錄

項目的默認目錄：

├── package.json
├── public                  # 這個是webpack的配置的靜態目錄
│   ├── favicon.ico
│   ├── index.html          # 默認是單頁面應用，這個是最終的html的基礎模板
│   └── manifest.json
├── src
│   ├── App.css             # App根組件的css
│   ├── App.js              # App組件代碼
│   ├── App.test.js
│   ├── index.css           # 啓動文件樣式
│   ├── index.js            # 啓動的文件（開始執行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

默認的npm的腳本

啓動開發

npm start
# or
yarn start

 

啓動測試

npm test
#or
yarn test

 

構建生產版本

npm run build
#or
yarn build

 

解壓默認的webpack配置到配置文件中

npm run eject

 

啓用sass

react-scripts@2.0.0 以上版本才適用。

安裝依賴

要使用Sass必須首先安裝node-sass

$ npm install node-sass --save
$ # or
$ yarn add node-sass

 

安裝完以後，咱們就能夠直接把原來的CSS文件後綴直接改成 .scss 或者.sass,而後組件中導入的文件再也不是 css文件而給我scss文件便可。

import React, {Component} from 'react';
import store from './Store/Index';
import {AddNumCreator, MinusNumCreator} from './Store/ActionCreaters';
import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>瀟灑</h1>
        </header>
      </div>
    );
  }
}

export default App;

 

在sass文件中引入其餘sass文件

• 引入src中的scss文件 @import 'styles/_colors.scss';

• 引入node_modules中的樣式： @import '~nprogress/nprogress';

~ 就表明： node_modules

CSS Modules支持

導入CSS文件或者Sass文件的時候，能夠用一個變量接收一下返回值。那麼就能夠直接經過它來訪問CSS或者Sass中的內部樣式類了。好比：

• Button.module.css

.error {
  background-color: red;
}

 

• Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

 

結果：

<!-- This button has red background -->
<button class="Button_error_ax7yz">Error Button</button>

 

瞭解更多關於CSS模塊化

公共目錄

公共目錄裏面的內容不會被webpack進行處理，僅僅會拷貝到最終生成的項目的根目錄下。

HTML模板修改

在public目錄中有個index.html是單頁面應用的基本模板，全部react生成的代碼都會注入到此HTML中。因此此處能夠添加一些cdn腳本或者全局的html。

添加全局的資源（圖片、字體、svg、視頻等）

在公共目錄下，你能夠放字體文件、圖片、svg等文件，訪問這些文件最好添加 %PUBLIC_URL%做爲根目錄。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

環境變量

巧妙的使用環境變量能夠幫咱們在項目中區分開生產環境仍是編譯環境，從而執行不一樣的代碼。

命令行直接添加環境變量

• Windows (cmd.exe)

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

 

• Windows (Powershell)

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

 

• Linux, macOS (Bash)

REACT_APP_NOT_SECRET_CODE=abcdef npm start

 

添加自定義環境變量文件.env

項目根目錄下建立.env文件，文件內部添加 key=value的配置能夠直接應用於項目的編譯中。

REACT_APP_NOT_SECRET_CODE=abcdef

 

Note: 若是建立自定義的環境變量必須以REACT_APP_開頭.

在項目中使用環境變量

在項目中能夠直接用process.env.XXX訪問咱們的自定義的環境變量。好比：

• js中使用

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

 

再好比：判斷是不是生產環境

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}

 

• HTML中使用

<title>%REACT_APP_WEBSITE_NAME%</title>

配合TypeScript

第一種方式：建立項目的時候直接配置好TypeScript.

npx create-react-app my-app --typescript
#or
yarn create react-app my-app --typescript

 

第二種方式：爲現有的React項目添加TypeScript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

配置代理

package.json配置代理

配置簡單代理，直接在package.json文件中添加proxy節點便可：

{
  ...
  "proxy": "http://localhost:4000",
  ...
}

 

自定義配置代理

第一步：安裝 http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

 

第二步：建立： src/setupProxy.js 添加以下內容:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

 

Visual Studio Code配置React開發環境

React集成VSCode測試

第一步: 首先安裝：Debugger for Chrome插件。 第二步： 項目根目錄下建立 .vscode文件夾。 第三步：建立launch.json文件 文件內容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

 

此時能夠F5直接啓動測試了。

插件

• Reactjs code snippets
• Prettier - Code formatter
• ES7 React/Redux/GraphQL/React-Native snippets
• eslint

HTTPS託管靜態站

有時候須要用HTTPS進行調試相關結構，因此須要把靜態站也作成HTTPS的，那麼如下配置：

配置HTTPS的環境變量爲true而後再用npm start啓動dev server就是HTTPS的了。

• Windows (cmd.exe)

set HTTPS=true&&npm start

 

• Windows (Powershell)

($env:HTTPS = "true") -and (npm start)

 

• Linux, macOS (Bash)

HTTPS=true npm start

 

瀏覽器可能有安全警告，不用管，直接測試，enjoy it！

分析包結構的大小

Source map explorer能夠幫助咱們分析代碼最終打包的bundles的代碼來自哪裏，

安裝：

npm install --save source-map-explorer
#or
yarn add source-map-explorer

 

添加分析腳本到package.json的scripts中：

"scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

那麼就能夠運行如下命令進行分析最終打包的狀況了：

npm run build
npm run analyze

 

其餘react的默認配置

• 直接可使用sass（安裝node-sass模塊後）
• 直接可使用css（import）
• 直接能夠導入 圖片、svg、字體文件等，已經配置好相應的loader
• ES67代碼直接能夠用
  • class
  • 箭頭函數
  • 私用變量
  • 靜態屬性
  • 繼承
  • 裝飾器（XXX不能用）