接上篇        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的语法解析。

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. Java 和JS Base64加密

    项目在登录.注册等场景实现时,经常会用到用户信息前端加密,然后项目后端二次解密,避免信息直接在浏览器上以明文显示. 本文主要介绍了base64加密的方式处理代码,不支持中文 源码如下: base64. ...

  2. JQuery获取select选中值和清除选中状态（转）

    1.获取值 var provinceSearch = $("#loc_province_search").find("option:selected").att ...

  3. WinCE：在Win7上连接WinCE手持设备

    当我们通过usb将WinCE 手持设备与Win7 PC连接后,我们通常希望通过Windows Mobile Center软件与手持设备实现同步.方法很简单,从下列列表中选择适合自己操作系统的Windo ...

  4. DirectX11 学习笔记8 - 最简单的光照

    在上一个列子的基础上加了一个地面.这个地面是光照效果生成的. 看图: 先说明: 光照 须要重写一个 lightshader  就是光照的渲染器 // Define the input layout D ...

  5. 阻尼滑动--能够滑动过度的ScrollView（OverScrollView）

    贴上一个我自己用过的阻尼滑动的ScrollView,像QQ里面那种滑动效果,尽管不是我写的,可是我认为还能够,贴出来做个记录,实用到的时候免得到处去找. 代码例如以下: /* * Copyright ...

  6. 欢聚时代校园招聘java开发一面经历

    收到yy短信通知笔试通过后隔天就一面了,面试时间是下午1点半,跟另外一个同学在1点半的时候已经到了目的酒店,发现面试都集中在一个大厅,摆了非常多桌椅,由不同的面试关在面试.等到2点多的时候才到我.先说 ...

  7. 《解读window核心编程》 之 注冊表

    1 注冊表的作用及组织形式 Windows系统使用注冊表来存储系统和应用程序配置数据.非常多系统和应用程序重要的配置的信息都存储在注冊表中. 注冊表是一种以树型结构组织的数据库.树的每个节点称 作键( ...

  8. Windows 驱动开发 - 8

    最后的一点开发工作:跟踪驱动. 一.驱动跟踪 1. 包括TMH头文件 #include "step5.tmh" 2. 初始化跟踪 在DriverEntry中初始化. WPP_INI ...

  9. Android：制作Update.zip升级包 【转】

    本文转载自:http://zwkufo.blog.163.com/blog/static/2588251201382293049118/ 很多时候厂商或者三方提供的ROM并不能满足需求,比如系统自带软 ...

  10. B2568 比特集合 树状数组

    啊啊啊,跳题坑死人.抽了一道国集的题,自己瞎编了一个算法,好像过不了而半途而废.转去看题解,发现用二维树状数组维护一下,偏移量我倒是想对了,但是维护的东西和我的完全不一样.还是有很大差距啊... 题解 ...