搭建React开发环境

1.npx create-react-app my-app 需要node版本>14.x

2.按需加载：npm add react-app-rewired customize-cra babel-plugin-import

3.定义加载配置的js模块：config-overrides.js

代码语言：javascript复制

module.exports = override(
  fixBabelImports("import", {
    //配置引用babel-plugin-import
    libraryName: "antd", //针对antd进行打包
    libraryDirectory: "es", //源码文件夹中的es文件夹
    style: "css", //自动打包相关的css
  })
);

4.修改package.json

代码语言：javascript复制

"scripts": {
    "start": "react-app-rewried start",
    "build": "react-app-rewried build",
    "test": "react-app-rewried test"
  },
  "dependencies": {
    "react-app-rewired": "^2.1.11",//新增配置命令的包
    "react-scripts": "5.0.0",//原来的
  },

5.使用antd npm install antd

代码语言：javascript复制

import React from "react";
import { Button, message } from "antd";
class App extends React.Component {
  handleClick = () => {
    message.success("成功饿了");
  };
  render() {
    return (
      <Button type="primary" onClick={this.handleClick}>
        学习
      </Button>
    );
  }
}

export default App;

6.自定义主题色，配置less。config-overrides.js

代码语言：javascript复制

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    ModifyVars: { "@primary-color": "#eee" },
  },
});

7.测试：App.js。成功后可以看到按钮设置type="primary"按钮颜色显示为绿色了。

代码语言：javascript复制

import React, { Component } from "react";
import { Button, message } from "antd";
import { render } from "react-dom";
class App extends Component {
  handleClick = () => {
    message.success("成功饿了");
  };
  render() {
    return (
      <div className="App">
        <Button
          type="primary"
          onClick={() => {
            this.handleClick();
          }}
        >
          学习
        </Button>
      </div>
    );
  }
}
export default App;

index.js

代码语言：javascript复制

/* 
入口js
*/
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

react npm java javascript

0 人点赞