React List - Create React App

時間 2019-11-06

標籤 react list create app 欄目 React 简体版

原文原文鏈接

Hello 小夥伴們，若是以爲本文還不錯，記得給個 star ，小夥伴們的 star 是我持續更新的動力！GitHub 地址css

【2019-08-16】Hello 小夥伴們，因爲 jsliang 對文檔庫進行了重構，這篇文章中的一些連接可能失效，而 jsliang 缺少精力維護掘金這邊的舊文章，對此深感抱歉。請須要獲取最新文章的小夥伴，點擊上面的 GitHub 地址，去文檔庫查看調整後的文章。html

React 系列文章代碼地址

一目錄

不折騰的前端，和鹹魚有什麼區別前端

目錄
一目錄
二前言
三安裝及初始目錄
四默認支持特性
五配合 VS Code 調試
六分析包大小
七模塊引入 CSS
八 Sass 安裝及使用
九添加圖片、背景、SVG
十 public 文件夾
10.1 引用靜態資源
10.2 Mock 數據
十一代碼打包分割
十二引用 TypeScript
十三 React Router - 路由
十四自定義環境變量
十五測試
十六開發環境代理
十七使用 Ajax 請求獲取數據
十八 Title 和 Meta
十九總結

二前言

Create React App 是一個官方支持的建立 React 單頁應用程序的方法。它提供了一個零配置的現代構建設置。react

本文 絕大多數、99% 內容來自 Create React App 的文檔，1% 來自我的的整理。webpack

參考文獻：

三安裝及初始目錄

下載 Node.js
安裝 Create React App：
1. npm i create-react-app -g
開啓新項目：
1. create-react-app todolist
2. cd todolist
3. npm start
打包項目：npm build

- todolist
  + node_modules —————————— 項目依賴的第三方的包
  - public ———————————————— 共用文件
    - favicon.ico        —— 網頁標籤左上角小圖標
    - index.html         —— 網站首頁模板
    - mainfest.json      —— 提供 meta 信息給項目，並與 serviceWorker.js 相呼應，進行離線 APP 定義
  - src ——————————————————— 項目主要目錄
    - App.css            —— 主組件樣式
    - App.js             —— 主組件入口
    - App.test.js        —— 自動化測試文件
    - index.css          —— 全局 css 文件
    - index.js           —— 全部代碼的入口
    - logo.svg           —— 頁面的動態圖
    - serviceWorker.js   —— PWA。幫助開發手機 APP 應用，具備緩存做用
  - .gitignore ——————————— 配置文件。git 上傳的時候忽略哪些文件
  - package-lock.json ———— 鎖定安裝包的版本號，保證其餘人在 npm i 的時候使用一致的 node 包
  - package.json ————————— node 包文件，介紹項目以及說明一些依賴包等
  - README.md ———————————— 項目介紹文件
複製代碼

參考文獻：入門 - Create React App 中文文檔

四默認支持特性

支持全部現代瀏覽器（IE 九、十、11 除外，若是須要，請自行配置）
支持指數運算符 (ES2016)
支持 async / await (ES2017)
支持 Object Rest(剩餘) / Spread(展開) 屬性 (ES2018)
支持動態 import() (stage 3 proposal)
支持 Class 字段和靜態屬性 (part of stage 3 proposal)
支持 JSX, Flow 和 TypeScript
支持 PostCSS，無需手動添加 CSS 前綴，Create React App 會自動補全
參考文獻：支持的瀏覽器和特性 - Create React App 中文文檔

五配合 VS Code 調試

能夠經過 Visio Studio Code 的插件 Debugger for Chrome 調試 Create React App：

安裝 -> Debugger for Chrome
調試 -> 添加配置：

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

保存 -> 開始調試
經過上述步驟便可開始調試

參考資料：使用 VSCode 調試 React 應用 - 知乎

六分析包大小

使用 source maps 分析 JavaScript 包。

這有助於你瞭解代碼膨脹的來源，從而配合其餘插件來減小每一個包的大小，優化項目。

安裝：npm i source-map-explorer -S
修改 package.json：

"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 App 中如何分析Bundle Size？ - 簡書

七模塊引入 CSS

在 Create React App 中，若是你的 react-scripts 版本是 2.0 或者更高，你能夠經過模塊形式引入樣式：

import React, { Component } from 'react';
import styles from './Button.module.css'; // 將 css modules 文件導入爲 styles
import './another-stylesheet.css'; // 導入常規 CSS 文件

class Button extends Component {
  render() {
    // 做爲 js 對象引用
    return <button className={styles.error}>Error Button</button>;
  }
}
複製代碼

這樣子不會致使樣式的衝突，就比如你 import JS 進來同樣。

參考資料：添加 CSS Modules 樣式表 - Create React App 中文文檔

八 Sass 安裝及使用

安裝 node-sass：npm i node-sass -S
引入：@import 'styles/_colors.scss'; // 假設 styles 目錄在 src/ 目錄下

參考文獻：添加 Sass 樣式表 - Create React App 中文文檔

