react高质量笔记——1

一、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>

笔记代码将持续更新哦

© 版权声明

相关文章

1 条评论

  • 头像
    黄金豆豆 读者

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

    无记录
    回复