qian____的博客

create-react-app在src目录之外导入限制

创建ts react项目时npx create-react-app my-app --template typescript生成的项目文件中会有 .d.ts的文件，这个是什么呢？.d.ts 文件: 只包含类型信息的类型声明文件不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型用途：为 JS 提供类型信息比如报错就可以创建一个 .d.ts的文件比如 static.d.tsdeclare module '@/*'就不会提示报错了..

第一种方式通过 npm run eject 直接暴露出来react所有的webpack配置文件，暴露出来之后，过程不可逆而且失去了 react-scripts 的统一管理的好处，而且react的webpack中的内容也非常的多，更改起来也不太容易第二种方式通过安装 npm i @craco/craco -D 来帮着我们配置webpacknpm 地址在项目中安装 npm i @craco/craco -D在项目的跟目录配置 craco.config.js// 添加自定义webpack配置

安装npm install less less-loader config文件需要先将项目的代码 本地git提交一下npm run eject找到 webpack.config.js文件加入 less文件的 test规则const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;再添加 less 的module，找到sass的复制下来更改，在sass下面添加即可 {

import noData from '../assets/no-data.svg';function App() { return ( <div className="App"> <img src={noData} alt="" /> </div> );}export default App;如果是 create-react-app 创建的项目，直接引入使用即可，否则还要使用file-loader等插件...

安装npm i node-sass -D或者yarn add node-sass -D然后重启项目建一个index.sass的文件.test-redux1 border: 1px solid black在组件中引入即可import './index.sass'<div className="test-redux1">1111</div>如果需要css作用域在建sass的时候，文件名为 index.module.sass ,中间加个 modu.

React HooksuseState很常用的一个hook，可以保存函数组件中的状态参数useState(val)传进去的是初始状态的值useState(true) usestate(50) useState('aaa')…也可以是一个函数，会自动拿到函数的返回值useState(() => { ... const res = a + b; return res;})返回useState() 会返回一个数组，数组的第一项是当前的初始状态，第二项是个函数，