React安装引入

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41847321/article/details/102496455

React特点

1.声明式编码(react,vue)数据驱动视图 jQuery(命令式编码)
2.组件化编码
3.一次运行，随处编写(可以在服务端编写)
4.高效 虚拟DOM
5.单向数据流(vue,react) 组件数据只能单向传递 vue有双向数据绑定功能

React安装引入

// react文件
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// babel解析jsx
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>


<script type="text/babel">

</script>

JSX语法规则

const str = <h1>hello world</h1>
ReactDOM.render(str,document.getElementById('root'))

1.<h1>hello world</h1>为虚拟DOM,JSX遇到尖括号开头的代码,以标签的语法解析,与HTML同名的解析为HTML标签，其余的按特殊方式
2.jsx里面要解析js代码时,必须要写在{}里面

ES6

 names.map((name,index)=>
    <li key={index}>{name}</li>
    )

 names.map((name,index)=>{
     return <li key={index}>{name}</li>
     })

有return时，必有大括号；
去掉return，去掉大括号即可；