1、初識reactcss
一、Angular組件複雜，不利於重用。html
二、React不是一個完整的MVC、MVVM框架node
三、React跟Web Components 不衝突react
四、Ract的特色就是「輕」webpack
facebook 獨立、小巧、快速、創新git
五、組件化的開發思路（高度可重用）github
2、React應用場景web
一、複雜場景下的高性能數據庫
二、重用組件庫，組件組合npm
三、「懶」——少作無用功
3、前置知識
一、JS、CSS基礎
二、Sass、Compass
三、YEOman、Grunt、Webpack
四、CommonJS，NodeJS
五、Git，GitHub
4、React-JSX-Style
一、進React 官網 進reactJSFiddle
二、JSX 其中X是xml 語法糖，糖衣語法——對功能無影響
爲了起做用，須要解析js，引入react.js和JSXTransformer.js
在script標籤中，type="text/jsx"
react Compoents 自定義標籤
定義自定義標籤：
var Hello=React.creareClass({
render:function(){
var styleObj={
color:'red',
fontSize:'44px'
};
return <div className="alert-text">Hello {this.props.title}{this.props.name}</div>;
}
});
呈現到頁面：調用React.render(<Hello name="world" title="MR"/>,
document.getElementById('container') //呈現到哪裏
)
this:當前react Components（組件的意思）實例
props:在使用react Componemts時，在其上面添加的屬性的集合
樣式編寫：
一、爲標籤添加class，可是不能直接寫class，應寫className（並在css文件中寫相應樣式）
二、直接內聯樣式，但不能寫成style=「color：red；」應該寫成style={color：‘red’} red要寫成字符串形式
5、React-Components-Lifecycle(從建立到消失生命週期)
一、React-Components在瀏覽器中存在的生命週期三個狀態
1）Mounted（安裝）：React Components 被render解析生成對應的DOM節點並被插入瀏覽器的DOM結構的一個過程
2）update（更新） ：一個mounred的React Components被從新render（中文意思爲使成爲）的過程
3）unmounted （卸載）：一個mounted的React Components對應的DOM節點被從DoM結構中移除的這樣一個過程。
每個狀態React都封裝了對應的hook函數
var Hello=React.creareClass({
getInitialState:function(){
alert(init);
return {
opacity:1.0,
fontSize:'12px',
};
},
render:function(){
return <div style={{opacity:this.state.opacity,fontSize:this.state.fontSize}}>Hello {this.props.title}{this.props.name}</div>;
},
componentWillMount:function(){
alert('will');
},
componentDidMount:function(){
alert('did');
var_self=this; //留住this 或者用bind(this)——bind是ES5纔有的
window.setTimeout(function(){
_self.setState({
opacity:0.5,
fontSize:'44px'
});
},1000);
}};
Mounting能夠調用的函數：getDefaultProps()、getInitialState()、componentWillMount
render、componentDidmount
Updating能夠調用的函數：componentWillReceivePropos、shouldComponentUpdate、
componentWillUpdate、render、componentDidUpdate
Unmounting能夠調用的函數：componentWillUnmount
6、React-Event-listener
React Components 事件綁定與處理；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var TestClickComponent=React.createClass({
handleClick:function(event){
var tipE=React.findDOMNode(this.refs.tip);
if(tipE.style.display==='none'){
tipE.style.display='inline';
}else{
tipE.style.display='none';
}
event.stopPropagation();
event.preventDefault();
},
render:function(){
return (
<div>
<button onClick={this.handleClick}>顯示|隱藏</button><span ref="tip">測試點擊</span>
</div>
);
}
});
var TestInputComponent=React.createClass({
getInitialState:function(){
return {
inputContent:''
}
},
changeHandler:function(event){
this.setState({
inputContent:event.target.value
});
event.stopPropagation();
event.preventDefault();
},
render:function(){
return (
<div>
<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
</div>
);
}
});
React.render(
<div>
<TestClickComponent/>
<TestInputComponent/>
</div>,
document.getElementById('container')
);
</script>
</body>
</html>
7、react 的基礎學習
一、React 簡介
React 是一個用於構建用戶界面的JAVASCRIPT庫
React 主要用於構建UI，不少人認爲React是MVC中的v（視圖）
React 擁有較高的性能，代碼邏輯很是簡單，愈來愈多的人已經開始關注和使用它
（1）React特色
1）聲明式設計 ——React採用聲明範式，能夠輕鬆描述應用
2）高效——React 經過對 DOM的模擬，最大限度減小與DOM的交互
3） 靈活 ——React 能夠與已知的庫或框架很好地配合
4） JSX——JSX 是JavaScript 語法的擴展。React 開發不必定使用JSX，但咱們建議使用它
5） 組件 ——經過React 構建組件，使得代碼更加容易獲得服用，可以很好的應用在大項目的開發中
6） React 實現了單向響應的數據流，從而減小了重複代碼，這也是它比傳統數據綁定更簡單。
（2）React第一個實例
<div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>,
document.getElementById('example') ); </script>
解析：咱們引入了三個庫：react.min.js、react-dom.min.js 和 babel.min.js
若是咱們須要使用JSX，則<script>標籤的type屬性須要設置爲text/babel
react.min.js ——React 的核心庫
react-dom.min.js——提供與DOM相關的功能
babel —— Babel 能夠將ES6 代碼轉爲 ES5代碼，這樣咱們就能在目前不支持ES6瀏覽器上執行React代碼，
Babel 中內嵌了對JSX的支持。經過將Babel 和 babel-sublime 包一同使用可讓源碼的語法渲染
上升到一個全新的水平。
二、基於npm的React開發環境搭建
第一步、安裝全局包
$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g
第二步、建立根目錄
建立一個根目錄，目錄名爲：reactApp，再使用 npm init 初始化，生成 package.json 文件：
$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) runoob-react-test
version: (1.0.0)
description: cllgeek
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/tianqixin/www/reactApp/package.json:
{
"name": "react-runoob",
"version": "1.0.0",
"description": "cllgeek test",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.8",
"react-dom": "^0.14.8"
}
}
Is this ok? (yes)
第三步、添加越來包及插件
由於咱們要使用 React, 因此咱們須要先安裝它，–save 命令用於將包添加至 package.json 文件。
$ npm install react --save
$ npm install react-dom --save
同時咱們也要安裝一些 babel 插件
$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015
第四步、建立文件
接下來咱們建立一些必要文件：
$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js
第五步、設置編譯器，服務器，載入器
打開 webpack.config.js 文件添加如下代碼:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [ {
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
entry: 指定打包的入口文件 main.js。
output：配置打包結果，path定義了輸出的文件夾，filename則定義了打包結果文件的名稱。
devServer：設置服務器端口號爲 7777，端口後你能夠本身設定 。
module：定義了對模塊的處理邏輯，這裏能夠用loaders定義了一系列的加載器，以及一些正則。當須要加載的文件匹配test的正則時，就會調用後面的loader對文件進行處理，這正是webpack強大的緣由。
如今打開 package.json 文件，找到 「scripts」 中的 「test」 「echo \」Error: no test specified\」 && exit 1″ 使用如下代碼替換：
"start": "webpack-dev-server --hot"
替換後的 package.json 文件 內容以下：
$ cat package.json
{
"name": "runoob-react-test",
"version": "1.0.0",
"description": "cllgeek test",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
}
}
如今咱們可使用 npm start 命令來啓動服務。–hot 命令會在文件變化後從新載入，這樣咱們就不須要在代碼修改後從新刷新瀏覽器就能看到變化。
三、React JSX
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
咱們不須要必定使用 JSX，但它有如下優勢：
1）使用JSX
JSX 看起來相似 HTML ，咱們能夠看下實例:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
咱們能夠在以上代碼中嵌套多個 HTML 標籤，須要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性須要使用 data- 前綴。
ReactDOM.render( <div> <h1>菜鳥教程</h1> <h2>歡迎學習 React</h2> <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p> </div> , document.getElementById('example') );
2）獨立文件
你的 React JSX 代碼能夠放在一個獨立文件上，例如咱們建立一個 helloworld_react.js 文件，代碼以下：
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
而後在 HTML 文件中引入該 JS 文件：
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
3）JavaScript 表達式
咱們能夠在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例以下：
ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example')
在 JSX 中不能使用 if else 語句，但可使用 conditional (三元運算) 表達式來替代。如下實例中若是變量 i 等於 1 瀏覽器將輸出 true, 若是修改 i 的值，則會輸出 false.
ReactDOM.render(
<div>
<h1>react的學習</h1>
<h2>{i ===1 ? 'true': 'false'}</h2>
<p data-myattribute = "somevalue">{4*5}</p>
</div>,
document.getElementById('example')
);
4）樣式
React 推薦使用內聯樣式。咱們可使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px 。如下實例演示了爲 h1 元素添加 myStyle 內聯樣式：
var myStyle = {
fontSize:100,
color:'#e4393c'
};
var i=1;
ReactDOM.render(
<div>
<h1 style = {myStyle}>小薇薇的學習</h1>
<h2>{i ===1 ? 'true': 'false'}</h2>
<p data-myattribute = "somevalue">{4*5}</p>
</div>,
document.getElementById('example')
);
5）註釋
註釋須要寫在花括號中，實例以下：
ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*註釋...*/} </div>, document.getElementById('example') );
6）數組
JSX 容許在模板中插入數組，數組會自動展開全部成員：
var arr = [ <h1>菜鳥教程</h1>, <h2>學的不只是技術，更是夢想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
7） html 標籤 vs React 組件
React 能夠渲染 HTML 標籤 (strings) 或 React 組件 (classes)。
要渲染 HTML 標籤，只需在 JSX 裏使用小寫字母的標籤名。
var myDivElement = <div className="foo">你好</div>;
ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 組件，只需建立一個大寫字母開頭的本地變量。
var MyComponent =React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
var myElement = <MyComponent/>;
ReactDOM.render(myElement, document.getElementById('example'));
//或者去掉變量myElement，直接寫入 下面
ReactDOM.render(<MyComponent/>, document.getElementById('example'));
React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標籤。
注意:
因爲 JSX 就是 JavaScript，一些標識符像
class和for不建議做爲 XML 屬性名。做爲替代，React DOM 使用className和htmlFor來作對應的屬性。
須要注意的問題：
關於React註釋的問題：
一、在標籤內部的註釋須要花括號
二、在標籤外的的註釋不能使用花括號
關於React入門容易出錯的地方：
如同上面說的，代碼中嵌套多個 HTML 標籤，須要使用一個標籤元素包裹它
四、React 組件
本章節咱們將討論如何使用組件使得咱們的應用更容易來管理。
接下來咱們封裝一個輸出 "Hello World！" 的組件，組件名爲 HelloMessage：
var HelloMessage = React.createClass({ render: function() { return <h1>Hello World！</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
React.createClass 方法用於生成一個組件類 HelloMessage。
<HelloMessage /> 實例組件類並輸出信息。
注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，好比 HelloMessage 不能寫成 helloMessage。除此以外還須要注意組件類只能包含一個頂層標籤，不然也會報錯。
若是咱們須要向組件傳遞參數，可使用 this.props 對象,實例以下：
var MyComponent =React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(<MyComponent name="mary"/>,
document.getElementById('example'));
以上實例中 name 屬性經過 this.props.name 來獲取。
注意，在添加屬性時， class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。
複合組件
咱們能夠經過建立多個組件來合成一個組件，即把組件的不一樣功能點進行分離。
如下實例咱們實現了輸出網站名字和網址的組件：
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite name="菜鳥教程" site=" http://www.runoob.com" />,
document.getElementById('example')
);
五、React State（狀態）
React 把組件當作是一個狀態機（State Machines）。經過與用戶的交互，實現不一樣狀態，而後渲染 UI，讓用戶界面和數據保持一致。
React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不要操做 DOM）。
如下實例中建立了 LikeButton 組件，getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件
var LikeButton = React.createClass({
/*初始化liked的值*/
getInitialState:function(){
return {liked:false};
},
/*改變liked的狀態值*/
handleClick:function(event){
this.setState ({liked:!this.state.liked})
},
render:function(){
var text = this.state.liked ? '喜歡':'不喜歡';
return (
<p onClick = {this.handleClick}>
你<b>{text}</b> 我。點我切換狀態。
</p>
);
}
});
ReactDOM.render(
<LikeButton/>,
document.getElementById("example")
);
六、React Props
state 和 props 主要的區別在於 props 是不可變的，而 state 能夠根據與用戶交互來改變。這就是爲何有些容器組件須要定義 state 來更新和修改數據。 而子組件只能經過 props 來傳遞數據。
如下實例演示瞭如何在組件中使用 props：
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example')
實例中 name 屬性經過 this.props.name 來獲取。
1）默認props
你能夠經過 getDefaultProps() 方法爲 props 設置默認值，實例以下：
var HelloWorld = React.createClass({
getDefaultProps:function(){
return {
name:"marry"
}
},
render:function(){
return <h1>hello {this.props.name}</h1>
}
});
ReactDOM.render(<HelloWorld name={"Bob"}/>,
document.getElementById("example")
);
//當 <HelloWorld />中有name值時，顯示此值，沒有時，就顯示默認的props的name值，即顯示 marry
2）state 和 Props
如下實例演示瞭如何在應用中組合使用 state 和 props 。咱們能夠在父組件中設置 state， 並經過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 咱們設置 name 和 site 來獲取父組件傳遞過來的數據。
var WebSite = React.createClass({
getInitialState:function(){
return {
name:"marry",
site:"http:www.baidu.com"
};
},
render:function(){
return (
<div>
<Name name={this.state.name}/>
<Link site={this.state.site}/>
</div>
);
}
});
var Name = React.createClass({
render:function(){
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render:function(){
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite />,
document.getElementById("example")
);
3） Props 驗證
Props 驗證使用 propTypes，它能夠保證咱們的應用組件被正確使用，React.PropTypes 提供不少驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制檯會拋出警告。
如下實例建立一個 Mytitle 組件，屬性 title 是必須的且是字符串，非字符串類型會自動轉換爲字符串 (沒法轉爲字符串類型時就會報錯)：
var title = "菜鳥教程";
// var title = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
更多驗證器說明以下：
React.createClass({ propTypes: { // 能夠聲明 prop 爲指定的 JS 基本數據類型，默認狀況，這些數據是可選的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 能夠被渲染的對象 numbers, strings, elements 或 array optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操做符聲明 prop 爲類的實例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 來限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 能夠是多個對象類型中的一個 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定類型組成的數組 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定類型的屬性構成的對象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定 shape 參數的對象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 任意類型加上 `isRequired` 來使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, //