React的基本使用@2

一、相关js库

1.react.js：React核心库。

2.react-dom.js：提供操作DOM的react扩展库。

3.babel.min.js：解析JSX语法代码转为JS代码的库。

javascript 复制代码

	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

二、创建虚拟DOM的两种方式

1.纯JS方式

一般不用

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-react</title>
</head>
<body>
<!-- 准备好一个容器-->
<div id="test"></div>
<!-- 引入react核心库-->
<script src="../js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom, 用于支持react操作dom-->
<script src="../js/react-dom.development.js" type="text/javascript"></script>


<script type="text/javascript"> /*这里一定要写babel*/
    //1 创建虚拟DOM
const vDom = React.createElement('h1',{id:"test"},React.createElement('span', {},'Hello React'));
//2 渲染虚拟dom到页面
ReactDOM.render(vDom, document.getElementById('test'));

</script>
</body>
</html>

2.JSX方式

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-react</title>
</head>
<body>
<!-- 准备好一个容器-->
<div id="test"></div>
<!-- 引入react核心库-->
<script src="../js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom, 用于支持react操作dom-->
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<!-- 引入babel, 用于将jsx 转为js-->
<script src="../js/babel.min.js" type="text/javascript"></script>

<script type="text/babel"> /*这里一定要写babel*/
    //1 创建虚拟DOM
/*此处一定不要写引号，因为不是字符串*/
const  vDom = (<h1 id="title">
    <span>Hello,React</span>
</h1>)
//2 渲染虚拟dom到页面
ReactDOM.render(vDom, document.getElementById('test'));

</script>
</body>
</html>

三、虚拟DOM与真实DOM

1.React提供了一些API来创建一种 "特别" 的一般js对象

javascript 复制代码

const VDOM = React.createElement('xx',{id:'xx'},'xx')

上面创建的就是一个简单的虚拟DOM对象

2.虚拟DOM对象最终都会被React转换为真实的DOM

3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-react</title>
</head>
<body>
<!-- 准备好一个容器-->
<div id="test"></div>
<!-- 引入react核心库-->
<script src="../js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom, 用于支持react操作dom-->
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<!-- 引入babel, 用于将jsx 转为js-->
<script src="../js/babel.min.js" type="text/javascript"></script>

<script type="text/babel"> /*这里一定要写babel*/
    //1 创建虚拟DOM
/*此处一定不要写引号，因为不是字符串*/
const  vDom = (<h1 id="title">
    <span>Hello,React</span>
</h1>)
//2 渲染虚拟dom到页面
ReactDOM.render(vDom, document.getElementById('test'));
console.log(vDom)
console.log(vDom instanceof Object)
/**
 * 关于虚拟dom
 * 1、本质是Object类型的对象（一般对象）
 * 2、虚拟DOM比较"轻"(属性少），真实DOM比较"重",因为虚拟DOM是React内部再用，无需真实DOM上那么多的属性
 * 3、虚拟DOM最终会被React转化为真实DOM，呈现在页面上
 */
</script>
</body>
</html>

四、JSX

1.全称

JavaScript XML

2.本质

react定义的一种类似于XML的JS扩展语法: JS + XML本质是

React.createElement(component, props, ...children)方法的语法糖

3.作用

用来简化创建虚拟DOM

1)写法：var ele = <h1>Hello JSX!</h1>

2)注意1：它不是字符串, 也不是HTML/XML标签

3)注意2：它最终产生的就是一个JS对象

4.标签名任意

HTML标签或其它标签

5.标签属性任意

HTML标签属性或其它

6.基本语法规则

1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

2)遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

7.babel.js的作用

1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2)只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

javascript 复制代码

<script src="../js/babel.min.js" type="text/javascript"></script>

五.渲染虚拟DOM(元素)

1.语法

ReactDOM.render(virtualDOM, containerDOM)

2.作用

将虚拟DOM元素渲染到页面中的真实容器DOM中显示

3.参数说明

1)、参数一: 纯js或jsx创建的虚拟dom对象

2）、参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel" >
    const myId = 'ChIna'
    const myData = 'HeLlo,rEaCt'

    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
                <span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>
            </h2>
            <h2 className="title" id={myId.toUpperCase()}>
                <span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>
            </h2>
            <input type="text"/>
        </div>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

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

     */
</script>
</body>
</html>