51 Mordern技术站

React 实战（一）

2020年08月14日 22:16

原创作品，转载时请务必以超链接形式标明文章原始出处，否则将追究法律责任。

最近一直下雨，烧烤的事情可能要泡汤了。但是地方我已经给大家物色好了，蓝田县魏家沟环境大大的好。

ok，今天主要看下react主页搭建，首先我们需要安装脚手架，命令npm install -g create-react-app，安装完成后我们创建一个名为membership-react的项目，命令：create-react-app membership-react，创建完成后的目录如下。

在Angular和Vue的文章中，大家都能看到主页主要是Bootstrap风格。所以我们需要引用bootstrap文件以及一些图片文件，看一下public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description"
          content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="%PUBLIC_URL%/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/bootstrap/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/messager/css/messenger.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/messager/css/messenger-theme-flat.css" />
    <script type="text/javascript" src="%PUBLIC_URL%/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="%PUBLIC_URL%/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="%PUBLIC_URL%/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="%PUBLIC_URL%/messager/js/messenger.min.js"></script>
    <script type="text/javascript" src="%PUBLIC_URL%/messager/js/messenger-theme-flat.js"></script>
    <script type="text/javascript" src="%PUBLIC_URL%/messager/js/messagebox.js"></script>
    <title>React App</title>
</head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

主要是引入一些js和css文件，这里的%PUBLIC_URL%就是Public目录。

接下来我们改造一下入口组件app.js。

import React, { Component } from 'react';
import logo from './asserts/images/logo.svg';
import './asserts/css/App.css';
import './asserts/css/Site.css';
import moment from 'moment'

class App extends Component {
    constructor() {
        super();

        this.timer = null;
        this.state = { dateNow: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") };
        this.currentUser = "李磊";
    }

    setCurrentTime() {
        this.setState({
            dateNow: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
        });
    }

    componentDidMount() {
        this.timer = setInterval(() => {
            this.setCurrentTime();
        }, 1000);
    }

    componentWillUnmount() {
        if (this.timer != null) {
            clearInterval(this.timer);
        }
    }

    render() {
        return (<div id="app">
            <div class="main">
                <header>
                    <div class="col-md-12">
                        <div class="col-md-5 website-title" style={{ textAlign: 'left' }}>
                            <img src={require('./asserts/images/member.png')} width="50" height="50" />
                            <a href="" style={{ color: 'white' }}>饭店会员管理系统</a>
                        </div>
                        <div id="logout" class="col-md-7" style={{ textAlign: 'right', fontSize: 'large' }}>
                            <img id="img_UserPhoto" class="round-image" src={require('./asserts/images/users.jpg')} />
                            <span style={{ marginRight: '10px' }}>
                                当前用户：{this.currentUser}
                                <span style={{ color: 'white', marginRight: '10px' }}></span>
                            </span>
                            <span id="currentTime">{this.state.dateNow}</span>&nbsp;&nbsp;
                            <a href="javascript:void(0)">注销</a>
                        </div>
                    </div>
                </header>
                <div class="row">
                    <div class="col-md-2">
                        <div class="panel-group margin-t10" id="accordion">
                            <div class="panel panel-primary" id="div_User" runat="server">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion"
                                            href="#collapseOne">
                                            <b>会员信息</b>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <ul class="navigation-ul">
                                            <li class="span-nav">
                                                <img src={require('./asserts/images/menu/member.png')} />
                                                <a routerLink="/app-customer/create">新增会员</a>
                                            </li>
                                            <li class="span-nav">
                                                <img src={require("./asserts/images/menu/members.png")} />
                                                会员管理
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-primary" id="div_User" runat="server">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion"
                                            href="#collapseOne">
                                            <b>消费充值?</b>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <ul class="navigation-ul">
                                            <li class="span-nav">
                                                <img src={require("./asserts/images/menu/consume.png")} />
                                                <a href="">消费结算</a>
                                            </li>
                                            <li class="span-nav">
                                                <img src={require("./asserts/images/menu/money.png")} />
                                                <a href="">充值记录</a>
                                            </li>
                                            <li class="span-nav">
                                                <img src={require("./asserts/images/menu/cash.png")} />
                                                <a href="">消费记录</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                    <div class="col-md-10">

                    </div>
                </div>
            </div>
        </div >)
    }
}

export default App;

和Vue不同的是，这里图片路径用的是require。style也必须要使用jsx支持的类型，再次我列举了一些。

"color",
"flex",
"flexDirection",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"opacity",
"overflow",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection"

所以大家看到的写法是style={{ textAlign: 'left' }}。OK，该页面比较简单，在组件挂载的时候启动一个定时器，定时刷新时间，卸载时清楚定时器。

最后我们看一下页面效果，和angular以及Vue的没什么区别。