React 简介

1、React的基本认识

官网:

1) 英文官网: https://reactjs.org/

2) 中文官网: https://doc.react-china.org/

介绍描述:

1) 用于构建用户界面的 JavaScript 库(只关注于View)

2) 由Facebook开源

React 特点:

1) Declarative(声明式编码)

2) Component-Based(组件化编码)

3) Learn Once, Write Anywhere(支持客户端与服务器渲染)

4) 高效

5) 单向数据流

React 高效的原因:

1) 虚拟(virtual)DOM, 不总是直接操作DOM

2) DOM Diff算法, 最小化页面重绘

React 基本使用:

基本js库:

1) react.js: React的核心库

2) react-dom.js: 提供操作DOM的react扩展库

3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

编码:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
    //创建虚拟Dom元素
    const vDom = <h1>Hello React</h1>;
    //渲染虚拟 DOM 到页面真实 DOM 容器中
    ReactDOM.render(vDom,document.getElementById('test'));
</script>
</body>
</html>