02React的JSX 与Style

一门新技术的出来,最直接的学习方式就是,学习官网,然后加以延展,最后融会贯通.他的官网地址就是,react官网
点击getstarted.

HTML部分
<script src="https://facrbook.github.io/react/js/jsfiddle/integation.sj"></script>
<div id = "container">
    <!-- this element's contents will replaced with your component -->
<div>

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

React.render(<Hello name="World" tittle = "Mr">,
document.getElementById("container"));

js :javascript x:xml 是facebook为react框架 开发的语法糖,
语法糖又叫糖衣语法,是指计算机语言中,添加的某种语法,这种语法对语言的功能并没有影响,
但是更方便程序员的使用,它主要的目的还是增加程序的可读性,,从而减少程序代码出错的机会,
jsx就是js的一种语法糖,类似的还有,CoffeScript ,微软出的Tapescript ,
最终呢,他们都被解析成js,才能被浏览器 理解和执行.
如果我们把jsx的语法写在script的标签里,

<script type= "text/javascript">
    function testJSX(){
        return(<div>test JSX</div>)
}
</script>

在没有解析库的情况下,浏览器是没有办法识别它的.这也是所有语法糖略有不足的地方,
我们首先需要引入解析js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js">

通过指定JSX 来告诉他不是普通的js代码而是jsx

<script type= "text/JSX">
    function testJSX(){
        return(<div>test JSX</div>)
}
</script>

div标签 hello自定义标签，我们统称为：react components ,
ta代表的并不是一个真实的dom节点，在react 看来，他就是react components div 的一个实例。
这些react components 是怎么被呈现在页面上的呢？

通过render方法，第一个参数是 我们要渲染的react components ,第二个参数是react 渲染完之后要装入的容器container。id 为container的div里面

接下来看一下hello components 它是怎么声明的.自定义的components 通过调用react.createClass进行创建 他的参数其实是 一个js的object 这其中最重要的key 值就是这个 render,是一个function这个function 的返回值直接决定了这个自定义的components被渲染出来是 个什么样子的结构,我们看到气馁是一个div elements ,里面的值呢是文本hello {this.props.name} 一个js表达式
this 代表react components 的实例 ,
props呢,则是我们在使用着react components 时,在其上面所添加的属性的集合他的key值,跟这里写的值name是一一对应的,value值呢就是name 的value值.比如我们这里再添加一个title 的属性 ,来表示敬称”Mr “tittle=”Mr”
return

Hello{this.props.tittle}{this.props.name}

Hello Mr World

在js环境里,无法在标签里直接写class 类名,要用className

在react 中,行内样式不适用字符串的形式来表示的 ,需要用一个样式对象来表示,
样式对象的key值就是样式名的驼峰标识写法,值呢则是样式的值
所以这里我们可以写成:style={{color:”red”}}.
写了2个括号,

var styleObj ={
    color:"red"
}

style={styleObj }.