react 系统学习-笔记

第1章：React入门

1. 1. React的基本认识
      1. 官网
2. 英文官网: https://reactjs.org/
3. 中文官网: https://doc.react-china.org/
   1. 1. 介绍描述

1. 用于构建用户界面的 JavaScript 库(只关注于View)
2. 由Facebook开源
   1. 1. React的特点

1. Declarative(声明式编码)
2. Component-Based(组件化编码)
3. Learn Once, Write Anywhere(支持客户端与服务器渲染)
4. 高效
5. 单向数据流
   1. 1. React高效的原因

1. 虚拟(virtual)DOM, 不总是直接操作DOM
2. DOM Diff算法, 最小化页面重绘
   1. React的基本使用

注意: 此时只是测试语法使用, 并不是真实项目开发使用

1. 1. 1. 效果

1. 1. 1. 相关js库
2. react.js: React的核心库
3. react-dom.js: 提供操作DOM的react扩展库
4. babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
   1. 1. 在页面中导入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>

 

1. 1. 1. 编码

<script type="text/babel"> //必须声明babel   // 创建虚拟DOM元素   const vDom = <h1>Hello React</h1> // 千万不要加引号   // 渲染虚拟DOM到页面真实DOM容器中   ReactDOM.render(vDom, document.getElementById('test')) </script>

1. 1. 1. 使用React开发者工具调试