create-reac-app搭建项目框架(第二部分)
上部分说的是最简单的创建react项目。这里依然以上项目骨架为基础,增加布局的开发。
我是这样考虑的。把项目分成两个大的布局。一个是登录、注册、忘记密码的外层布局,和基于antd的layout做成的内层布局。
如图,忘记密码和注册和这个页面几乎一样,就不贴图了。
在登录成功后,会跳转到内层布局。因为之前一直再用vue,使用react开发在这一块真的饶了太久了,最后还是看了很多方法才解决的。下面看下项目的结构
先看路由文件的内容,上面有引入文件的写法,截图就没有放上去了。
现在再来看看Layout这个文件立,里面的写法
我踩的第一个坑就在这里,最开始我用的是函数式组件。结果这里不知道怎么写,因为没有this.props.children的写法,最后换成类组件这样写才把页面加载到这里。真是摸着石头过河,也算是让自己学到些东西了。
最后就是入口文件了
要记得在最外层加上这个组件,因为antd默认是英文模式,使用这个可以改成中文模式。