安装配置 - React

React介绍

React是一个用于构建用户界面的JavaScript库。
React主要用于构建UI,其本事不是一个MVC框架,只是是MVC中的V（视图）。
React起源于Facebook的开源项目,诞生之初用来架设Instagram网站。

React特点

声明式设计 − React采用声明范式，可以轻松描述应用。
高效 − React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 − React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React入门示例

示例使用React版本v15.4.1; 库下载地址: https://github.com/facebook/react/releases

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- react.js是react的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js的作用是提供与Dom相关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js的作用是讲JSX语法转换成JavaScript预发 -->
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
  <!-- React渲染的模板内容会插入到该Dom节点中,作为一个容器-->
  <div id="container"></div>
</body>
<!--
    在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel
    babel是一个转换编译器,ES6转成可以在浏览器中运行的代码
-->
<script type="text/babel">
  ReactDOM.render(
    <h1>第一个React示例程序</h1>,
    document.getElementById("container")
  );
</script>
</html>

说明:

build中的js库来自https://github.com/facebook/react/releases。
在React开发中,使用JSX语法,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel; babel是一个转换编译器,ES6转成可以在浏览器中运行的代码
ReactDom.render()是最基本的React语法,支持三个参数:(参数1:模板渲染的内容,为html形式, 参数2:模板需要插入的dom结点, 参数3: 渲染后的回调,一般不用)

React JSX

React使用JSX来替代常规的 avaScript; JSX是一个看起来很像XML的JavaScript语法扩展。

JSX必须借助React环境运行,JSX语法能够让我们更直观的看到组件的Dom结构,不能直接在浏览器上运行,最终会转换成JavaScript。
JSX标签其实就是HTML标签,只不过在JavaScript中书写这些标签时,不需要使用””括起来, 可以像xml一样书写

<script type="text/babel">
 ReactDOM.render(
    <h1>
        第一个React示例程序
    </h1>,
    document.getElementById("container")
  );
</script>

JSX中运行JavaScript代码,使用{}括起来, 语法格式为:{表达式}

<script type="text/babel">
  var text = "第一个React示例程序";
  ReactDOM.render(
    <h1>{text}</h1>,
    document.getElementById("container")
  );
</script>

React定义组件

React中创建组件类以大写字母开头,驼峰命名法。
在React中使用React.createClass方法创建一个组件类。
每个组件类都必须实现自己的render方法,输出定义好的组件模板,返回值:null、false、组件模板;

<script type="text/babel">
  // 定义组件类
  var HellComponent = React.createClass({
      render: function(){
        return <h1>第一个自定义组件</h1>;
      }
  });
  // 渲染dom
  ReactDOM.render(
    <HellComponent/>,
    document.getElementById("container")
  );
</script>

React定义样式

React组件样式样式,有三种: 内连样式(示例div元素)、对象样式(示例h1元素)、选择器样式(示例h2元素)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- react.js是react的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js的作用是提供与Dom相关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js的作用是讲JSX语法转换成JavaScript预发 -->
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
    <style>
      .ft{ color: blue;}
    </style>
</head>
<body>
  <!-- React渲染的模板内容会插入到该Dom节点中,作为一个容器-->
  <div id="container"></div>
</body>
<!-- 在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel
     babel是一个转换编译器,ES6转成可以在浏览器中运行的代码
-->
<script type="text/babel">

  // react中定义对象样式
  var hellStyle = {
    backgroundColor: "green",
    color: "red",
  }

  // 定义组件类, this.props定义组件属性
  var HellComponent = React.createClass({
      render: function(){
        return (
          <div style={{backgroudColor:"yellow", borderWidth:5}}>
            <h1 style={hellStyle}>第一个自定义组件,动态参数{this.props.param1}</h1>
            <h2 className="ft">第一个自定义组件-动态参数:{this.props.param2}</h2>
          </div>
        );
      }
  });

  // 渲染dom
  ReactDOM.render(
    <HellComponent param1="参数1" param2="参数2"/>,
    document.getElementById("container")
  );
</script>
</html>

在React和Html5中设置样式时书写格式是有区别的

html5样式以;结尾,React以,结尾
Html5中key,value都不需要加引号, React中属于JavaScript对象, key的名字不能出现“-”, 需要使用驼峰命名法, 如果value为字符串需要加""
Html5中value如果是数字,需要带单位,React中不需要带单位.
Html5中选择器样式使用class, React中class是关键字,使用选择器样式时, 属性名使用className, 类似的也有使用htmlFor替换for.

React事件操作

React事件示例

<script type="text/babel">
    var BtnAction = React.createClass({
      // react中事件命名规范: 首字母小写, 驼峰命名法
      handleClick: function(){
          alert("点击按钮触发事件");
      },
      render: function(){
        return (
          <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
        );
      }

    });
    // 渲染dom
    ReactDOM.render(
    <BtnAction buttonTitle="React事件按钮"/>,
    document.getElementById("container")
    );
</script>

React状态操作

React状态示例

<script type="text/babel">
    var CheckButton = React.createClass({
        // 定义初始状态
        getInitialState: function(){
          return {
            // 在这个对象中设置的属性值,将会存储在stage中,
            isCheck: false
          }
        },
        // 定义事件绑定方法
        HandleChange: function(){
          // 修改状态值,通过this.stage读取设置的状态
          this.setState({
            isCheck: !this.state.isCheck
          });
        },
        render: function(){
          // 根据状态设置显示的文字
          // 在JSX语法中,不能直接使用if,需要使用三目运算符
          var text = this.state.isCheck? "已选中": "未选中";
          return (
            <div>
              <input type="checkbox" onChange={this.HandleChange} />
              {text}
            </div>
          );
        }
    });

    // 渲染dom
    ReactDOM.render(
    <CheckButton/>,
    document.getElementById("container")
    );
</script>

当state发生变化时,会调用组件内部的render方法。

React资料

React教程: http://www.runoob.com/react/react-components.html