React 入门实例

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>
    )
  }
}