# React

# 精选组件

TIP

避免重复造轮子

类型	组件
代码高亮	react-syntax-highlighter
富文本编辑器	react-quill,Braft Editor
代码分割	loadable-components

# ReactApp Eslint

https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app

npm install --save-dev eslint-config-react-app eslint
yarn add -D eslint-config-react-app eslint
pnpm add -D eslint-config-react-app eslint

# `.eslintrc.json`

{
  "extends": "react-app"
}

# CRA自定义配置(craco)

安装依赖

yarn add @craco/craco

修改 package.json 里的 scripts 属性

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

[配置](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration-overview

在项目根目录创建一个 craco.config.js 用于修改默认配置

/* craco.config.js */
module.exports = {
  // ...
};

# 自定义配置(不 eject) react-app-rewired+customize-cra

TIP

使用 Create React App 创建的应用

react-app-rewired,customize-cra

TIP

使用 react-app-rewired 对 create-react-app 的默认配置进行自定义

  yarn add react-app-rewired customize-cra

/* 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",
+   "test": "react-app-rewired test",
}

在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

2.babel-plugin-import

TIP

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

yarn add babel-plugin-import

// config-overrides.js   按需加载 antd
const { override, fixBabelImports } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  })
);

3.Antd自定义主题

TIP

自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式

yarn add less less-loader

// config-overrides.js
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

4.Proxy


//package.json中加入
  "proxy": {
    "/api": {
      "target": "http://localhost:8080",
      "changeOrigin":true
    },
  }

5.TypeScript React App

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

# 服务端渲染(SSR)

1.Next.js

使用 create-next-app 快速创建 Next.js 项目

npm install -g create-next-app

create-next-app my-app

# Prism高亮代码

1.安装 Prism

yarn add prismjs
yarn add --dev babel-plugin-prismjs

2.配置

// config-overrides.js
const { override, useBabelRc } = require("customize-cra");

module.exports = override(
  useBabelRc() // 启用.babelrc
);

创建或修改.babelrc,添加 babel-plugin-prismjs

{
  "presets": ["babel-preset-react-app"],
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "html"],
        "plugins": ["line-numbers", "show-language"],
        "theme": "tomorrow", //node_modules/prismjs/themes/prism-*.css
        "css": true
      }
    ]
  ]
}

3.实例

import React, { useState, useEffect } from "react";
import Prism from "prismjs";

function App() {
  const [code] = useState(
    `const bar=1
    const foo='123`
  );
  useEffect(() => {
    setTimeout(() => Prism.highlightAll(), 0);
  }, [code]);
  return (
    <>
      <pre className="line-numbers">
        <code className="language-js">{code}</code>
      </pre>
    </>
  );
}

export default App;

# React.lazy 和 Suspense 实现动态引入和代码分割

import React, { Suspense } from "react";
const OtherComponent = React.lazy(() => import("./OtherComponent"));
const AnotherComponent = React.lazy(() => import("./AnotherComponent"));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

# TIPS

# React 引入静态文件

import

import img from '/img/img.png';
...
<img src={img}  />

require

<video width="320" height="240" loop muted data-autoplay autoPlay>
  <source src={require('movie.mp4')} type="video/mp4">
  <source src={require('movie.webm')} type="video/webm" />
您的浏览器不支持Video标签。
</video>

# Mobx(ts+hooks)

计数器实例

安装依赖

yarn add mobx mobx-react

store

// index.ts
import { createContext, useContext } from 'react'
import CountStore from './CountStore'

const store = {
  countStore: new CountStore()
}

const storeContext = createContext(store);

export const useStore = () => useContext(storeContext);

// CountStore.ts
import { observable, action, computed } from 'mobx';

export default class CountStore {

  @observable
  count: number = 0;

  @action.bound
  increase() {
    this.count++;
  }
  @action.bound
  decrease() {
    this.count--;
  }

  @computed get doubleCount() {
    return this.count * 2;
  }
}

Counter

//Counter.tsx
import React from "react";
import { useStore } from "./store";
import { observer } from "mobx-react";

function Counter() {
  const {
    countStore: { count, increase, decrease, doubleCount },
  } = useStore();
  return (
    <>
      <div>count:{count}</div>
      <div>doubleCount:{doubleCount}</div>
      <button onClick={ increase}>increase</button>
      <button onClick={ decrease}>decrease</button>
    </>
  );
}

export default observer(Counter);