生活随笔
收集整理的這篇文章主要介紹了
04_JSX练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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">
/*
* 功能:動態展示列表數據
* 需求:將一個數據的數組轉換為一個標簽的數組(使用數組的map()方法)
* */
//1.數據
const names = ['jQuery', 'zepto', 'angular', 'react', 'vue'];
//2.創建虛擬dom
const ul = (
<ul>
{
names.map((name, index) => <li key={index}>{name}</li>) //箭頭函數
}
</ul>
);
//3.渲染虛擬dom
ReactDOM.render(ul, document.getElementById('example1'));
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的04_JSX练习的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
