接上篇        webpack学习（五）—webpack+react+es6（第1篇）

本文做个简单的图片加文字的页面。其中，配置文件跟上篇一致。项目结构：

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		.img{width:300px;height:100px;}
  8. 	</style>
  9. </head>
  10. <body>
  11. 	<div id="imgDemo"></div>
  12. 	<script src="build/bundle.js"></script>
  13. </body>
  14. </html>

　　

src/js/app.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import ImgDemo from './imgDemo';
  4.  
  5. //模拟服务器传过来的数据
  6. var dataList=[
  7. 	  {
  8. 	  	'img':'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png',
  9. 	  	'word':'百度的图标'
  10. 	  },
  11. 	  {
  12. 	  	'img':'https://www.sogou.com/web/img/logo128_50x2.png',
  13. 	  	'word':'搜狗的图标'
  14. 	  }
  15.   ];
  16.  
  17. ReactDOM.render(
  18. 	<ImgDemo data={dataList}/>,
  19. 	document.getElementById('imgDemo')
  20. 	)

src/js/imgDemo.js

  1. import React from 'react';
  2. import OneImg from './oneImg'
  3. class ImgDemo extends React.Component{
  4.   render() {
  5.     // 遍历后端给的数据，并且插入
  6.  
  7.     return <div>
  8.        {
  9. 	       	this.props.data.map((arr,index)=>
  10. 	      		<OneImg oneData={arr} key={index}/>
  11. 	    	)
  12.    		}
  13.      </div>;
  14.   }
  15. }
  16.  
  17. module.exports =  ImgDemo

src/js/oneImg.js

  1. import React from 'react';
  2. class OneImg extends React.Component{
  3.  
  4. 	render(){
  5. 		var oneData = this.props.oneData;
  6. 		return <div>
  7. 			<img className='img' src={oneData.img}/>
  8. 			<p>{oneData.word}</p>
  9. 		</div>
  10. 	}
  11.  
  12. }
  13. 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()函数我们会怎么写？

  1.   render() {
  2.     // 遍历后端给的数据，并且插入
  3.  
  4.     return <div>
  5.        {
  6. 	       	this.props.data.map(function(arr,index){
  7. 	      		return <OneImg oneData={arr} key={index}/>
  8.           }
  9. 	    	)
  10.    		}
  11.      </div>;
  12.   }

ES5到ES6,唯一的区别是将匿名函数变成了箭头函数。当然，还可以把{}里的作为一个变量申明。

  1.    render() {
  2.     // 遍历后端给的数据，并且插入
  3.     var oneWBNodes = this.props.data.map(function(aWB,index){
  4.       return <OneImg oneData={aWB} key={index}/>;
  5.     });
  6.     return <div>
  7.         {oneWBNodes}
  8.      </div>;
  9.   }

还是箭头函数简单。推荐箭头函数（ES6新加入的）

还有个问题：为什么用{}?

网上的解释：我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中，jsx用js的语法解析。

webpack学习（六）—webpack+react+es6（第2篇）的更多相关文章

  1. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  2. webpack 学习资料

    webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/

  3. webpack学习（六）—webpack+react+es6（第3篇）

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  4. reactjs学习一（环境搭配react+es6+webpack热部署）

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  5. webpack学习（五）—webpack+react+es6（第1篇）

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  6. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  7. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  8. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  9. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

随机推荐

  1. poj 3621最优比例生成环（01分数规划问题）

    /* 和求最小生成树差不多 转载思路:http://www.cnblogs.com/wally/p/3228171.html 思路:之前做过最小比率生成树,也是属于0/1整数划分问题,这次碰到这道最优 ...

  2. hdu_1017_A Mathematical Curiosity_201310280948

    A Mathematical Curiosity http://acm.hdu.edu.cn/showproblem.php?pid=1017 Time Limit: 2000/1000 MS (Ja ...

  3. K - 贪心 基础

    FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehouse containi ...

  4. Java多线程之如何确定线程数

    关于多线程的线程数的确定,最近研读过几篇paper,在此做一下笔记,方便使用时翻看. 1.<Java 虚拟机并发编程>中介绍 就是说:线程数 =  CPU的核心数 * (1 - 阻塞系数) ...

  5. Spring MVC-控制器（Controller）-参数方法名称解析器（Parameter Method Name Resolver ）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_parametermethodnameresolver.htm 说明:示例基于Sp ...

  6. 配置Java连接池的两种方式：tomcat方式以及spring方式

    1. tomcat方式:在context.xml配置连接池,然后在web.xml中写配置代码(也能够在server.xml文件里配置连接池).这两种方法的差别是:在tomcat6版本号及以上中cont ...

  7. C# 数据库备份与还原 小妹做了一个winform系统，需要对sql2000数据库备份和还原（小妹妹你太狠了）

      成功了,把代码帖出来给大家看看,跟我刚开始帖出来的差不多,是需要杀掉进程的,我之前调用的存储过程,可能有点问题,现在改成sql了/// <summary>        /// 数据库 ...

  8. 【SDOI 2010】 魔法猪学院

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1975 [算法] A*求k短路 [代码] #include<bits/stdc+ ...

  9. B3109 [cqoi2013]新数独 搜索dfs

    就是基于普通数独上的一点变形,然后就没什么了,普通数独就是进行一边dfs就行了. 题干: 题目描述 输入格式 输入一共15行,包含一个新数独的实例.第奇数行包含左右方向的符号(<和>),第 ...

  10. php循环跳出

    PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式: 代码: <?php $i = 1 ...