一、React入门
(一)简介
1.官网
1.英文官网: https://reactjs.org/
2.中文官网:
https://react.docschina.org/
2.介绍描述
1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源
3.React的特点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效(优秀的Diffing算法)
4.React高效的缘由
1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。
(二)React的基本使用
1.相关js库
1.react.js:React核心库。
2.react-dom.js:提供操作DOM的react扩展库。
3.babel.min.js:解析JSX语法代码转为JS代码的库。
2.Hello Word案例
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>hello_react</title>
</head>
<body>
<!–准备好容器–>
<div id=”test”></div>
<!–引入react核心库–>
<script src=”../js/react.development.js” type=”text/javascript”></script>
<!–引入react-dom,用于支持react操作DOM–>
<script src=”../js/react-dom.development.js” type=”text/javascript”></script>
<!–引入babel,用于将jsx转js–>
<script src=”../js/babel.min.js” type=”text/javascript”></script>
<script type=”text/babel”> /*此处必定要写babel*/
// 1、创建虚拟Dom
// 注意:必定不能写引号, 不是字符串
const VDOM = <h1>hello, react</h1>
// 2、将虚拟dom渲染到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
笔记代码将持续更新哦



关注我,全栈工程师不是梦