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

　　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 里面：