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存在变量提升，即变量一定要声明之后才能使用
② 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>
)
}
3.运行项目
以此执行命令： npm install
npm start
