前言
记录下react的学习过程
内容
React简介
英语官网
: https://reactjs.org/
中文官网
: https://react.docschina.org/
React
React是由Facebook开源的,用于动态构建用户界面的 JavaScript 库(只关注于视图)。
特点
- 采用组件化模式、声明式编码,提高开发效率和组件复用率。
- React Native 中使用React语法进行移动端开发。
- 使用虚拟DOM和Diffing算法,尽量减少与真实DOM的交互。
React基本使用
hello react
目录结构
代码语言:javascript复制├─01_hello_react
│ hello_react.html
│
└─js
babel.min.js #将JSX语法转JS代码的库
react-dom.development.js #react扩展库
react.development.js #react核心库
hello_react.html
代码语言:javascript复制<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--创建"容器"-->
<div id="test">
</div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于将jsx转js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*一定要以text/babel来声明*/
//1. 创建虚拟DOM
const VDOM = <h1>Hello, React</h1>/*此处一定不要写引号*/
//2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>