react基础&JSX基础

一、HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
1、要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

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

2、要渲染 React 组件，只需创建一个大写字母开头的本地变量。

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

3、React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
二、
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
例：

ReactDOM.render(
/*注释 */
<h1>detanx {/*注释*/}</h1>,
document.getElementById('example')
);

三、JSX中不能使用if else，可以使用三元运算符代替
例：

?

1	<h1 style={mystyle}>{1 > 2? 'true':'false'}</h1>

四、react组件
例：

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

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

需要向组件传递参数，可以使用 this.props 对象
例：

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

/*方法二
function HelloMessage(props){
　　return <h1>Hello,{props.name}</h1>;
}*/

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

 

通过 getDefaultProps() 方法为 props 设置默认值

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

name 属性通过 this.props.name 来获取。
注意：在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，
这是因为 class 和 for 是 JavaScript 的保留字。
五、复合组件
例：

var WebSite = React.createClass({
　　render: function() {
 　　return (
　　　　<div>
　　　　　　<Name name={this.props.name} />
　　　　　　<Link site={this.props.site} />
　　　　</div>
　　);
　}
});

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

var Link = React.createClass({
　　render: function() {
　　　return (
　　　　<a href={this.props.site}>
　　　　　　{this.props.site}
　　　　</a>
　　　);
　　}
});

ReactDOM.render(
　　<WebSite name="detanx" site=" http://www.baidu.com" />,
　　document.getElementById('example')
);

注意：ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠"/"的尖括号包围的