react 基本配置使用
react入门的一些配置
安装和启动
npx create-react-app my-app
cd my-app npm start
创建 ts的项目:
npx create-react-app demo --template typescript
react默认是将 webpack配置放置在node_module里面的,需要修改webpack配置,就的反编译出来,其中提供了一个指令
npm run eject
执行命令是,可能会报错,是因为,需要先将代码提交到git或者svn
一、配置使用绝对路径
因为react 引入模块,总是需要相对路径...,非常麻烦,可以配置绝对路径
1、找到config 下面的 webpack.config.dev.js和webpack.config.prod.js
webpack.config.dev.js中
加入如图代码:
webpack.config.prod.js 加入如下代码
2、使用实例
二、使用less
npm install less-loader less --save
dev.js
prod.js
三、打包
当你开发完了,运行 npm run build ,找到 build文件夹,打开index.html,发现what!!!,,css路径不对。什么鬼
需要改配置:
config->paths.js文件下面,如下地方加一个 “点”
再打包之后,发现,没有问题了。。
四、图片使用
1、img标签使用,两种方式
import Oimg from "@/assets/img/6.jpg";<img src={require("@/assets/img/6.jpg")} alt="" />
<img src={Oimg} alt="" />
2、css使用
background: url("../../assets/img/44.png") no-repeat left top;
<div className="bg-img" style={{backgroundImage:require("@/assets/img/44.png")}}></div>
五、使用装饰器
react默认没有兼容使用装饰器
npm install --save babel-plugin-transform-decorators-legacy
然后再package.json中
使用
六、使用 antd desgin
使用这个,安装官方的流程,安装,引入,并且配置了,babel-plugin-import
使用官方推荐的配置
然后一启动,报错如下。。
Failed to compile./node_modules/antd/lib/button/style/index.less
Module build failed:
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in C:\Users\HP\Desktop\react-antD\react-antd\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)
This error occurred during the build time and cannot be dismissed.
原因是 less版本不对,可以执行
npm i --save less@2.7.3
七、初始化state和props
1、state的初始化,通过构造函数
//在构造函数中对状态赋初始值constructor(props){
super(props);//第一步,这是必须的
//不能调用state
this.state = {//第二步,赋初始值
time:0,
on:false,
log:[] //数组
};
}
不使用构造函数
2、props的初始化
class Button extends React.Component{//静态属性,给属性赋默认值
static defaultProps = {
onClick : null,
className : '',
text : '默认'
};
render(){
return <button className={`Button ${this.props.className}`} onClick={this.props.onClick}>{this.props.text}</button>;
}
3、指定props的类型
import PropTypes from 'prop-types';class Index extends Component {
//静态属性,给属性赋默认值
static propTypes = {
test: PropTypes.string
}
static defaultProps ={
test:"props=test"
}
state = {
}
render() {
return (
<div className="_Index">
{this.props.test}
</header>
</div>
);
}
}
八、使用代理 proxy
在 package.json 里面:
以上是 react 基本配置使用 的全部内容, 来源链接: utcz.com/z/381476.html