一 环境搭建
1.node.js安装
2.必要的三个文件：
     <script src="build/react.js"></script>    //核心库
    <script src="build/react-dom.js"></script>      //提供与 DOM 相关的功能
    <script src="build/browser.min.js"></script>    // JSX 语法转为 JavaScript 语法
    ps:这些文件必须在页面中首先加载

二.基础方法 ReactDOM.render()，jxs语法

1.使用

<script type="text/babel"></script>  //所有jsx代码都在此标签中编写

ReactDOM.render(
   <div>您好，lsk</div>,
   document.getElementById('io')
   );

2.使用style

var st={
       color:"red",
       fontSize:"5em",
   fontWeight:"800"
    };

ReactDOM.render(
   <div style={st}>您好，lsk</div>, //调用样式是以对象的形式调用
   document.getElementById('io')
   );

3.使用判断语句的三中方法

//通过三元运算符
var HelloMessage=React.createClass({
 render:function () {return <h1>您好， {this.props.name ? this.props.name : "没有name属性"}<h1> }
})
ReactDOM.render(<HelloMessage name="li"/><HelloMessage>,document.getElementById('io'))

//通过函数调用
var HelloMessage=React.createClass({getName:function () {  if(this.props.name){  return this.props.name  }else { return "没有name属性" }  },
 render:function () {return <h1>您好，{this.getName()}</h1>}
})
ReactDOM.render(<HelloMessage name="li"></HelloMessage>,document.getElementById('io'))

//通过比较运算符
var HelloMessage=React.createClass({
 render:function () {return <h1>您好,{this.props.name || "没有name属性"}</h1>}
})
ReactDOM.render(<HelloMessage name="li"></HelloMessage>,document.getElementById('io'))

ps：黄色部分称为组件类，必须以大写字母开头，否则会报错，以上如果组件类存在“name”属性则输出“您好， li” 否则输出 您好，“没有，name属性”

三.函数的使用

var Hello=React.createClass({render:function () {return <h1>您好，{(function (obj) {if(obj.props.name){return obj.props.name  }else {return "没有name属性"  }}(this))}</h1>}
})ReactDOM.render(<Hello name="li"></Hello>,document.getElementById('io'))