1. 概述
1.1. 概述
這周一直在焦灼于React的知識(shí)儲(chǔ)備，一直沒(méi)想明白，React寫(xiě)前端，又不是和后臺(tái)分離，這該怎么搭建項(xiàng)目。難道每次都要在命令行界面編譯一下React那部分的代碼嗎？這想想就覺(jué)得不科學(xué)，但那要怎么辦？像引入kendoui那樣引入react嗎？唉~這些暫且不需要我考慮的東西就先別糾結(jié)了。鑒于下一個(gè)任務(wù)是做一個(gè)注冊(cè)界面，現(xiàn)在就先練練，做一個(gè)登錄界面瞧瞧吧
1.2.ES5 ES6寫(xiě)法對(duì)照
1.2.1 ES5
①引入方式:
通過(guò) require 引入外部模塊:
var React = require("react");
②導(dǎo)出方式：
通過(guò)module.exports導(dǎo)出：
module.exports = Test;
③創(chuàng)建組件的方式
使用React.createClass() 小括號(hào)里面需要大括號(hào)
//ES5
var Test = React.createClass( {
..........
} );
④初始化組件屬性的方式以及限制組件屬性類(lèi)型的方式
通常使用propTypes成員和getDefaultProps方法來(lái)實(shí)現(xiàn)
//ES5
var Test = React.createClass({
getDefaultProps: function() {
**return** {
myPro: 10
};
},
propTypes: {
myPro: React.PropTypes.number. isRequired
}
});
⑤初始化方法
getInitialState: function() {
...........
**return** {
myState: 10
}
}
⑥ES5中每個(gè)方法之后都需要加上一個(gè)逗號(hào)，而且需要用 render: function()這樣的寫(xiě)法
⑦變量聲明
ES5中聲明變量只有兩種方法：var和function；
1.2.2 ES6
①引入方式:
通過(guò)import導(dǎo)入外部模塊：
import React, { Component, PropTypes } from 'react
②導(dǎo)出方式：
通過(guò)exports導(dǎo)出：
export default Test;
③創(chuàng)建組件的方式
繼承自React框架的Component(需要導(dǎo)入)，只需要一個(gè)大括號(hào)
//ES6
class Test extends Component {
..........
}
④初始化組件屬性的方式以及限制組件屬性類(lèi)型的方式
可以統(tǒng)一使用static成員。（也可以用ES5方法）
//ES6
class Test extends Component {
static defaultProps = {
myPro: 10
};
static propTypes = {
myPro: React.PropTypes.number. isRequired
};
}
⑤初始化方法
state = {
myState: 10
}
因?yàn)镋S6直接使用state初始化不能進(jìn)行一些其它的運(yùn)算，所以也經(jīng)常這樣：
constructor(props){
super(props);
this.state = {
myState: 10
};
}
⑥ES中每個(gè)方法之后不需要加逗號(hào)，方法也可以直接用render()，直接在名字后加括號(hào)和形參
⑦變量聲明
ES6中聲明變量的方式：var、function、let、const、import和class命令
1.2.3 ES6新增
① ES6新增了let命令，用來(lái)聲明變量。它的用法類(lèi)似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。（塊級(jí)作用域）
{
var a = 1;
let b = 1;
}
a;//有效
b;//無(wú)效
let不像var存在變量提升，即變量一定要聲明之后才能使用
② const命令
const用來(lái)聲明常量。一旦聲明，其值就不能改變。這意味著，const一旦聲明常量，就必須立即初始化。const同let命令同樣只在當(dāng)前塊級(jí)作用域中有效，存在“暫時(shí)性死區(qū)”。
ECMAScript在對(duì)變量的引用進(jìn)行讀取時(shí)，會(huì)從該變量對(duì)應(yīng)的內(nèi)存地址所指向的內(nèi)存空間中讀取內(nèi)容，而當(dāng)用戶改變變量的值時(shí)，引擎會(huì)重新從內(nèi)存中分配一個(gè)新的內(nèi)存空間以存儲(chǔ)新的值，并將新的內(nèi)容地址與變量進(jìn)行綁定。const的原理便是在變量名與內(nèi)存地址之間建立不可變的綁定，當(dāng)后面的程序嘗試申請(qǐng)的內(nèi)存空間時(shí)，引擎便會(huì)拋出錯(cuò)誤。
③變量的結(jié)構(gòu)賦值
var [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1 [[2], 3]];
對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名的內(nèi)部屬性，然后再賦值給對(duì)象的變量。真正被賦值的是后者，而不是前者。
var {foo: baz} = {foo: "aaa"};
baz; // "aaa"
foo; // error: foo is not defined
④字符串的解構(gòu)賦值
var [a, b, c, d, e] = ‘hello‘;
a; // ‘h‘
e; // ‘o‘
⑤函數(shù)參數(shù)的解構(gòu)賦值
function add([x, y]){
return x + y;
}
add([1, 2]);
⑥默認(rèn)值
var {x, y = 5} = {x: 1};
x; // 1
y; // 5
注意：ES6內(nèi)部使用嚴(yán)格相等“===”判斷一個(gè)位置是否有值。所以，不嚴(yán)格等于undefined，默認(rèn)值是不會(huì)生效的。
var {x = 3} = {x: undefined};
x; // 3
var {x = 3} = {x: null};
x; // null
2. 項(xiàng)目實(shí)現(xiàn)
2.1. 新建項(xiàng)目
新建:
$ mkdir login-demo && cd login-demo
初始化:
$ npm init (會(huì)有一些項(xiàng)目配置需要你輸入，一直敲回車(chē)就行了)
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.運(yùn)行項(xiàng)目
以此執(zhí)行命令： npm install
npm start
最后打開(kāi)http://localhost:3000
