接上篇        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. linux 获取经过N层Nginx转发的访问来源真实IP

    linux 获取经过N层Nginx转发的访问来源真实IP 学习:http://blog.csdn.net/zhenzhendeblog/article/details/49702575 学习:http ...

  2. cocos2d-x andriod, Box2D.h: No such file or directory

    原文链接:r=47980">http://www.cocos2d-x.org/forums/6/topics/47503? r=47980 You need to include li ...

  3. Sublime text 神器小记

    曾经一直使用的都是Editplus,一直感觉都是非常不错的. 可是近期接触到sublime text,我就fall in love with it. Sublime 的意思是"顶峰,高尚,非 ...

  4. How to do IF NOT EXISTS in SQLite

    http://stackoverflow.com/questions/531035/how-to-do-if-not-exists-in-sqlite How about this? INSERT O ...

  5. B2241 打地鼠 暴力模拟

    大水题!!!30分钟AC(算上思考时间),直接模拟就行,加一个判断约数的剪枝,再多加几个剪枝就可以过(数据巨水) 我也就会做暴力的题了. 题干: Description 打地鼠是这样的一个游戏:地面上 ...

  6. php循环跳出

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

  7. java 中接口的概念

    接口接口在java中是一个抽象的类型,是抽象方法的集合,接口通常使用interface来声明,一个类通过继承接口的方式从而继承接口的抽象方法.接口并不是类,编写接口的方式和类的很相似,但是他们属于不同 ...

  8. 【寒假集训系列DAY.1】

    Problem A. String Master(master.c/cpp/pas) 题目描述 所谓最长公共子串,比如串 A:“abcde”,串 B:“jcdkl”,则它们的最长公共子串为串 “cd” ...

  9. "etc/profile" E212: Can't open file for writing

    今天安装Java环境,出现如下错误: "etc/profile" E212: Can't open file for writing 这是安装到本地JDK路径不正确导致.怎么办呢? ...

  10. SQL SERVER 2000 如何提高大数据筛选GROUP BY 的效率

    数据库有83W条记录,本想计算20180101之后的每天赔付情况,故写了以下SQL语句: SELECT 起保时间,sum(赔付金额) as 日赔付 FROM maindata WHERE 起保时间&g ...