1.资源文件位置 图片一般放在src/assets目录下
2.如何引入文件路径
1.可以使用create-react-app提供的yarn run eject 将所有内建的配置暴露出来，然后配置
2.Create React App 3可以使用绝对路径，参考官网或者网上一些文章，例如https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d
3.我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装
customize-cra。
const {
override,
fixBabelImports,
addWebpackAlias
} = require('customize-cra')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = override(
// 配置路径别名
addWebpackAlias({
views: resolve('src/views'),
service: resolve('src/service'),
store: resolve('src/store'),
utils: resolve('src/utils')
}),
// antd按需加载
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
)
3 react中css解决方案
1 原生CSS结合CSS处理器（Sass和PostCSS/less）：该方式样式易于全局污染，多人协作易于发生冲突
引入less或sass ,css文件以.less或.scss结尾，然后引入
2 React中编写CSS常见的方式
Inline CSS
CSS In JS
Styled Components
CSS Modules 使用CSS Modules编写CSS，相比原生CSS是舒服多了，但引用组件库（独立库）就有点头疼，组件库样式覆盖令人头疼
可参考这篇文章https://juejin.im/post/5b39e63ae51d4562aa017c81#heading-9
使用css module方式
css文件结尾 [name].module.scss
import header from './index.module.less';
jsx 文件 如果css命名为短横线形式的需要使用[]
function Header() {
return (
<header className={header['App-header']}>
<div className={header['headerWrap']}>
<img src={logo} className={header['App-logo']} alt="logo" />
<div>
<Link to="/home" className={header['App-link']}>首页</Link>
<Link to="/about" className={header['App-link']}>关于</Link>
<Link to="/login" className={header['App-link']} >登录 </Link>
</div>
</div>
</header>
);
}
4 国际化
react-18next
5 打包 在package.json 加入"homepage": "."
6 跨域
在src/目录下新建setupProxy.js
先安装npm install --save-dev http-proxy-middleware
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/api/v1', {
target: 'https://cnodejs.org',
changeOrigin: true
}));
}
要写changeOrigin: true
参考 https://github.com/chimurai/http-proxy-middleware
7 可以搭配metiara ui
8 grid 布局
这个挺好用的，但是兼容还是有待考虑，目前flex用的比较多
9 react中使用svg icon
1或许可以自己封装成一个组件
2creat-react-app中有提供功能
直接导入svg作为React组件
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo 是一个实际的 React 组件 */}
<Logo />
</div>
);
>3直接改变
.App-logo g{
fill:salmon;
}
.App-logo path{
stroke:palegoldenrod;
stroke-width:10px;
fill:none;
stroke-dasharray;35px 15px;
animation:orbit 1s infinite linear;
}
@keyframes orbit {to {stroke-dashoffset:50px;}}
https://www.html.cn/create-react-app/docs/adding-images-fonts-and-files/
可能涉及到的名词 svgr react-svg-loader
可参考文章https://medium.com/@rossbulat/working-with-svgs-in-react-d09d1602a219
https://www.robinwieruch.de/react-svg-icon-components
https://medium.com/itsoktomakemistakes/react-create-react-app-svg-icons-styled-component-570b4e9f07b
webpack加载程序是SVGR提供的三个主要解决方案之一，具体取决于您是希望在命令行上，在自动脚本中操作SVG，还是在将它们导入模块时：
@svgr/cli：CLI工具，为我们提供了简单的命令，可以将单个文件或整个SVG文件目录转换为React组件.js文件
@svgr/core：此核心SVGR包旨在嵌入NodeJS程序中，以构建用于将SVG处理为组件的自动化工具
@svgr/webpack：最广泛采用的解决方案，以及将SVG作为React组件导入的优雅方法
作为Rollup或Parcel插件：另外两个Javascript模块捆绑包，它们不太了解，但支持SVGR。
使用前三个包装的优点是相辅相成的; 如果需要，可以在React项目的SVG管理工作流程中采用CLI，Node API和Webpack包。
然而，我们在这里专注于Webpack加载器，我们将在本文的后面进一步使用它来演示现代SVG集成的实际用例。
10 代码分割
使用之前：
import { add } from './math';
console.log(add(16, 26));
使用之后：
import("./math").then(math => {
console.log(math.add(16, 26));
});
动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。
当 Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用 Create React App，该功能已配置好，你能立刻使用这个特性。Next.js 也已支持该特性而无需再配置。
11懒加载
React.lazy
注意:
React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。
React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
使用之前：
import OtherComponent from './OtherComponent';
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
使用之后：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
这个代码将会在渲染组件时，自动导入包含 OtherComponent 组件的包。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。
12命名导出（Named Exports）
React.lazy 目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），
你可以创建一个中间模块，来重新导出为默认模块。这能保证 tree shaking 不会出错，并且不必引入不需要的组件。
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));
mage-webapck-loader，safari和firefox和ie都无法显示图片，之前不知道是插件的原因，所有各种找问题
13Gatsby
用 React 创建静态网站的最佳方式。它让你能使用 React 组件，但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。
https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#gatsby
14useEffect 频繁请求接口
https://juejin.im/post/5c98fb35518825157172acc6#heading-0
=======================useReducer========================
1.使用useReducer 和useContext 可以替代redux和react-redux 的功能（使用useReducer和useContext Hooks构建自己的React-Redux，性能优化有待考虑），但这并不意味着你放弃使用redux，因为redux还有很强大的功能，或许你
可以根据情况选择性的使用
2.react-redux 也提供了hook API，可以替代connect方法 ，useActions() 这个在alpha版本中被删除。该建议基于“binding action creators”在基于钩子的用例中没有用处，并且导致过多的概念开销和语法复杂性。
当然你可以手动实现一个。
// function FriendStatusWithCounter(props) {
// const [count, setCount] = useState(0)
// useEffect(() => {
// document.title = `You clicked ${count} times`
// })
// const [isOnline, setisOnline] = useState(null)
// useEffect(() => {
// function handleStatusChange(status) {
// setisOnline(status.isOnline)
// }
// ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// return () => {
// ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
// };
// })
// }
