
<!-- 引入react核心库  -->
 
<script src="js/react.development.js"></script>
 
<!-- 扩展库 操作DOM -->
 
<script src="js/react-dom.development.js"></script>
 
<!-- 把jsx语法转js -->
 
<script src="js/babel.min.js"></script>

准备容器

<div id=”hello”></div>

创建虚拟DOM


const V_DOM=React.createElement('h1',{id:'title'},'hello react!');
 
ReactDOM.render(V_DOM,document.getElementById("hello"));//渲染到页面

JSX创建虚拟DOM


let V_DOM = <h1>hello,react!</h1>
 
ReactDOM.render(V_DOM,document.getElementById("hello"));

说明：

· You are using the in-browser Babel transformer. Be sure to precompile..... babel的一个警告：你正在使用浏览器翻译babel，请确定不在生产环境中。

· jsx 就是让创建虚拟DOM变得更有层次，更简洁。

三：JSX语法

JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。

3.1 定义虚拟DOM时不要用引号。


//错误形式：
let V_DOM = ‘<h1>hello,react</h1>’;

3.2 标签混入JS表达式需要用{}


//举例：
 
let str  = "hello,react!";
 
let V_DOM = (
 
      <h1><span>{str}</span></h1>
 
)

3.3 className样式的类名


//样式的类名指定不要用class,要用className
 
 
let V_DOM = (
 
<h1 className='demo'><span>我是文本内容</span></h1>
 
)

3.4 内联样式


//要用style={{key:value}}的形式(`双{}代表对象,单{}代表表达式`)去写。
 
let V_DOM = (
 
<h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1>
 
 )
 
ReactDOM.render(V_DOM,document.getElementById("hello"));

3.5 只有一个根标签


//错误形式：
 
 let V_DOM = (
 
<h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1>
 
<p>我是段落</p>
 
 )

3.6 标签必须闭合


//举例：
<input type=”text” name=’myname’ value=’’></input>

3.7 标签首字母

·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。

·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。

3.8 js表达式

一个表达式会产生一个值,可以放在任何一个需要值的地方

· a

·a+b

·demo(1)

·arr.map(

)

·function test(){}

语句:不能放在创建虚拟dom语句中

· if(){}

· for(){}

· switch(){}

四、 JSX练习

遍历数组并输出到页面上


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
 
    <!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script>
    <script type="text/babel">
        const person=[
            {realname:'张三',age:'18'},
            {realname:'李四',age:'20'}
        ]
        const V_DOM=(
            <ul>
             {
                person.map((item,index)=>{
                    return <li key={index}>姓名：{item.realname}年龄：{item.age}</li>
                })
             }   
            </ul>
        )
        ReactDOM.render(V_DOM,document.getElementById('root'))
    </script>
</body>
</html>