reactjs入门

初识jsx
在html文档中使用reactjs
ReactDOM.render()
JSX语法
组件
this.props
this.props.children
PropTypes
ReactDOM.findDOMNode()
React组件支持的事件
this.state
表单
组件的生命周期
ajax

初识jsx

//reactjs.cn/react/docs/jsx-in-depth.html

在html文档中使用reactjs

<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html> 

上面使用了三个库：

react.js（react的核心库）
react-dom.js（提供与dom相关的功能）
browser.min.js（将jsx语法转换成javascript）

使用如下命令将src下的js文件转码后放到build子目录下：

$ babel src --out-dir build

ReactDOM.render()

ReactDOM.render()是react最基本的方法

ReactDOM.render(
  <h1>Hello, world!</h1>, //html模板
  document.getElementById('example')   //被插入的dom节点
); 

JSX语法

JSX 允许直接在模板插入 JavaScript 变量或javascript语句，但不加任何引号，{}内的内容都以javascript规则解析

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

变量可以是数组，JSX会把数组的所有成员都添加到模板

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
); 

style=”color:{this.state.color}”这种写法是错误的，应该是style={ {color:this.state.color} }

组件

React.createClass方法用于生成组件类

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
); 

组件类的命名用大驼峰命名，其他变量命名可以用小驼峰。添加组件属性，还有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字

this.props

this.props可以获取组件上的属性值，传递给组件的命名属性作为this.props的键

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点，它是一个数组

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        this.props.children.map(function (child) {
          return <li>{child}</li>
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

getDefaultProps 方法可以用来设置组件属性的默认值

更多的PropTypes设置，可以查看官方文档

ReactDOM.findDOMNode()

从组件获取真实 DOM 的节点ReactDOM.findDOMNode()

React组件支持的事件

onClick()、onChange()、onSelect()等等’完整的事件清单请查看官方文档

this.state

组件的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

this.props 和 this.state 都用于描述组件的特性，但this.props是只读变量，不允许被改变的，而 this.state 是会随着用户互动而产生变化的。

表单

表单内里面的值不应该用this.props.value来获取，因为this.props的值是不可以被改变的，可以定义一个onChange()事件，通过event.target.value来读取。

组件的生命周期

组件的生命周期分为三个状态：

Mounting：已插入真实dom
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

最后，感谢:

阮一峰文章
 阿训的博客