react的使用方法

来源:互联网 发布:头像源码 编辑:程序博客网 时间:2024/05/01 21:02

主要是针对诸如我这类的react小白用户,看看react的一些常用的基础语法等。

react起步

要使用react,首先需要引入两个文件,react.js和react-dom.js。一般我们会使用jsx模板,上生产环境前需要对jsx进行转译。如果是平时开发,可以引入一个browser.min.js文件,可以进行实时转换。
当然,如果能够配合npm和webpack一起使用,将会事半功倍。可以查看webpack如何与react进行配合。

jsx语法

jsx允许html和js混写。如下所示:

ReactDOM.render(  <div>  {    names.map(function (name) {      return <div>Hello, {name}!</div>    })  }  </div>,  document.getElementById('example'));

它的规则是遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

react语法

ReactDOM.render()

ReactDOM.render()用于渲染,也就是将组件插入到页面中去。使用方法为:

ReactDOM.render(    <h1>hello world</h1>,    document.getElementById('example'))

前面写插入的内容,后面写插入到哪里。

创建组件

创建组件主要使用了React.createClass()。
用法如下

react在es6下的写法

0 0
原创粉丝点击