React之旅基础篇(二)

JSX语法规则

1. 定义虚拟DOM时，不要加引号
2. 标签中混入js表达式时要用{}
3. 样式的类名指定不要用class。要用className
4. 内联样式，要用style={{key:value}}的形式去写
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母
8. 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
9. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<style type="text/css">
	.title{
		background-color: orange;
		width: 500px;
	}
</style>

<div id="test"></div>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>

<script type="text/babel">
	// 定义变量
	const myId = 'AtGuigu'
	const myText = 'HeLlo ReAct'
	const VDOM = (
		<div>
			<h2 className="title" id={myId.toLowerCase()}>
				<span style={{color:'white',fontSize:'50px'}}>{myText.toLowerCase()}</span>
			</h2>
			<h2 className="title" id={myId.toUpperCase()}>
				<span style={{color:'white',fontSize:'50px'}}>{myText.toUpperCase()}</span>
			</h2>
			<input type="text" />
			<Good>123</Good>
		</div>
	)
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

JSX练习

一定注意区分：【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}

<script type="text/babel">
	const data = ['Angular','React','Vue']
	const VDOM = (
		<div>
			<h1>前端js框架列表</h1>
			<ul>
				{
					data.map((item,index) => {
						return <li key={index}>{item}</li>
					})
				}
			</ul>
		</div>
	)
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

模块与组件、模块化与组件化的理解

模块(名词)

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
3. 作用：复用js, 简化js的编写, 提高js运行效率

组件(名词)

1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2. 为什么要用组件： 一个界面的功能更复杂
3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化(形容词)
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化(形容词)
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

React开发者工具调试

谷歌浏览器 - 更多工具 - 扩展程序 - 左上角展开列表 - 列表最下面 - 打开chrome网上应用商店 - 下载官方的即可
打不开chrome网上应用商店使用安装包在下面的网盘链接
谷歌浏览器 - 更多工具 - 扩展程序 - 右上角开发者模式为打开状态 - 左上角按钮加载已解压的扩展程序 - 打开文件夹即可成功

开发者工具链接
链接：https://pan.baidu.com/s/1R4EeTuNX6z2l6xUAKsXlHw
提取码：0620