1. react 基础
1.1 本地引入或CDN引入react的三个js文件
注意:必须先导入react.js再导入react-dom.js
babel.js支持原生jsx语法,作用:把jsx转化为js语法,才能被浏览器识别渲染出视图
<script src="./react/react.js"></script>
<script src="./react/react-dom.js"></script>
<script src="./react/babel.js"></script>
1.2 定义react数据 渲染根标签
,相当于vue的el
<div id="myAPP"></div>
1.3 在script标签中实现react的模板、数据和逻辑
使用 type=“text/babel” 把script中的js环境切换为jsx环境,因为babel支持原生jsx语法
- 而vue的模板是在根标签中,数据和逻辑在js中
<script type="text/babel">
var zhangsan = {name: "张三"}
function add(a,b){return a+b}
// 4, 使用react内置API ReactDOM.render() 把模板和数据渲染到视图上
ReactDOM.render(
// 第一个参数:需要渲染的模板和数据
<h1>这是react模板信息-{zhangsan.name}-{add(4,5)}</h1>, // jsx语法会把标签解析为一个对象,不会报错
// 第二个参数:模板数据渲染的位置(根标签)
document.getElementById("myAPP")
)
</script>
1.4 使用react内置API ReactDOM.render()
把模板和数据渲染到视图上
ReactDOM.render() 有两个参数:
- 第一个参数:需要渲染的模板和数据
- 第二个参数:模板数据渲染的位置(根标签)
两个参数中间记得加 逗号
ReactDOM.render(
// 第一个参数:需要渲染的模板和数据
<h1>这是react模板信息-{zhangsan.name}-{add(4,5)}</