react+babel+webpack熱編譯+antd+router開發教程

react+babel+webpack熱編譯+antd+router開發教程

1、初始化工程目錄

mkdir demo && cd demo
npm init --yes

2、安裝依賴（此過程比較長，建議更換國內源）

npm i -D webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom prop-types html-webpack-plugin html-loader webpack-dev-server @babel/plugin-proposal-class-properties antd css-loader style-loader react-router react-router-dom

3、配置babel和webpack

新建.babelrc文件

{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}

新建webpack.config.js文件

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
  //devtool: 'eval',//最快
  //devtool: 'inline-cheap-module-source-map', //僅限行
  devtool: 'eval-source-map', //原始
};

package.json文件scripts內增加腳本

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

4、編寫代碼

新建src目錄
新建src/index.css文件

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.ant-layout-sider-trigger  .anticon {
  margin-top: 18px;
}
.ant-table-pagination  .anticon {
  margin-top: 10px;
}

新建src/index.html文件

<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

新建src/index.js文件

import "./index.css";
import Demo from "./container/main.jsx";

新建src/container目錄
新建src/container/main.jsx文件

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Layout, Breadcrumb } from "antd";
import { HashRouter  , Route,} from "react-router-dom";
import MyHeader from "./header.jsx"
import MyTable from "./table.jsx"
import MyMenu from "./menu.jsx"
const { Header, Content, Footer, Sider } = Layout;

const Home = () =>(
  <div>
    <h2>Home</h2>
  </div>
);

class Demo extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <MyMenu/>
        </Sider>
        <Layout>
          <Header style={{ background: "#fff", padding: 0 }} >
            <MyHeader/>
          </Header>
          <Content style={{ margin: "0 16px"}}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, background: "#fff", minHeight: 360,height:"100%" }}>
              <Route exact path="/" component={Home} />
              <Route exact path="/table/:id" component={MyTable} />
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            footer text
          </Footer>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(
  <HashRouter ><Demo /></HashRouter >
, document.getElementById("container"));

新建src/container/header.jsx文件

import React from "react";
import { PageHeader, Button, Tag} from "antd";

class MyHeader extends React.Component {
    render() {
        return (
            <PageHeader
                title="Title"
                subTitle="This is a subtitle"
                tags={<Tag color="blue">Running</Tag>}
                extra={[
                <Button key="3">Operation</Button>,
                <Button key="2">Operation</Button>,
                <Button key="1" type="primary">
                    Primary
                </Button>,
                ]}
                avatar={{ src: "https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" }}
            >
            </PageHeader>
        );
    }
}
export default MyHeader

新建src/container/menu.jsx文件

import React from "react";
import { Layout, Menu, Icon } from "antd";
import {  NavLink ,withRouter} from "react-router-dom";
const { SubMenu } = Menu;

const LeftMenu=withRouter(({history}) => {
    return (
        <Menu theme="dark" mode="inline"
      selectedKeys={[history.location.pathname]}
      >
        <Menu.Item key="/" >
          <NavLink to="/">
          <Icon type="pie-chart" />
          <span>Option 1</span>
          </NavLink>
        </Menu.Item>
        <Menu.Item key="/table/1">
          <NavLink to="/table/1">
          <Icon type="desktop" />
          <span>Option 2</span>
          </NavLink>
        </Menu.Item>
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="user" />
              <span>User</span>
            </span>
          }
        >
          <Menu.Item key="3">Tom</Menu.Item>
          <Menu.Item key="4">Bill</Menu.Item>
          <Menu.Item key="5">Alex</Menu.Item>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={
            <span>
              <Icon type="team" />
              <span>Team</span>
            </span>
          }
        >
          <Menu.Item key="6">Team 1</Menu.Item>
          <Menu.Item key="8">Team 2</Menu.Item>
        </SubMenu>
        <Menu.Item key="9">
          <Icon type="file" />
          <span>File</span>
        </Menu.Item>
      </Menu>
    );
})

class MyMenu extends React.Component {
    render() {
        return (
            <LeftMenu/>
        );
    }
}
export default withRouter(MyMenu)

新建src/container/table.jsx文件

import React from "react";
import { Table, Divider, Tag } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>,
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: tags => (
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    ),
  },
  {
    title: "Action",
    key: "action",
    render: (text, record) => (
      <span>
        <a>Invite {record.name}</a>
        <Divider type="vertical" />
        <a>Delete</a>
      </span>
    ),
  },
];


class MyTable extends React.Component {
    //構造函數
    constructor(props) {
        super(props);
        this.state = {
            id: props.match.params.id
          }
    }
    getData(){
        console.log(this.state.id);
        this.state.data = [
            {
              key: "1",
              name: "John Brown",
              age: 32,
              address: "New York No. 1 Lake Park",
              tags: ["nice", "developer"],
            },
            {
              key: "2",
              name: "Jim Green",
              age: 42,
              address: "London No. 1 Lake Park",
              tags: ["loser"],
            },
            {
              key: "3",
              name: "Joe Black",
              age: 32,
              address: "Sidney No. 1 Lake Park",
              tags: ["cool", "teacher"],
            },
          ];
    }


    

    //掛載組件方法
    componentDidMount(){

    }

    //銷燬組件方法
    componentWillUnmount(){

    }
    render() {
        this.getData();
        return (
            <Table
            bordered
            columns={columns} dataSource={this.state.data} />
        );
    }
}
export default MyTable

5、啓動項目

npm start