JS框架-React.js

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

<div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
       <div>
         <h1>{1+1}</h1>
        </div>
       ,
       document.getElementById('example')
      );
    </script>

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

React 组件

React.createClass 方法用于生成一个组件类 HelloMessage。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象

React State(状态)

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

如onClick 等事件，与原生 HTML 不同，on 之后第一个字母是大写的！

比如本章实例中，如果将 onClick={this.handleClick} 换成 onclick={this.handleClick} 则点击事件不再生效。