React概述
React：是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库（框架）。
React的特性：
- 声明式视图
- 对于声明式组件，当数据变更的时候，React底层负责高效更新。
- 这种方式代码更加可预见并且更容易调试。
- 组件化
- 封装管理数据的组件，通过组合的方式实现复杂的UI，组件的逻辑采用js实现而不是模板，这样可以保持数据在DOM之外。
- 一次学习，随处编写
- React可以进行服务端渲染，也可以用于移动APP开发（React Native）。
React基本使用
HelloWorld案例：
基本步骤：
- 引入react库文件 react 和 react-dom。
- react 核心
- react-dom 提供了一些DOM操作相关的API，它依赖于的 react 核心库
- 引入babel运行时（React代码浏览器不认识，需要通过babel把react代码转化为js代码）。
- babel
- 基于React语法进行开发。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<!-- 1、导入相关的js库文件 -->
<script type="text/javascript" src="./lib/react.development.js"></script>
<script type="text/javascript" src="./lib/react-dom.development.js"></script>
<!-- babel 把React代码编译成原生js -->
<script type="text/javascript" src="./lib/babel.min.js"></script>
</head>
<body>
<!-- 2、准备模板的容器 -->
<div id="app"></div>
<!-- 3、基于React相关的语法写代码 -->
<script type="text/babel">
<!-- render 方法的作用：把参数一的内容渲染到参数二指定的位置 -->
ReactDOM.render(<h1>HelloWorld</h1>, document.getElementById('app'))
</script>
</body>
</html>
- 把js代码单独放到文件里：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./lib/react.development.js"></script>
<script type="text/javascript" src="./lib/react-dom.development.js"></script>
<script type="text/javascript" src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="src/HelloWorld.js"></script>
</body>
</html>
- HelloWorld.js文件内容：
let element = <div>HelloWorld!</div>;
ReactDOM.render(
element,
document.getElementById('root')
);
注意：如果把React代码放到专门的js文件中运行，必须通过http协议进行页面测试，不可以使用file协议（直接双击打开）。
扫一扫
3148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
