react.js学习(1)

1.react.js框架运用必须引用3个文件

• react.js
• react-dom.js
• browser.min.js
  
  2、react.js应用的基本结构

<script type="text/babel"></script>
//创建组件message
var Message = React.createClass({
   //告诉react要渲染的内容
   render:function(){
     return{
     <h1>齐天大圣</h1>
}
   }

}) ;
//组件创建完成之后，我要正式开始渲染这个组件
reactDOM.render(
   //创建我们的第一个组件
   <Message>,
   //我们要把组件渲染到制定的位置
   document.getElementById("app"),
   //渲染之后的回调函数
   function(){
   console.log("渲染完成");
};
);

怎么样添加渲染样式
在head区域添加style样式如下:

app1 {
background-color:blue;
}

在react中添加样式

<script type="text/babel"></script>
//创建组件message
var Message = React.createClass({
   //告诉react要渲染的内容
   render:function(){
     return{
     <h1 className = app1>齐天大圣</h1>//不能通过class=app1添加
}
   }

}) ;

也可以通过以下这种方法

reactDOM.render(
   //创建我们的第一个组件
   //添加一个系统标签。message相当于一个自定义标签，直接在Message标签内添加className="app1"不能产生效果。可以这样写,在message外围包一层系统标签如div、p:
   <div><Message className="app1"></message></div>,
   //我们要把组件渲染到制定的位置
   document.getElementById("app"),
   //渲染之后的回调函数
   function(){
   console.log("渲染完成");
}
);

如果样式写在js里面:

var style = {
    background-color:green;
}

这相当于一个对象，我们可以把这个对象做为样式应用到react当中

var Message = React.createClass(){
    render:function(){
       return(
       <h1 style = {style}>齐天大圣</h1>//表示当成原生js对象来处理
       );
    }
}
//或者写在渲染过程中
reactDOM.render(
<div><Message style={style}></Message></div>,
document.getElementById("app")，
//执行回调函数
function(){};
)