react 基本配置使用
react入门的一些配置
安装和启动
npm install -g create-react-app
create-react-app my-app cd my-app
npm start
创建 ts的项目,可以将第二步改为如下指令即可:
create-react-app my-app --scripts-version=react-scripts-ts
react默认是将 webpack配置放置在node_module里面的,需要修改webpack配置,就的反编译出来,其中提供了一个指令
npm run eject
执行命令是,可能会报错,是因为,需要先将代码提交到git或者svn
一、配置使用绝对路径
因为react 引入模块,总是需要相对路径...,非常麻烦,可以配置绝对路径
1、找到config 下面的 webpack.config.dev.js和webpack.config.prod.js


2、使用实例
二、使用less

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 基本配置使用的更多相关文章
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- react新版本配置代理
新学习react 开始配置react跨域的时候 在网上查看到是在packjson.json里面添加如下代码: "proxy": { "/api": { &quo ...
- React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...
- React脚手架配置代理
react脚手架配置代理 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点:配置简 ...
- Facebook React Native 配置小结
2015 年 9 月 15 号,React Native for Android 发布.至此,React 基本完成了对多端的支持.基于 React / React Native 可以: H5, And ...
- webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
- React环境配置
现在开始配置一个基础项目. 创建项目文件夹:C:\Users\Danny\Desktop\React npm init 创建package.json文件 下面的所有安装,都是--save-dev,因为 ...
- react +webpack 配置px2rem
项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...
随机推荐
- 微信小程序获取到Openid
前台代码片段 onLoad: function () { wx.login({ success(res) { console.log('code: '+res.code) if (res.code) ...
- HashSet TreeSet
1 HashSet 1.1 父类 java.lang.Object 继承者 java.util.AbstractCollection<E> 继承者 java.util.AbstractSe ...
- eclipse中一个项目引用另一个项目的方法(申明:来源于网络)
eclipse中一个项目引用另一个项目的方法(申明:来源于网络) 地址:http://blog.csdn.net/a942980741/article/details/39990699
- {Django基础六之ORM中的锁和事务}一 锁 二 事务
Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在 ...
- 制作dlib(面部识别检测)静态库
参考或引用网址: 快速精准的人头检测,代码已开源http://url.cn/5e3qQPN http://www.jianshu.com/p/701e8dea887e 官网文档 GitHub地址 1. ...
- Flannel - 原理
Flannel GitHub 地址 Flannel 是 Kubernetes 中常用的网络配置工具,用于配置第三层(网络层)网络结构. 如何工作Flannel 需要在集群中的每台主机上运行一个名为 f ...
- 多文件上传(.net)
找了很长时间,终于找到了: 前台: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head ...
- FW--tomcat bi-laternal https and keytool
说明:按照本文中以下内容配置https,猫server.xml中clientAuth=false,单向验证的时候,网页中可以访问:当clientAuth=true进行双向验证的时候,网页中不可以访问: ...
- opencv -python
https://www.python----------tab.com/html/2017/pythonhexinbiancheng_1120/1184.html http://www.cnblogs ...
- React Native开源项目如何运行(转载)
学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...