1.页面引入文件

结构大致如下

<!DOCTYPE html>
<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="app"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

其中需要注意，书写react语法的script标签的type属性为text/babel。因为要使用jsx语法，关于jsx，大家可以点击react系列--jsx
面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成(babel模块)。

2.ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
);

上面代码将一个 h1 标题，插入 example 节点

注意：模板必须唯一顶层元素

3.样式设置

style

React.render(
    <div style={{color:'red'}}>
        xxxxx
    </div>,
    document.body
);

类名(className)

React.render(
    <div className="box">content</div>,
    document.body
);

4.事件绑定

function say(){
        alert("How old are you?")
}
React.render(
    <button onClick={say} />,
    document.body
);

注意：事件驼峰命名！

5.组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

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

ReactDOM.render(
  <Hello />,
  document.getElementById('app')
);

注意：组件模板必须唯一顶层元素

小插曲（HTML 标签 vs. React 组件）

ReactDOM.render方法可以渲染HTML结构，也可以渲染React组件。
渲染HTML标签，声明变量采用首字母小写

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.body);

渲染React组件，声明变量采用首字母大写

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.body);

5.1 组件props

注意：react中props与vue不同，只是作为属性传递，是不可变的
this.props 对象的属性与组件的属性一一对应

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

ReactDOM.render(
  <Hello  name="veblen"/>,
  document.getElementById('app')
);

但是有一个例外，就是 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
);

这里需要注意，this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map来遍历子点而不用担心 this.props.children 的数据类型是 undefined还是 object。更多的 React.Children的方法，请参考官方文档。

React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
    })

5.2组件PropTypes

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

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title属性是必须的，而且它的值必须是字符串。

如果验证不通过，则会在控制带显示错误信息！

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

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

上面代码会输出"Hello World"。

5.3组件内部事件

var Mybtn=React.createClass({
          say:function(){
                alert("How old are you!")
          }
          render:function(){
                    return(
                          <button onClick={this.say} />
                    )
          }
})

this指向组件实例

5.4组件state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked:true};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'love' : 'hate';
    return (
      <p onClick={this.handleClick}>
            I{text}veblen 
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('app')
);

上面代码是一个LikeButton 组件，它的getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而this.state 是会随着用户互动而产生变化的特性。

5.5组件数据双向绑定（后期会写一篇针对数据绑定的文章）

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

5.6组件生命周期

- componentWillMount()----------挂载前

- componentDidMount()-----------挂载后

- componentWillUpdate(object nextProps, object nextState)-----更新前

- componentDidUpdate(object prevProps, object prevState)-----更新后

- componentWillUnmount()-------销毁前

6.操作真实DOM

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到ref属性

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

上面代码中，组件MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName]就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取this.refs.[refName]属性。

7.获取数据

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

来源：https://www.cnblogs.com/ak0310/p/7513722.html

标签

react

dom

react系列--基本语法结构