React開源資源 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)/,  // 跳過 其他包文件
            loader: 'babel-loader',     // 用babel來解釋
            query: {                    // 加載react與es6的包
                presets: ['react', 'es2015']
            }
        }]
    },
    output: {        // 在/src/目錄下生成bundle.js文件
        path: __dirname + "/src",
        filename: "bundle.js"
    }
};

3.全局安裝webpack、webpack開發者服務, 以及項目安裝

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    // 監控js變化后，立刻更新打包
webpack-dev-server   // 監控js變化后，立刻重新打包，并渲染
webpack-dev-server --content-base --inline --hot  //

5.React developer Tools 谷歌瀏覽器工具https://github.com/facebook/react-devtools

8.生命周期

// state
初始化： this.state = {username: "Parry"};
初始化可以放置在構造函數 constructor 里
修改 state:   this.setState({username: "IMOOC"});
state 的作用域只屬于當前類，不污染其它模塊 
state 對于模塊屬于 自身 屬性

// Props 
props 對于模塊屬于 外來 屬性
傳遞參數：  <BodyIndex username={"Parry"}>
模塊中接受參數： this.props.username

點擊事件

changeUserInfo() {
  this.setState({age:50});
}

render() {
  return (
    <input type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/>
  )
}

子組件向父組件傳值

// 在子頁面中通過調用父頁面傳遞過來的事件 props 進行組建間的參數傳遞

// 子組件
<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} 將其父組件傳來的值，傳給其子組件
render() {
  return (
    <BodyChild {...this.props} handleChildValueChange={this.handleChindValueChange.bind(this)}/>
  )
}

9、 React 樣式

// 9.1
// 內聯樣式 在 render函數中 定義樣式
  render() {

    // 內聯樣式 網頁開發中不推薦， RN中使用 
    const styleComponentHeader = {
      header: {
        backgroundColor: "#009633",
        color: "#ffffff",
        "padding-top": "15px",    // 使用原始CSS時，使用 " " 括起來
        paddingBottom: "15px"
      }
    };

    return (
      <header style={styleComponentHeader.header} className="smallFontSize">
        <h1>這里是頭部</h1>
      </header>
    )
  }

// 9.2 內聯樣式中的表達式
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 中引入即可調用
    // 內聯樣式與事件綁定的結合案例
    return (
      <header style={styleComponentHeader.header} className="smallFontSize" onClick={this.switchHeader.bind(this)}>
      </header>
    )
  }
}