第1章:React入门
-
- React的基本认识
- 官网
- React的基本认识
- 英文官网: https://reactjs.org/
- 中文官网: https://doc.react-china.org/
-
- 介绍描述
-
- 用于构建用户界面的 JavaScript 库(只关注于View)
- 由Facebook开源
-
- React的特点
-
- Declarative(声明式编码)
- Component-Based(组件化编码)
- Learn Once, Write Anywhere(支持客户端与服务器渲染)
- 高效
- 单向数据流
-
- React高效的原因
-
- 虚拟(virtual)DOM, 不总是直接操作DOM
- DOM Diff算法, 最小化页面重绘
- React的基本使用
注意: 此时只是测试语法使用, 并不是真实项目开发使用
-
-
- 效果
-
-
-
- 相关js库
-
- react.js: React的核心库
- react-dom.js: 提供操作DOM的react扩展库
- babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
-
- 在页面中导入js
-
<script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> |
-
-
- 编码
-
<script type="text/babel"> //必须声明babel // 创建虚拟DOM元素 const vDom = <h1>Hello React</h1> // 千万不要加引号 // 渲染虚拟DOM到页面真实DOM容器中 ReactDOM.render(vDom, document.getElementById('test')) </script> |
-
-
- 使用React开发者工具调试
-