React 入门必备 【第一关 】JSX基础语法

组成部分：

• 准备好容器
• 引入三个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（重点掌握）

2.使用JS创建虚拟DOM（了解）

2 虚拟DOM与真实DOM  对比

3 语法规则

4 模块组件化理解

---

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

4 模块组件化理解