JSX語法，箭頭函數(shù)和map遍歷數(shù)組，{}接收變量內(nèi)容，模板字符串，等比縮小【詩書畫唱】
目錄：
作業(yè)
個人注釋
第1題的注釋
”{變量名}“的格式插入HTML標(biāo)簽中，就是接收js中的變量的內(nèi)容，不加{}就是接收變量名，而不是接收變量的內(nèi)容。{}常常用于接收變量的內(nèi)容。字符串拼接常常用到模板字符串（`${}`)。
第三題的解析
<style>
img{
width: auto;
height: 100px;
}
</style>就類似于等比縮小圖片的作用。
JSX語法的很多代碼例子
if語句.html
JSX表達(dá)式.html
{}中可以顯示值類型的變量和數(shù)組的內(nèi)容，但是不能夠顯示普通對象，
變量的值如果是布爾類型或者是null和undefined，那么不會顯示任何內(nèi)容
JSX數(shù)組.html
JSX元素添加樣式.html
JSX注釋.html
引用外部的JSX文件.html
預(yù)備知識.html
數(shù)組的map方法
?? ??? ? ??let newArr = arr.map(i => i * 3);
? ? ? ? ? ? console.log(newArr);
? let books = ['西游記','三國演義','水滸傳','紅樓夢'];
? ? ??? ? ? let newBooks = books.map(str => '《' + str + '》');
? ? ? ? ? ? console.log(newBooks);
作業(yè)
1、let data = ['語文','數(shù)學(xué)','英語'];
通過map方法將數(shù)組中的內(nèi)容顯示為一個列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let data = ['語文','數(shù)學(xué)','英語'];
? ? ? ? ? ? let Newdata= data.map(name => (
? ? ? ? ? ?<li key={name}>{name}</li>
? ? ? ? ??
? ? ? ? ?));
? ? ? ? ?
ReactDOM.render(<ul>{Newdata}</ul>,document.getElementById('id1'));
</script>
</head>
<body>
<div id="id1"></div>
</body>
</html>
2、let data = [{name:'六神',price:'9.6'},{name:'辣條',price:'4.6'}];
通過map方法將數(shù)組中的內(nèi)容顯示為一個表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let data = [{name:'六神',price:'9.6'},{name:'辣條',price:'4.6'}];
? ? ? ? ? ? let Newdata= data.map(o => (<tr key={o.name} >
? ? ? ? ? ?<td>{o.name}</td>
? ? ? ? ? ?<td>{o.price}</td>
? ? ? ? ? ?</tr>));
ReactDOM.render(<tbody>{Newdata}</tbody>,document.getElementById('id1'));
</script>
</head>
<body>
<table border="1" id="id1"></table>
</body>
</html>
3、let data = ['img/1.png','img/2.png','img/3.png'];
通過map方法將數(shù)組中的內(nèi)容顯示為圖片列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let data = ['img/1.png','img/2.png','img/3.png'];
? ? ? ? ? ? let Newdata= data.map(o => (
? ? ? ? ? ? <li>
? ? ? ? ? ? <img key={o} srcc={o} />
? ? ? ? ? ? </li>
? ? ? ? ? ?
? ? ? ? ? ));
ReactDOM.render(<ul>{Newdata}</ul>,document.getElementById('id1'));
</script>
<style>
img{
width: auto;
height: 100px;
}
</style>
</head>
<body>
<div id="id1"></div>
</body>
</html>
個人注釋
第1題的注釋：
map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
map() 方法按照原始數(shù)組元素順序依次處理元素。
注意：?map() 不會對空數(shù)組進(jìn)行檢測。
注意：?map() 不會改變原始數(shù)組。
map方法有返回值，返回值用變量接收。
第三題的解析
<style>
img{
width: auto;
height: 100px;
}
</style>就類似于等比縮小的作用。
JSX語法的很多代碼例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
// function judgeNum(num){
//// if(num % 2 == 0) {
//// return <strong>{num}是一個偶數(shù)</strong>;
//// }else {
//// return <em>{num}是一個奇數(shù)</em>;
//// }
//? ? ? ? ? ? ? return num % 2 == 0 ? <strong>{num}是一個偶數(shù)</strong> :?
//? ? ? ? ? ? ? ? ? <em>{num}是一個奇數(shù)</em>;
// }
// ReactDOM.render(judgeNum(3),document.getElementById('app'));
let judgeNum = num => num % 2 == 0 ? <strong>{num}是一個偶數(shù)</strong> : <em>{num}是一個奇數(shù)</em>;
ReactDOM.render(judgeNum(5),document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let num = 36;
let msg = 0;
//{}中可以顯示值類型的變量和數(shù)組的內(nèi)容，但是不能夠顯示普通對象
let stu = {name: 'Tom'};
let arr = ['你好',stu.name,'!'];
/*
{}中可以顯示值類型的變量和數(shù)組的內(nèi)容，但是不能夠顯示普通對象，
變量的值如果是布爾類型或者是null和undefined，那么不會顯示任何內(nèi)容
*/
let b1 = false;
let b2 = true;
let a;
let b = null;
ReactDOM.render(<h1>
? ? ? ? ? ? ? ?<p>{num}</p>
? ? ? ? ? ? ? ?<p>{msg}</p>
? ? ? ? ? ? ? ?<p>{stu.name}</p>
? ? ? ? ? ? ? ?<p>{arr}</p>
? ? ? ? ? ? ? ?<p>{b1}</p>
? ? ? ? ? ? ? ?<p>{b2}</p>
? ? ? ? ? ? ? ?<p>{a}</p>
? ? ? ? ? ? ? ?<p></p>
? ? ? ? ? ? ? ?<p>{'true'}</p>
? ? ? ? ? ? ? ?<p>{num % 2 == 0 ? '偶數(shù)' : '奇數(shù)'}</p>
? ? ? ? ? ? ? ?<p>{msg || '沒有可以顯示的內(nèi)容'}</p>
? ? ? ? ? ? ? ? </h1>,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let pros = [
? ? {id: 1,pname: '巧克力',price: 8.5,unit: '塊'},
? ? {id: 5,pname: '辣條',price: 4.5,unit: '包'},
? ? {id: 8,pname: '爆米花',price: 12,unit: '桶'}
];
// let items = [];
// for(let p of pros) {
// let i = (<tr>
// ? ? ? ? ?<td>{p.id}</td>
// ? ? ? ? ?<td>{p.pname}</td>
// ? ? ? ? ?<td>人民幣{p.price}</td>
// ? ? ? ? ?<td>{p.unit}</td>
// ? ? ? ? ?</tr>);
// //將i元素放到items數(shù)組的尾部
// items.push(i);
// }
? ? ? ? ? ? let items = pros.map(p => (<tr key={p.id} >
? ? ? ? ? ?<td>{p.id}</td>
? ? ? ? ? ?<td>{p.pname}</td>
? ? ? ? ? ?<td>人民幣{p.price}</td>
? ? ? ? ? ?<td>{p.unit}</td>
? ? ? ? ? ?</tr>));
ReactDOM.render(<tbody>{items}</tbody>,document.getElementById('app'));
</script>
</head>
<body>
<table border="1" id="app"></table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//設(shè)置P元素的字體顏色是紅色，字體大小是50px
//屬性都是駝峰式命名方式
let myStyle = {
color: 'red',
fontSize: '50px',
backgroundColor: 'blue'
};
ReactDOM.render(<p style={myStyle} >測試文字</p>,document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//注釋
let e = <h1>{/*HTML中的注釋*/}Hello world</h1>;
ReactDOM.render(e,document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<!-- 引入外部的jsx文件 -->
<script type="text/babel" srcc="js/my.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
//js/my.js
ReactDOM.render(<h1>Hello world</h1>,
document.getElementById('app'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//數(shù)組的map方法
let arr = [1,2,3];
// let newArr = [];
// for(let i = 0;i < arr.length;i ++) {
// newArr[i] = arr[i] * 3;
// }
? ? ? ? ? ? //item:當(dāng)前的元素
? ? ? ? ? ? //index:當(dāng)前元素的下標(biāo)
//? ? ? ? ? let newArr = arr.map(function(item){
//? ? ? ? ? return item * 3;
//? ? ? ? ? });
? ? ? ? ? ? let newArr = arr.map(i => i * 3);
? ? ? ? ? ? console.log(newArr);
? ? ? ? ? ??
? ? ? ? ? ? let books = ['西游記','三國演義','水滸傳','紅樓夢'];
//? ? ? ? ? let newBooks = books.map(function(item){
//? ? ? ? ? return '《' + item + '》';
//? ? ? ? ? });
? ? ? ? ? ? let newBooks = books.map(str => '《' + str + '》');
? ? ? ? ? ? console.log(newBooks);
</script>
</head>
<body>
</body>
</html>
