尚硅谷-react[1-6集]

目录

步骤

1. devlopment.js
2. react-dom.devopment.js
3. babel.min.js // 将jsx转为js

体验

// 这个虚拟dom的内容不能够写引号,单引号双引号
const VDOM = <h1>nihao  react</h1>
// 可以使用括号进行编写
const VDOM1 = (
	 <h1>nihao  react</h1>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test")) 

虚拟DOM

创建方式不推荐的一种-在script中写

<script type=text/javascript>
	const VDOM = React.createElement('h1',{id:'title'},'标签内容')
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

创建方式推荐的一种-在babel中写

// 这个虚拟dom的内容不能够写引号,单引号双引号
const VDOM = <h1>nihao  react</h1>
// 可以使用括号进行编写
const VDOM1 = (
	 <h1>nihao  react</h1>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test")) 

虚拟DOM本质

1. 本质是Object类型对象.一般对象.就是 js 中 的 obj 对象
2. 比较轻.没有真是dom那么多属性
3. 虚拟dom最终会转为真是dom

jsx

语法规则

1. 定义DOM时 不要写 引号
2. 标签混入 js 表达式的时候 需要使用 {   }. 表达式有返回值
3. 样式类名要写 className
4. 内敛样式要写 style={{key:value}}
5. 只能有一个根标签
6. 标签首字母是小写.会转换成html同名元素.如果没有同名元素,则会报错
	如果首字母大写.react会去渲染对应组件.没有定义组件,则报错
7. 

jsx作用

为了解决创建虚拟DOM繁琐的作用

写样式

// 在css中编写样式
const VDOM1 = (
	// 可以写 class,会警告.老版本报错
	 <h1 className='title'>nihao  react</h1>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test")) 

内联样式

const VDOM1 = (
	// 可以写 class,会警告.老版本报错
	// 外面的{} 代表写js表达式,里面的{}代表要写 json 格式对象
	 <h1 className='title' style={{}}>nihao  react</h1>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test")) 

数据

写个数组

能够遍历

const arr= ['1','2']
const VDOM1 = (
	// 可以写 class,会警告.老版本报错
	// 外面的{} 代表写js表达式,里面的{}代表要写 json 格式对象
	<div>
		 <h1 className='title' style={{color:withe}}>nihao  react</h1>
		 <ul>{arr}</ul>
	<div/>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test")) 

写个对象

react里面写对象,会报错.不能够这么写.

const obj = {'a':'1','b':'2'}
const VDOM1 = (
	// 可以写 class,会警告.老版本报错
	// 外面的{} 代表写js表达式,里面的{}代表要写 json 格式对象
	<div>
		 <h1 className='title' style={{color:withe}}>nihao  react</h1>
		 <ul>{arr}</ul>
	<div/>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test"))

表达式

产生一个值的,是表达式. 放在需要值的地方

对数组数据进行加工

const obj = {'a':'1','b':'2'}
const VDOM1 = (
	// 可以写 class,会警告.老版本报错
	// 外面的{} 代表写js表达式,里面的{}代表要写 json 格式对象
	<div>
		 <h1 className='title' style={{color:withe}}>nihao  react</h1>
		 {
			arr.map((item)=>{return <li>item</li>})
		}
	<div/>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test"))

报错

react中每一个节点都需要一个key 属性

const obj = {'a':'1','b':'2'}
const VDOM1 = (
	// 可以写 class,会警告.老版本报错
	// 外面的{} 代表写js表达式,里面的{}代表要写 json 格式对象
	<div>
		 <h1 className='title' style={{color:withe}}>nihao  react</h1>
		 {
			arr.map((item,index)=>{
				return <li key={index}>{item}</li>
			})
		}
	<div/>
)
// 只有这里会写一次 通过原生api操作dom
reactDOM.render(VDOM,document.getElementById("test"))