LOADING

Follow me

初学react.js – kenneth5530 – 开源中国社区
十月 27, 2016|ITReact

初学react.js – kenneth5530 – 开源中国社区

初学react.js – kenneth5530 – 开源中国社区

一 环境搭建

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'))

no comments
Share

发表评论