其实这里只写了View没有逻辑部分，但是逻辑部分其实不复杂。科科

这里我使用了muicss的react组件，因为确实挺好用＝＝。
然后，我写了编译和部署的脚本：

脚本和项目地址都在： alxw_judge_f2e
但是要依赖后端的框架： alxw_judge_system
直接上代码，index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {Appbar, Form, Container, Panel, Input, Button} from 'muicss/react';

import './index.less';

class App extends React.Component {
    constructor(props) {
        super();
        this.state = {
            vimg : '/ValidationCode'
        };
    }
    render() {
        return (
            <Container>
                <Panel className='header'>
                    <h2>今天的风儿好喧嚣</h2>
                    <section className='login mui-form--inline'>
                        <Input ref='l_user' label='Username' floatingLabel={true} required={true} />
                        <Input type='password' ref='l_pass' label='Password' floatingLabel={true} required={true} />
                        <Button onClick={this.onLogin.bind(this)}>Login</Button>
                    </section>
                </Panel>
                <Panel className='main'>
                    <img src='/Static/maccode.jpg' className='left' />
                    <section className='right'>
                    <h4>Register now</h4>
                        <Input ref='r_user' label='Nickname' floatingLabel={true} required={true} />
                        <Input ref='r_nick' label='Username' floatingLabel={true} required={true} />
                        <Input type='password' ref='r_pass_1' label='Password' floatingLabel={true} required={true} />
                        <Input type='password' ref='r_pass_2' label='Password Repeat' floatingLabel={true} required={true} />
                        <section className='mui-form--inline'>
                            <Input ref='r_veri' label='Verify Code' floatingLabel={true} required={true} />
                            <img ref='r_vimg' src={this.state.vimg} onClick={this.verifyClick.bind(this)} />
                        </section>
                        <Button onClick={this.onRegister.bind(this)}>Register</Button>
                    </section>
                </Panel>
                <Panel>
                    Power by SpringHack
                </Panel>
            </Container>
        );
    }
    onSubmit() {
        return false;
    }
    onLogin() {}
    onRegister() {}
    verifyClick() {
        this.setState({
            vimg : `/${new Date()}/ValidationCode`
        });
    }
}

ReactDOM.render(<App />, document.body);

还有index.less的代码：

body {
    font-family: "Comic Sans MS", "YouYuan", "STXihei", sans-serif;
    background-image: url(/Static/back.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    .header {
        h2 {
            display: inline-block;
        }
        .login {
            float: right;
            width: 40%;
        }
    }
    .main {
        padding: 0px;
        .left {
            float: left;
            padding: 0px;
            width: 60%;
        }
        .right {
            float: right;
            padding: 20px;
            width: 40%;
        }
   

    }
}