<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HellowReact</title>
</head>
<body>
<div id="text"></div>
<!-- React核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 用于支持React操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 注意这里的type类型一定要是 babel */
//模拟从后端传过来的数据
const data = ['java','html','vue'];
//1.创建虚拟DOM
const VDOM = (
<div>
<h1 className="header" style={{fontSize:'15px'}}>HellowReact</h1>
<h1>数组</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面 两个参数虚拟DOM,指定加入到那个容器
ReactDOM.render(VDOM, document.getElementById('text'))
/*
jsx规则
1.根节点只能有一个
2.class要写成className
3.定义虚拟DOM不要加引号
4.内联要用style={{key:'value'}}
5.标签必须闭合
6.混入js表达式时要用{}
*/
</script>
</body>
</html><!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>函数式组件</title>
</head>
<body>
<div id="text"></div>
<!-- React核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 用于支持React操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
function Dome(){
return <h1>函数定义组件</h1>
}
ReactDOM.render(<Dome/>,document.getElementById('text'))
</script>
<!--
注意事项
1.这里的函数名开头要大写，小写他们直接翻译成html标签没有这个标签直接报错，大写会认为你的是模板
2.一定要是闭合标签 <Dome/> 不然标红
-->
</body>
</html><!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="text"></div>
<!-- React核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 用于支持React操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转换成js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Weather extends React.Component{
state = {isHis:true}
render(){
const {isHis} = this.state
return <h1 onClick={this.dome}>今天天气很{isHis ? '炎热' : '凉爽'}</h1>
}
//自定义方法 要用赋值语句的形式+箭头函数
//因为写成普通方法this会成defined,箭头函数它本身没有对象他会找他的上级，就会找到 Weather 的实例化
dome =()=>{
//状态不能直接修改，必须要通过setState API进行修改
this.setState({isHis:!this.state.isHis})
}
}
//渲染组件到页面--
ReactDOM.render(<Weather/>,document.getElementById('text'))
</script>
</body>
</html>版权声明：本文为er2025166原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。