react 是什么
react是用来描述用户界面的js库 轻量级的视图层框架 facebook 15.6/16
react 借鉴的既不是mvm，也不是mvc，顶多算个“v”(view)
angular 借鉴的是mvc
vue 借鉴的是mvvm
vue和react各有优缺点：
vue相比起来写起来比较方便，因为一些功能vue上已经规定好了，但是知识点会特别特别多
react的灵活性比较大，需要记得知识点也相对来说较少。
版本问题：
react的官网：react官网链接地址
注意：react官网上，英文官方文档和中文官方文档的版务本号是不同的。
中文：v16.12.0
英文：v16.12.0
注意：15版本和16版本是一个重要的分界线。（2017年用的是15版本，16.9的版本是在2019年更新的）
学习15.6和最新版
开始学习react
++react和vue的写法有点类似++
react很多写法偏向于原生js
使用react,要引入三个文件。（和vue不同，vue中只需要引入一个文件）
react既能写网页，也能写app
例子如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../base/react.min.js"></script>
<!--相当于vue.js 目的是提供React对象 -->
<script src="../base/react-dom.min.js"></script>
<!-- 提供了ReactDOM 对象
rn react-native （native意思是原生）
网页： B(browser)/S(server) webapp 操作dom bom
react基本语法 + react-dom 可以写网页
app： C(client)/s(Server) 操作手机硬件以及ui
react基本语法 + react-native 可以写app
-->
<script src="../base/browser.min.js"></script>
<!-- 帮助浏览器解析jsx语法糖 -->
</head>
<body>
<!--创建一个元素-->
<div id="app">
</div>
<script type="text/babel">
/*
vue中先创建实例，然后组件继承自实例
react中没有实例，直接创建组件
1. 创建组件 15.6的写法 React.createClass
2. 不管在哪，组件是虚拟dom
3. 将虚拟dom通过 ReactDOM.render(参数1：组件标签，参数2：要挂载的元素)
4. 在react中组件名首字母必须大写
*/
let Component = React.createClass({
render() {
//render是渲染的意思，是固定的
// render的函数内部 返回jsx
return (
<h1> 你好世界</h1>
)
}
})
// 将组件的虚拟dom挂载到真实dom上
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>
</body>
jsx 语法糖 jsx:javascript xhtml
功能：用jsx 来描述组件的虚拟dom
class 也是语法糖
<div id="test" class="hehe">
<P id="p">
<div ></div>
</p>
<span>呵呵</span>
</div>
<!--以上写法就叫做jsx语法糖-->
<!--这里是不用语法糖的写法-->
React.createElemet('div',{id:"test",className："hehe"},[
React.crateElment('p',{id:p},[
React.crateElment('div',{id:p，text:"呵呵"},[])
])
React.crateElment('span',{id:p，text:"呵呵"},[])
])
xhtml:就是严格模式下的html
- 必须只有一个根元素
- 标签必须闭合
html代码不能直接写在js中
<body>
最低0.47元/天 解锁文章
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
