生活随笔
收集整理的這篇文章主要介紹了
04_JSX练习
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架</h2>
<div id="example1"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
* 功能:動態(tài)展示列表數(shù)據(jù)
* 需求:將一個(gè)數(shù)據(jù)的數(shù)組轉(zhuǎn)換為一個(gè)標(biāo)簽的數(shù)組(使用數(shù)組的map()方法)
* */
//1.數(shù)據(jù)
const names = ['jQuery', 'zepto', 'angular', 'react', 'vue'];
//2.創(chuàng)建虛擬dom
const ul = (
<ul>
{
names.map((name, index) => <li key={index}>{name}</li>) //箭頭函數(shù)
}
</ul>
);
//3.渲染虛擬dom
ReactDOM.render(ul, document.getElementById('example1'));
</script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的04_JSX练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
