react.js学习(1)

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

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

<script type="text/babel"></script>//创建组件messagevar 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>//创建组件messagevar 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(){};)