React入门

1、介绍

  • React：构建用户界面的JavaScript库，由Facebook出品的JS框架；
  • babel.min.js：JS编译器，将JSX转换为标准的JS代码；
  • react.development.js：React开发版核心代码，用于创建UI；
  • react-dom.development.js：提供与DOM相关的功能，将创建的UI渲染到浏览器中；

2、react的第一个简单程序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React第一个页面</title>
</head>

<body>
  <!-- 首先需要一个挂载点 -->
  <div id="root"></div>
  
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>

  <script type="text/babel"> //注意type="text/babel",将解析JSX语法；
    // 1、创建虚拟DOM
    var msg = "Hello,React";
    var h1 = <h1>{msg}</h1>;  //JS语句必须放在{}中
    // 2、将虚拟DOM挂载到真实DOM中
    ReactDOM.render(h1,document.getElementById("root"));
  </script>
</body>
</html>

3、虚拟DOM创建的两种方式：

  • 使用JSX，多使用！
<script type="text/babel"> //第一种必须声明type="text/babel"
    // 1、创建虚拟DOM
    var msg = "Hello,React";
    var h1 = <h1>{msg}</h1>;  //JS语句必须放在{}中
    // 2、将虚拟DOM挂载到真实DOM中
    ReactDOM.render(h1,document.getElementById("root"));
</script>
  • 使用纯JS创建
<script> 
    // 1、创建虚拟DOM
    var msg = "纯JS创建虚拟DOM";
    var virtualDom = React.createElement('h1',{id:"myID"},msg);
    // 2、将虚拟DOM挂载到真实DOM中
    ReactDOM.render(virtualDom,document.getElementById("root"));
</script>

 

posted @ 2020-03-11 20:12  红桃七716  阅读(132)  评论(0)  编辑  收藏  举报