react笔记--03

react基础用法

react引入
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../base/react.min.js"></script>
  <script src="../base/react-dom.min.js"></script>
  <script src="../base/browser.min.js"></script>
</head>
  1. <script src="../base/react.min.js"></script>
    相当于vue.js 提供的是React对象
  2. <script src="../base/react-dom.min.js"></script>
    提供了ReactDOM 对象
  3. <script src="../base/browser.min.js"></script>
    帮助浏览器解析jsx语法糖

rn react-native
网页 B(browser)/S(server) webapp dom bom
react基本语法 + react-dom 可以写网页
app C(client)/s(Server) 手机硬件以及ui
react基本语法 +react-native 可以写app

react创建实例（15.6版本）
<body>
  <div id="app">

  </div>

<script type="text/babel">

let Component = React.createClass({
  render() {  // render函数内部 返回jsx
    return (  // 用小括号表示返回的是jsx格式
      <h1> Hello World</h1>
    )
  }
})
ReactDOM.render(<Component/>,document.getElementById('app'))
// 将组件的虚拟dom挂载到真实dom上
</script>
</body>
</html>

1. 15.6版本创建组件 React.createClass
2. 组件是虚拟dom
3. 将虚拟dom通过 ReactDOM.render(组件标签，要挂载的元素)
4. 组件名必须大写

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容