提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

React小练习

React 练习
2023-06-13 09:13:03 时间

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

<!DOCTYPE html >

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Hello React</title>

</head>

<style>

.title{

color: red;

}

</style>

<body>

<!--准备好一个容器-->

<div id="text"></div>

<!-- 加载 React。引入react核心库-->

<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 引入react-dom,用于支持react操作dom-->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!--引入babel，用于jsx转为js-->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">/*此处一定要写babel，不写默认js*/

/*

一定要注意区分：js语句和js表达式

1，表达式，一个表达式会产生一个值，可以放在任何一个需要值得地方

下面都是表达式

a

a+b

demo(1)

arr.map()

funcotion test(){}

2,语句（代码）

下面这些都是语句：

if(){}

for(){}

switch(){case:xxx}

*/

//模拟一些数据

const data=["雅俗共赏","最佳歌手","大千世界"];

//1,创建虚拟dom

const VDOM =(

<div>

<h1>有何不可</h1>

<ul>

{

data.map((item,index)=>{

return <li key={index}>{item}</li>

})

}

</ul>

</div>

)

//2,渲染虚拟dom到页面

ReactDOM.render(VDOM,document.getElementById('text'))

</script>

</body>

</html>

相关文章