登录组件（login.jsx）定义

首先我们来到登录组件

Login.jsx-1

我们打开frontend下面的public/scr/components/login，在里面新建一个login.jsx。Jsx是组件的默认格式。然后我们来看看登录组件到底有哪些东西。

先来看一段模板程序

Import react，{component} from ‘react’

Import {button} from ‘components’

Class login extends component {

   Render() {

      Return (

          <div classname=”login}>

          </div>

      )

   }

}

Export default login

这一段是比较标准的模板，可以进行一个参考。

Login.css

Position：relative

Margin：0auto；

Width：1366px;

Height:768px；

Background：url(“,/images/popup_bg.png”) center no-repeat;

Background-size:615px；

Color：#d4cfba;

Font-size:14.5px；

Display:flex;

Align-items:center;

Justify-content:center;

Flex-directiong:column;

Transform-origin:top left;

Transition:all 500ms ease-in-out !important;}

.Login>*{

 Margin:0auto

 Padding:0 72px；

 Width：615px;}

.login.title{

 Position:absolute;

 Top:60px；

 Width：392px;

 Height:163.5px；

 Background：url(“./images/game_logo.png”);

 Background-size:100%

 ……

这些就不用细讲了，高宽尺寸等。

我们用模板程序直接就会出来，不需要手动输入，节省时间。

第二部分的组件就比较多

Login.jsx-2

     <div classname=’title’>元素之战</div>

     <div classname=’description’>elemental battles 登录</div>

     <div classname=’field’>

     <label>账号名</label>

     <input type=”text”name=”username” placeholder=”限小写字母a-z，1-5或.,最大12个字符” required/>

</div>

这里有个标题，还有相关登录信息，提示用户。

Import react，{component} from ‘react’

Import {button} from ‘components’

Class login extends component {

   Render() {

      Return (

          <div classname=”login}>

          <div classname=’title’>元素之战</div>

          <div classname=’description’>elemental battles 登录</div>

<div classname=’field’>

     <label>账号名</label>

     <input type=”text”name=”username” placeholder=”限小写字母a-z，1-5或.,最大12个字符” required/>

<div classname=’field’>

     <label>私钥</label>

     <input type=”text”name=”key” required/>

</div>

          </div>

      )

   }

}

Export default login

登录组件的第三部分

Login.jsx-3

<div classname=”field form-error”>

</div>

<div classname=”bottom”>

        <button type=’submit’classname=’green’>{“CONFIRM”}</Button>

</div>