React学习(1)hello,React

介绍

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

特点

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

React高效的原因

1) 虚拟(virtual)DOM, 不总是直接操作DOM (文档/元素/属性/文本对象)
2) DOM Diff算法, 最小化页面重绘

基本使用

相关js库
1) react.js: React的核心库
2) react-dom.js: 提供操作DOM的react扩展库
3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello,React</title>
</head>
<body>
<div id="test"></div>

<!--引入react核心库-->
<script crossorigin src="./js/react.development.js"></script>
<!--引入react专门用于操作DOM的js-->
<script crossorigin src="./js/react-dom.development.js"></script>
<!--引入babel-->
<script crossorigin src="./js/babel.min.js"></script>

<script type="text/babel">//用于将jsx代码转换为原生js代码
    //1.创建一个虚拟DOM
    let vDOM = <h2>hello,react</h2>
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vDOM,document.getElementById('test'))
</script>
</body>
</html>

DEMO下载

发表评论

邮箱地址不会被公开。 必填项已用*标注