webpack学习(六)—webpack+react+es6(第2篇)
接上篇 webpack学习(五)—webpack+react+es6(第1篇)
本文做个简单的图片加文字的页面。其中,配置文件跟上篇一致。项目结构:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .img{width: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的语法解析。