博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React组件开发(一)初识React
阅读量:4647 次
发布时间:2019-06-09

本文共 1050 字,大约阅读时间需要 3 分钟。

*React不属于MVC、MVVM,只是单纯的V层

*React核心是组件(提高代码复用率、降低测试难度、代码复杂度)。

*自动dom操作,状态对应内容

*React核心js文件:react.jsreact-dom.js,每一个react组件开发都必须引用这两个js文件。

*browser.js用来将浏览器不识别的jsx代码翻译成js,通常也是作为第三个js文件引入。

*jsx代码: js跟xml混合一起的代码

1.一段jsx代码

<div id="box"></div>

<script type="text/babel">

    //注释---js 跟xml 混在一起写的风格,叫做jsx代码,需要借助工具(browser.js)翻译成正常的js代码

    ReactDOM.render(

      <div>
        <h1>Hello, world!</h1>
        <ul>
          <li>12345</li>
        </ul>
      </div>,
      document.getElementById('box')
      );
</script>

2.自定义React组件

<div id="box"></div>

<script type="text/babel">

  //自定义react组件

  var Hello= React.createClass({

  render:function(){
    return (
      <div>
        <h2>Hello world 组件!</h2>
        <ul>
          <li>1111</li>
          <li>2222</li>
          <li>3333</li>
        </ul>
      </div>
      )}
  })

  ReactDOM.render(<Hello></Hello>,document.getElementById("box"));

</script>

*组件首字母是大写 会被认为是自定义组件,首字母是小写,会被认为是 原生dom节点

* 组件最外层需要被一个标签包裹,不能有兄弟节点

* return (加上小括号,可以缩进)

转载于:https://www.cnblogs.com/BlueCc/p/6509346.html

你可能感兴趣的文章
爬取网站附件
查看>>
java基础图形界面和IO系统
查看>>
javascript学习笔记
查看>>
hdu 3996
查看>>
python第三十九课——面向对象(二)之初始化属性
查看>>
python学习笔记之函数装饰器
查看>>
FEM计算2D瞬态热传导方程
查看>>
四年时光,匆匆而过
查看>>
【php】【psr】psr1 基础编码规范
查看>>
WAF SSI
查看>>
LDAP & it's implementation
查看>>
Apache HttpComponents中的cookie匹配策略
查看>>
冰封的海盗攻略
查看>>
Netty4.x中文教程系列(四) 对象传输
查看>>
linux下find命令使用举例、
查看>>
GET请求在Tomcat中的传递及URI传递
查看>>
ubuntun 服务器与Mac
查看>>
重温JSP学习笔记--与日期数字格式化有关的jstl标签库
查看>>
java-Date-DateFormat-Calendar
查看>>
封装CLLocationManager定位获取经纬度
查看>>