REACT实现简单的登录界面

1. 概述

1.1. 概述

这周一直在焦灼于React的知识储备，一直没想明白，React写前端，又不是和后台分离，这该怎么搭建项目。难道每次都要在命令行界面编译一下React那部分的代码吗？这想想就觉得不科学，但那要怎么办？像引入kendoui那样引入react吗？唉~这些暂且不需要我考虑的东西就先别纠结了。鉴于下一个任务是做一个注册界面，现在就先练练，做一个登录界面瞧瞧吧

1.2.ES5 ES6写法对照

1.2.1 ES5

①引入方式:

通过 require 引入外部模块:

var React = require("react");

②导出方式：

通过module.exports导出：

module.exports = Test;

③创建组件的方式

使用React.createClass() 小括号里面需要大括号

//ES5

var Test = React.createClass( {

..........

} );

④初始化组件属性的方式以及限制组件属性类型的方式

通常使用propTypes成员和getDefaultProps方法来实现

//ES5  

var Test = React.createClass({  

      getDefaultProps: function() {  

             **return** {  

                   myPro: 10  

             };  

      },  

      propTypes: {  

             myPro: React.PropTypes.number. isRequired  

      }  

});

⑤初始化方法

getInitialState: function() {  

      ...........  

      **return** {  

           myState: 10  

      }  

}

⑥ES5中每个方法之后都需要加上一个逗号，而且需要用 render: function()这样的写法

⑦变量声明

ES5中声明变量只有两种方法：var和function；

1.2.2 ES6

①引入方式:

通过import导入外部模块：

import React, { Component, PropTypes } from 'react

②导出方式：

通过exports导出：

export default Test;

③创建组件的方式

继承自React框架的Component(需要导入)，只需要一个大括号

//ES6  

class Test extends Component {  

       ..........  

}

④初始化组件属性的方式以及限制组件属性类型的方式

可以统一使用static成员。（也可以用ES5方法）

//ES6  

class Test extends Component {  

       static defaultProps = {  

             myPro: 10  

       };  

       static propTypes = {  

             myPro: React.PropTypes.number. isRequired  

       };  

}

⑤初始化方法

state = {  

      myState: 10  

}

因为ES6直接使用state初始化不能进行一些其它的运算，所以也经常这样：

constructor(props){  

        super(props);  

       this.state = {  

            myState: 10  

        };  

    }

⑥ES中每个方法之后不需要加逗号，方法也可以直接用render()，直接在名字后加括号和形参

⑦变量声明

ES6中声明变量的方式：var、function、let、const、import和class命令

1.2.3 ES6新增

① ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。（块级作用域）

{

 var a = 1;

 let b = 1;

 }

 a;//有效

 b;//无效

let不像var存在变量提升，即变量一定要声明之后才能使用

image.png

② const命令

const用来声明常量。一旦声明，其值就不能改变。这意味着，const一旦声明常量，就必须立即初始化。const同let命令同样只在当前块级作用域中有效，存在“暂时性死区”。

ECMAScript在对变量的引用进行读取时，会从该变量对应的内存地址所指向的内存空间中读取内容，而当用户改变变量的值时，引擎会重新从内存中分配一个新的内存空间以存储新的值，并将新的内容地址与变量进行绑定。const的原理便是在变量名与内存地址之间建立不可变的绑定，当后面的程序尝试申请的内存空间时，引擎便会抛出错误。

③变量的结构赋值

var [a, b, c] = [1, 2, 3];

let [foo, [[bar], baz]] = [1 [[2], 3]];

对象的解构赋值的内部机制，是先找到同名的内部属性，然后再赋值给对象的变量。真正被赋值的是后者，而不是前者。

var {foo: baz} = {foo: "aaa"};

baz; // "aaa"

foo; // error: foo is not defined

④字符串的解构赋值

var [a, b, c, d, e] = ‘hello‘;

a; // ‘h‘

e; // ‘o‘

⑤函数参数的解构赋值

function add([x, y]){

 return x + y;

}

add([1, 2]);

⑥默认值

var {x, y = 5} = {x: 1};

x; // 1

y; // 5

注意：ES6内部使用严格相等“===”判断一个位置是否有值。所以，不严格等于undefined，默认值是不会生效的。

var {x = 3} = {x: undefined};

x; // 3

var {x = 3} = {x: null};

x; // null

2. 项目实现

2.1. 新建项目

新建:

$ mkdir login-demo && cd login-demo

初始化:

$ npm init (会有一些项目配置需要你输入，一直敲回车就行了)

2.2. 新建其他文件

2.2.1新建/src/index.js

import './index.less';

import React from 'react';

import ReactDOM from 'react-dom';

import Login from './Containers/Login';

document.addEventListener('DOMContentLoaded', function () {

 ReactDOM.render(

 React.createElement(Login),

 document.getElementById('mount')

 );

});

2.2.2在src下新建文件夹Containers/Login

新建index.js

import React from 'react';

import Form from './Form';

import Layout from './Layout';

import Background from './Background';

export default function Login() {

 return (

 <span>

 <Background />

 <Layout>

 <Form />

 </Layout>

 </span>

 )

}