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

本文共 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

你可能感兴趣的文章
BZOJ 4999 This Problem Is Too Simple!
查看>>
POJ - 1995 Raising Modulo Numbers 【快速幂】
查看>>
dwr 文件上传
查看>>
第二章 在HTML中使用JavaScript
查看>>
C++的explicit关键字
查看>>
《SQL Server性能调优实战》知识点汇总
查看>>
JS 中文乱码
查看>>
原生JS实现音乐播放器!
查看>>
hive-安装MySQL(centos6.4)
查看>>
UVa 12100 Printer Queue (习题 5-7)
查看>>
windows下安装apache zookeeper
查看>>
第三周作业
查看>>
git pull --rebase
查看>>
linux下mysql的root密码忘记解决方
查看>>
protobuf 中的嵌套消息的使用 主要对set_allocated_和mutable_的使用
查看>>
0-1背包问题
查看>>
系统的Drawable(二)-Selector
查看>>
CAS 界面根据不同的域名显示不同的界面
查看>>
Node js 嵌入式模板引擎 ejs 的使用
查看>>
vue 事件修饰符
查看>>