组成部分:
- 准备好容器
- 引入三个js(有先后顺序)【先引入react.development.js,后引入react-dom.development.js】react.development.js react-dom.development.js babel.min.js
- babel解析jsx语法(创建虚拟dom,渲染到容器中)
1.创建虚拟dom
const VDOM = <h1>Hello</h1>
2.渲染虚拟DOM到页面(引入react.development.js全局有React
引入react-dom.development.js全局有ReactDOM)
react没提供选择器,要使用原生的
ReactDOM.render(VDOM,document.getElementById("test"));
注释{}包裹
目录
1 JSX基础语法
1 两种创建虚拟DOM的方式
1.使用JSX创建虚拟DOM(重点掌握)
const VDOM = (
<h1 id = {MyId.toLocaleUpperCase()}>
<span className = "sss" style = {{fontSize:'50px'}}>sss</span>
</h1>
)
ReactDOM.render(VDOM,document.getElementById("test"));
2.使用JS创建虚拟DOM(了解)
// 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
const VDOM = React.createElement('h1',{id:"title"},"nihao")
使用JS和JSX都可以创建虚拟DOM,但是可以看出JS创建虚拟DOM比较繁琐,尤其是标签如果很多的情况下,所以还是比较推荐使用JSX来创建
2 虚拟DOM与真实DOM 对比
- 本质是object对象
- 虚拟dom属性少,因为虚拟dom是react内部再用,无需真实dom上那么多的属性
- 虚拟dom最终会被react转化为真实dom呈现在页面上
3 语法规则
1.定义虚拟DOM,不能使用“”
2.标签中混入JS表达式的时候使用{}
{myId.toLowerCase}转小写
{myId.toLowerCase }
const MyId = "title";
const MyData = "Cyk";
// 1.创建虚拟DOM
const VDOM = (
<h1 id = {MyId.toLocaleUpperCase()}>
<span className = "sss" style = {{fontSize:'50px'}}>sss</span>
</h1>
)
// 2.渲染,如果有多个渲染同一个容器,后面的会将前面的覆盖掉
ReactDOM.render(VDOM,document.getElementById("test"));
/*
3.样式的类名指定不要使用class,使用className 同见上
4.内敛样式要使用双大括号包裹
要使用style={{样式:"值"}}
style = {{fontSize:'50px'}}
5.不能有多个根标签,只能有一个跟标签
6.标签必须闭合
7.如果小写字母开头,就将标签转化为html同名元素,如果html中无该标签对应的元素,就报错;如果是大写字母开头,react就去渲染对应的组件,如果没有就报错
关于JS表达式和JS语句:JS表达式:返回一个值,可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){} JS语句:if(){} for(){} while(){} swith(){} 不会返回一个值
PS 一定要区分js语句代码与js表达式
1 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式
(1)a
(2)a+b
(3)demo(1)
(4)fuction test(){}
(5)arr.map(()=>{}`)
2 语句(代码):
下面这些都是表达式
(1)if
(2)for
(3)switch