<!DOCTYPE html> <html> <head> <title>Hello world</title> <script src="..../.react.js"></script> <script src=".../.JSXTransformer.js"></script> </head> <body>
<script type="text/jsx">
var HelloWorld=React.createClass({ render:function(){ return <p>Hello wold!</p> } }),
React.render(<helloWorld></HelloWorld>,document.body);
</script>
</body> </html>
首先注意。1).我们创建的组件名首字母要大写，主要是为了和html原来有的组件 区分开来，因为html中的标签都是小写开头的。
2).React.render(<helloWorld></HelloWorld>,document.body);后面的doucment.body的意思是将这个标签添加到document.body中去。
(2).JSX的语法
先看下面的一个例子
var HelloMessage=React.createClass({ render function(){ return <div className="test">hello {this.props.name}</div> } }) React.render(<HelloMessage name="john"></HelloMessage>,document.body);
首先自定义的标签名首字母要大写,其次我们可以通过{this.props.name}来获取标签属性值，此处值为john。注意一定要用{}包裹起来才可以。{}里面是javascript的一个求值表达式。但是不能是语句。例如if语句，switch语句等不能。我们还可以放一个函数的调用。函数名一般是驼峰命名。此外在这里对于class和for属性要写成className和htmlFor来代替。
(3).注释
单行注释：//
多行注释：/*.....*/
对于react注释有两种，一，子节点注释:要用大括号包裹起来
render function(){
return <div className="test">hello{
//adjadahj;
/*ajkdalk
jsdflfja*/
} {this.props.name}</div>
}
属性节点注释：
render function(){
return <div /*asfdaf*/className="test" //afagsagfsa;>hello {this.props.name}</div>
}
css属性添加
<script type="text/jsx"> var style={ color:red; font-size:16px; } var HelloWorld=React.createClass({ render:function(){ return <p>Hello wold!</p> } }), React.render(<div style={style}><helloWorld></HelloWorld></div>,document.body); </script>
首先，我们创建一个css对象，其次我们创建的对象是不能直接在自定义组件上设置的，所以我们一般在自定义组件外面包裹一个div，然后将css一个对象属性添加到div上面，但是我们要注意，我们给div的style添加的是一个css对象属性，所以有{}。
(4).{}表达式的书写方式。
var HelloMessage=React.createClass({ render function(){ return <div className="test">hello {this.props.name}</div> } }) React.render(<HelloMessage name="john"></HelloMessage>,document.body);
如果我们需要实现这样的功能，如果有name属性的话，就输出hell this.props.name;如果没有的话，就输出hello world
{if(this.props.name){
return this.props.name;
} else{
return "world";
}
}这种方式会出错，因为{}这里面是一个语句而不是一个表达式。
正确的方法有
1：三元表达式：{this.props.name ? this.props.name:"world";}
2:变量
var HelloMessage=React.createClass({ getName:function(){
if(this.props.name){
return this.props.name;
}else{
return "world";
}
} render: function(){
var name=getName(); return <div className="test">hello, {name}</div> } }) React.render(<HelloMessage name="john"></HelloMessage>,document.body);
方法三：函数
var HelloMessage=React.createClass({ getName:function(){ if(this.props.name){ return this.props.name; }else{ return "world"; } } render: function(){ return <div className="test">hello, {getName()}
</div>
}
}
)
React.render(<HelloMessage name="john"></HelloMessage>,document.body);
最后一种方法：逻辑方法
{this.props.name||"world"}
这句话的意思就是如果this.props.name为真的话就返回this.props.name.如果为假的话就返回"world";