React開(kāi)源資源 https://github.com/enaqx/awesome-react
1.npm安裝react
npm init
npm install --save react react-dom babelify babel-preset-react
npm install babel-preset-es2015 --save
npm install react-router --save
2.安裝webpack
// 模版文件 webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: __dirname + '/src',
entry: "./js/index.js", //定義入口文件
module: {
loaders: [{
test: /\.js?$/, // 正則，解析所有js文件
exclude: /(node_modules)/, // 跳過(guò) 其他包文件
loader: 'babel-loader', // 用babel來(lái)解釋
query: { // 加載react與es6的包
presets: ['react', 'es2015']
}
}]
},
output: { // 在/src/目錄下生成bundle.js文件
path: __dirname + "/src",
filename: "bundle.js"
}
};
3.全局安裝webpack椭豫、webpack開(kāi)發(fā)者服務(wù), 以及項(xiàng)目安裝
npm install -g webpack
npm install -g webpack-dev-server --save
npm install webpack --save
npm install webpack-dev-server --save
4.webpack 命令
webpack // 打包
webpack --watch // 監(jiān)控js變化后，立刻更新打包
webpack-dev-server // 監(jiān)控js變化后喳整，立刻重新打包裸扶，并渲染
webpack-dev-server --content-base --inline --hot //
5.React developer Tools 谷歌瀏覽器工具https://github.com/facebook/react-devtools
8.生命周期
// state
初始化： this.state = {username: "Parry"};
初始化可以放置在構(gòu)造函數(shù) constructor 里
修改 state: this.setState({username: "IMOOC"});
state 的作用域只屬于當(dāng)前類，不污染其它模塊
state 對(duì)于模塊屬于 自身 屬性
// Props
props 對(duì)于模塊屬于 外來(lái) 屬性
傳遞參數(shù)： <BodyIndex username={"Parry"}>
模塊中接受參數(shù)： this.props.username
點(diǎn)擊事件
changeUserInfo() {
this.setState({age:50});
}
render() {
return (
<input type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/>
)
}
子組件向父組件傳值
// 在子頁(yè)面中通過(guò)調(diào)用父頁(yè)面?zhèn)鬟f過(guò)來(lái)的事件 props 進(jìn)行組建間的參數(shù)傳遞
// 子組件
<input type="text" onChange={this.props.handleChildValueChange} />
// 父組件
handleChildValueChange(event) {
this.setState({age: event.target.value})
}
render() {
return (
<BodyChild handleChildValueChange={this.handleChindValueChange.bind(this)}/>
)
}
// {...this.props} 將其父組件傳來(lái)的值魏保，傳給其子組件
render() {
return (
<BodyChild {...this.props} handleChildValueChange={this.handleChindValueChange.bind(this)}/>
)
}
9摸屠、 React 樣式
// 9.1
// 內(nèi)聯(lián)樣式 在 render函數(shù)中 定義樣式
render() {
// 內(nèi)聯(lián)樣式 網(wǎng)頁(yè)開(kāi)發(fā)中不推薦， RN中使用
const styleComponentHeader = {
header: {
backgroundColor: "#009633",
color: "#ffffff",
"padding-top": "15px", // 使用原始CSS時(shí)餐塘，使用 " " 括起來(lái)
paddingBottom: "15px"
}
};
return (
<header style={styleComponentHeader.header} className="smallFontSize">
<h1>這里是頭部</h1>
</header>
)
}
// 9.2 內(nèi)聯(lián)樣式中的表達(dá)式
export default class ComponentHeader extends React.Component {
constructor() {
super();
this.state = {
miniHeader: false
}
}
switchHeader() {
this.setState({
miniHeader: !this.state.miniHeader
})
}
render() {
const styleComponentHeader = {
header: {
backgroundColor: (this.state.miniHeader) ? "#000" : "#fff"
}
};
// "smallFontSize" 為普通CSS皂吮， 在index.html 中引入即可調(diào)用
// 內(nèi)聯(lián)樣式與事件綁定的結(jié)合案例
return (
<header style={styleComponentHeader.header} className="smallFontSize" onClick={this.switchHeader.bind(this)}>
</header>
)
}
}
