React结合es6实例教程

前言        

        本文主要是关于webpack+es6+react的基础页面实例的讲解，通过这个简单的单页面的讲解，当掌握单页面的用法后，实现具体项目是也就是通过控制台调用不同的页面，本文为基础帖到实战帖的过度，适合有react基础的小伙伴，大神请绕行哦。

        ok我们废话不多讲直接上图，先给大家看下完成后的效果图，是不是很丑，没关系啦！懂得原理剩下的交给css去做啦，什么配色呀，图片添加呀，大多都是ui的事情，你都懂了不就是抢了别人饭碗了吗，不过吧有一个好的页面鉴赏和规划能力也是必不可少的，但是大家都是菜鸟就不拘小节一下下啦，忍住往下看。

 页面整体

        使用react制作页面时，我觉得吧应该从对页面划分开始，那么我就先简单的对页面进行划分，其中head和foot主要是为了让大家更好的体会关于页面模块化，在本页面中并没有什么卵用，它们会在本鸟后续的博客中体现自己的威力。

        图中可以看出页面是由三层嵌套关系也就是代码中的嵌套，绿色的是爷爷辈，红色自然就是儿子啦，小蓝就是孙子啦，我们发现爷爷有三个儿子，分别是header、ItemPanel、Footer，只有ItemPanel到了结婚年纪了生下了小蓝Item，因此js之间的关系也就非常明了了，然后我们去看下面的实现过程。

页面容器App.js

        在爷爷辈的App.js中通过import引入自己的三个儿子，注意import不是react特有的方法，他和export以及class都是es6中添加的，这个超级爽如果熟悉java的小伙办就会觉得超级熟悉有没有，定义方法和使用规则简直和java一样有没有，我们针对任意一个引入进行讲解：import Header from  './Header.js';就是引入同级目录下的Header.js文件并且起了个别名叫个Header，这个用处就是在后续的render()函数中当做标签使用，并且可以在<Header/>标签中添加属性，通过属性props可以进行数据流传递。

import './App.css';
import React from 'react';

import Header from './Header.js';
import ItemPanel from '.