React入门到精通（三）——定义组件和css样式

所谓组件：即分装起来的具有独立功能的UI部件，React希望我们能够将UI组件化，一个功能一个组件，最后通过组合或者嵌套的方式组成一个大的组件，完成UI搭建。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.min.js"></script>
    <script src="../lib/browser.min.js"></script>
    <style>
        .alert-text{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    {/* 定义一个组件 */}
    var HelloMessage = React.createClass({
      render: function() {
        var styleObj = {
            color:"blue",
            fontSize:40,
            fontWeight:"normal"
        } 
        {/*style={{color:'red'}}*/}
        return <h1 style={styleObj} className="alert-text">Hello {this.props.name} {this.props.title}</h1>;
      }
    });

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

    </script>
</body>
</html>

1、分装组件（component）

这段代码中就封装了一个名叫‘HelloMessage’的组件。

提示：组件的命名规范：
1. 首写字母大写
2. 采用驼峰命名法
3. 见名知义

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

ReactDOM.render(
    <HelloMessage/>,
    document.getElementById();
);

最基本组件创建和渲染的方式。

2、React中如何定义css样式

1. 内部样式

  <style>
        .alert-text{
            font-size: 20px;
        }
    </style>

<h1 style={styleObj} className="alert-text">Hello {this.props.name} {this.props.title}</h1>;

这边注意在命名class名时，使用className而不是class.

2.内联样式

{/*style={{color:'red'}}*/}

需要两个大括号表示键值对，值是字符串的话需要用引号。（一个大括号表示书写表达式）
3.定义样式对象

 var styleObj = {
            color:"blue",
            fontSize:40,
            fontWeight:"normal"
        } 

在jsx中定义样式对象。

style={styleObj}

表达式的形式来引用css样式。