前言
本文主要是关于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 '.