接上篇 webpack学习（五）—webpack+react+es6（第1篇）
本文做个简单的图片加文字的页面。其中，配置文件跟上篇一致。项目结构：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img{300px;height:100px;}
</style>
</head>
<body>
<div id="imgDemo"></div>
<script src="build/bundle.js"></script>
</body>
</html>
src/js/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import ImgDemo from './imgDemo';
//模拟服务器传过来的数据
var dataList=[
{
'img':'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png',
'word':'百度的图标'
},
{
'img':'https://www.sogou.com/web/img/logo128_50x2.png',
'word':'搜狗的图标'
}
];
ReactDOM.render(
<ImgDemo data={dataList}/>,
document.getElementById('imgDemo')
)
src/js/imgDemo.js
import React from 'react';
import OneImg from './oneImg'
class ImgDemo extends React.Component{
render() {
// 遍历后端给的数据，并且插入
return <div>
{
this.props.data.map((arr,index)=>
<OneImg oneData={arr} key={index}/>
)
}
</div>;
}
}
module.exports = ImgDemo
src/js/oneImg.js
import React from 'react';
class OneImg extends React.Component{
render(){
var oneData = this.props.oneData;
return <div>
<img className='img' src={oneData.img}/>
<p>{oneData.word}</p>
</div>
}
}
module.exports = OneImg
其中，package.json、webpack.config.js跟上篇一致。这里不再列出。
安装: npm init
启动：npm run dev
项目地址：http://localhost:8080/index.html
注意：声明class，类名首字母需要大写，小写的话根本不走这个class。
以下的是废话，可以不看。。。
------------------
这里思考个问题：
上面的src/js/imgDemo.js是ES6的写法，如果用ES5，render()函数我们会怎么写？
render() {
// 遍历后端给的数据，并且插入
return <div>
{
this.props.data.map(function(arr,index){
return <OneImg oneData={arr} key={index}/>
}
)
}
</div>;
}
ES5到ES6,唯一的区别是将匿名函数变成了箭头函数。当然，还可以把{}里的作为一个变量申明。
render() {
// 遍历后端给的数据，并且插入
var oneWBNodes = this.props.data.map(function(aWB,index){
return <OneImg oneData={aWB} key={index}/>;
});
return <div>
{oneWBNodes}
</div>;
}
还是箭头函数简单。推荐箭头函数（ES6新加入的）
还有个问题：为什么用{}?
网上的解释：我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中，jsx用js的语法解析。