React结合es6实例教程

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

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

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

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

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

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

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

class App extends React.Component {
    constructor(props){
        super(props);
        this.state={
            store:new Store

        }
    }
    removeItem=(key)=>{
        //对状态进行修改
        this.setState({
            store:this.state.store.removeItem(key)
        });
    }
    render(){
        return (
            

因为Footer和Header实在没什么好说的，因此接下来出场的就是ItemPanel他们一家人了，也是根据代码来看看，通用的引入，在这里有必要简单的说下这个export了，export其实是讲构建好的模板进行抛出，让其他人可以引用，最顶层的是可以不需要这个东西的，而且他有很多中抛出方式，不是只能export一个完整的class，还可以单独抛出方法或者变量，具体细节不熟悉的小伙伴可以自行百度，看看大神的解释，但是细心的伙伴一定发现了，爷爷头上也有这个东西，那是因为我这里使用了create-react-app进行脚手架搭建，为了方便直接把它抛给了index.js。

import React from 'react';
import Item from './Item.js';
export default class ItemPanel extends React.Component{
    constructor(props){
        super(props);
    }
	render(){
	    let items = [];
	    if(this.props.items && this.props.items.length!=0){
            this.props.items.forEach((item,index) => {
                items.push();
            });
	}else{
            items.push(暂无用户);
        }
		return (
		  {items}