React入门
概念
React是用于构建用户界面的JavaScript库
React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
特点
- 采用组件化模式、声明式编码，提高开发效率及组件复用率。
- 在React Native中可以使用React语法进行移动端开发。
- 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互，这是高效的原因。
hello案例
<body>
<div id="test"></div>
<!-- react核心库 -->
<script src="../js/react.development.js"></script>
<!-- react扩展库，用于react支持操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入Babel，将jsx转换为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel"> // 格式是babel,jsx语法
// 创建虚拟DOM 没有引号
const VDOM = (
<h1>
<span>hello_react</span>
</h1>
);
// 渲染
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
虚拟DOM
关于虚拟DOM:
1.本质是0bject类型的对象(一般对象)
2.虚拟DOM比较“轻”。真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
jsx
概念
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
优点
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
语法
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。不是js语句，js语句不能写
1.表达式: - 一个表达式会产生一个值，可以放在任何一个需要值的地方 下面这些都是表达式:. (1). a (2). a+b (3). demo(1) (4). arr.map() (5). function test () {}
2.语询(代码): 下面这些都是语句(代码): (1). if(){} (2). for(){} (3). switch(){case:xxxx}
3.样式的类名指定不要用class，要用className。
4.内联样式，要用
style={{key:value}}的形式去写。单词用驼峰连接5.只有一个根标签
6.标签必须闭合
7.标签首字母.
- (1).若小写字母开头，则将改标签转为htm1中同名元素，若htm1中 无该标签对应的同名元素，则报错。
- (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
给一个数组能自动遍历，但是给一个对象不能自动遍历，并且遍历时，需要为每个遍历对象（标签）加一个唯一的key
const myId = 'id'
const myData = 'Hello, react'
// 1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white', fontSize:'29px' }}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span sty1e={{color:'white', fontSize:'29px'}}> {myData.toLowerCase()}</span>
</h2>
<ul>
data.map((item, index) => {
return <li key={index}>{item}</li>
})
</ul>
<input type="text"/>
<Good></Good>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'));
模块
1)理解: 向外提供特定功能的js程序,一般就是- 一个js文件
2)为什么要拆成模块:随着业务逻辑增加，代码越来越多且复杂。
3)作用:复用js,简化js的编写,提高js运行效率
组件
1)理解: 用来实现局部功能效果的代码和资源的集合(htm/css/js/image等等)
2)为什么:一个界面的功能更复杂
3)作用:复用编码,简化项目编码,提高运行效率
模块化
当应用的js都以模块来编写的,这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现,这个应用就是一个组件化的应用