九添加圖片、背景、SVG

添加圖片：經過 import 引入便可。

import React from 'react';
import logo from './logo.png'; // 告訴 Webpack 這個 JS 文件使用了這個圖片

console.log(logo); // /logo.84287d09.png

function Header() {
  // 導入結果是圖片的 URL 
  return <img src={logo} alt="Logo" />; } export default Header; 複製代碼

引用背景：經過 url 引用便可。

.logo {
  background-image: url(./logo.png);
}
複製代碼

引用 SVG：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> </header> </div> ); } export default App; 複製代碼

或者：

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div> {/* ReactComponent 導入名稱是特殊的 */} {/* Logo 是一個實際的 React 組件 */} <Logo /> </div>
);
複製代碼

參考文獻：添加圖片，字體和文件 - Create React App 中文文檔

十 public 文件夾

在 Create React App 建立的項目中，有個 public 文件夾，該文件夾下一般有：

favicon.ico - 網頁小標籤
index.html - 項目首頁
mainfest.json - 提供 meta 信息給項目，並與 serviceWorker.js 相呼應，進行離線 APP 定義

固然，它不只能夠擁有這些文件，還能夠新增內容。

10.1 引用靜態資源

index.html 能夠引用靜態資源。

在 index.html 中引用的靜態資源不會被 Webpack 打包，而是被複制到打包目錄中，使用方法：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
複製代碼

只須要加上 %PUBLIC_URL%/ 表示引用 public 下的資源便可。

在 JavaScript 中：

render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; } 複製代碼

這樣也會引用 public 中的資源，從而讓圖片 不會被 Webpack 打包。固然，須要犧牲的代價有：

public 文件夾中的全部文件都不會進行後處理或壓縮。
在編譯時不會調用丟失的文件，而且會致使用戶出現 404 錯誤。
結果文件名不包含內容哈希值，所以你須要添加查詢參數或在每次更改時重命名它們（以便清除瀏覽器緩存）。

10.2 Mock 數據

此外，因爲它內含 Node.js，因此還能夠利用這點進行數據模擬（Mock），作法是：

在 public 文件夾中新建 api 目錄，而後建立文件 headerList.json，引用 axios 後，經過： axios.get('/api/headerList.json').then() 便可調用該文件進行 Mock。

參考文獻：使用 public 文件夾 - Create React App 中文文檔

十一代碼打包分割

在 Create React App 中，咱們可使用 React Loadable 來進行代碼的分割。

使用方式：

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);
複製代碼

參考文獻：

十二引用 TypeScript

使用 TypeScript 啓動新的 Create React App項目：npx create-react-app my-app --typescript
往 Create React App 現有項目中添加 TypeScript：npm i typescript @types/node @types/react @types/react-dom @types/jest -S。（記得修改全部 JS 文件爲 TS 文件，例如 src/index.js -> src/index.tsx）

參考文獻：添加 TypeScript - Create React App 中文文檔

十三 React Router - 路由

因爲 Create React App 並無規定路由解決方案，而後市面上比較收歡迎的路由解決方案是 React Router，因此能夠嘗試使用：

安裝：npm i react-router-dom -S
使用：React Router

十四自定義環境變量

定義環境變量：process.env.REACT_APP_SECRET_CODE
獲取特殊內置環境變量：process.env.NODE_ENV。值爲：test、development、production。對應三種環境。

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_SECRET_CODE} /> </form> </div> ); } 複製代碼

在開發環境，該頁面渲染爲：

<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>
複製代碼

十五測試

Create React App 使用 Jest 做爲其測試運行器。

可是很不幸的是，工做中並無用上，估計之後的工做也可能不會用上，因此我們只須要知道有這回事，等有機會再進行嘗試。

參考文獻：

十六開發環境代理

在開發項目的過程當中，最擔憂的莫過於瀏覽器告訴你跨域了：後端端口在 4000，或者主機在另外一個 IP 地址……

因此，咱們須要在開發環境中配置代理。

往 package.json 中添加字段：

"proxy": "http://localhost:4000",
複製代碼

這樣當你調用接口：fetch('/api/todos') 時，它會請求代理到 http://localhost:4000/api/todos。

固然，有可能 proxy 不夠靈活，小夥伴們能夠嘗試經過直接訪問 Express，並鏈接項目的代理中間件，詳情看參考文獻。

參考文獻：

十七使用 Ajax 請求獲取數據

在 Create React App 中，能夠經過下面兩種方法獲取 Ajax 數據：

fetch() API
axios 庫

固然，沒有限制死必須使用這兩種。

這兩種調用 Ajax 請求獲取數據的方式便捷在它返回 Promise 供鏈式調用數據。

參考文獻：使用AJAX請求獲取數據- Create React App 中文文檔

十八 Title 和 Meta

動態更新 Title：document.title API
根據 React 組件更改 Title：React Helmet 等第三方庫
動態更新 Meta：

<!doctype html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__">
    <meta property="og:description" content="__OG_DESCRIPTION__">
  </head>

  <body>
  
  </body>
</html>
複製代碼